From a1e93befdad4d9dc8bbc1feb845ad62a7a41f60f Mon Sep 17 00:00:00 2001
From: Jorran de Wit <jorrandewit@outlook.com>
Date: Tue, 28 Mar 2017 23:12:21 +0200
Subject: [PATCH] Improve templates/frontend alignments

---
 .bootstraprc                                  |   1 +
 journals/api.py                               |  14 +
 .../journals/_publication_citations.html      |   5 +-
 scipost/static/scipost/assets/css/_nav.scss   |  18 +
 scipost/static/scipost/assets/css/style.scss  |   1 +
 scipost/templates/scipost/index.html          |  10 +-
 scipost/templates/scipost/personal_page.html  | 852 +++++++++---------
 .../_editorial_communication_content.html     |   9 +-
 .../_recommendation_author_content.html       |   4 +-
 .../_recommendation_fellow_content.html       |   2 +-
 .../templates/submissions/editorial_page.html |  77 +-
 .../submissions/eic_recommendation.html       | 127 ++-
 submissions/templates/submissions/pool.html   |  22 +-
 .../submissions/submission_detail.html        |  32 +-
 submissions/views.py                          |   4 +-
 15 files changed, 572 insertions(+), 606 deletions(-)
 create mode 100644 journals/api.py
 create mode 100644 scipost/static/scipost/assets/css/_nav.scss

diff --git a/.bootstraprc b/.bootstraprc
index cd4c5b095..aeee7c0d5 100644
--- a/.bootstraprc
+++ b/.bootstraprc
@@ -35,6 +35,7 @@
     "scripts": {
         "alert": true,
         "collapse": true,
+        "tab": true,
         "tooltip": true,
         "util": true,
     }
diff --git a/journals/api.py b/journals/api.py
new file mode 100644
index 000000000..88a91a4c5
--- /dev/null
+++ b/journals/api.py
@@ -0,0 +1,14 @@
+from rest_framework.generics import ListAPIView
+
+from .models import Publication
+from .serializers import PublicationSerializer
+
+
+class PublicationList(ListAPIView):
+    """
+    List all publications that are published.
+    """
+    # def get_queryset(self, request, format=None):
+    queryset = Publication.objects.published()
+    serializer_class = PublicationSerializer
+        # return Response(serializer.data)
diff --git a/journals/templates/journals/_publication_citations.html b/journals/templates/journals/_publication_citations.html
index a7954a898..355d00855 100644
--- a/journals/templates/journals/_publication_citations.html
+++ b/journals/templates/journals/_publication_citations.html
@@ -1,4 +1,7 @@
-XX
+{# TO BE USED IN FUTURE #}
+
+
+
 {% comment %}
 output = '<ul>'
 context = Context({})
diff --git a/scipost/static/scipost/assets/css/_nav.scss b/scipost/static/scipost/assets/css/_nav.scss
new file mode 100644
index 000000000..f63e0e900
--- /dev/null
+++ b/scipost/static/scipost/assets/css/_nav.scss
@@ -0,0 +1,18 @@
+.nav.btn-group .nav-item {
+    padding: 0 !important;
+}
+
+.nav.personal-page-nav {
+    .nav-item {
+        background-color: #ddd;
+        color: #002b49;
+
+        .nav-link.active {
+            background-color: #eeeeee;
+        }
+
+        a {
+            color: #002b49;
+        }
+    }
+}
diff --git a/scipost/static/scipost/assets/css/style.scss b/scipost/static/scipost/assets/css/style.scss
index b40f5ca89..b3b24f61e 100644
--- a/scipost/static/scipost/assets/css/style.scss
+++ b/scipost/static/scipost/assets/css/style.scss
@@ -27,6 +27,7 @@
 @import "messages";
 // @import "modal";
 @import "navbar";
+@import "nav";
 @import "page_header";
 @import "tables";
 @import "tooltip";
diff --git a/scipost/templates/scipost/index.html b/scipost/templates/scipost/index.html
index 16a00c308..5a3cfc7e1 100644
--- a/scipost/templates/scipost/index.html
+++ b/scipost/templates/scipost/index.html
@@ -2,9 +2,8 @@
 
 {% load staticfiles %}
 
-{% block bodysup %}
+{% block content %}
 
-<div class="container">
     <div class="row">
         {% if latest_newsitems %}
         <div class="col-md-6 {% if user.is_authenticated %}col-lg-4{% else %}col-lg-3{% endif %}">
@@ -131,10 +130,7 @@
             </div>
         </div>
     </div>
-</div>
 
-
-<div class="container">
     <hr>
     <div class="row">
         <div class="col-md-6">
@@ -157,6 +153,6 @@
             <a href="//www.crossref.org" target="_blank"><img src="//assets.crossref.org/logo/crossref-logo-200.svg" width="100" alt="Crossref logo"></a>
         </div>
     </div>
-</div>
 
-{% endblock bodysup %}
+
+{% endblock %}
diff --git a/scipost/templates/scipost/personal_page.html b/scipost/templates/scipost/personal_page.html
index a71ba32e9..bad9aa53c 100644
--- a/scipost/templates/scipost/personal_page.html
+++ b/scipost/templates/scipost/personal_page.html
@@ -4,462 +4,427 @@
 
 {% block pagetitle %}: personal page{% endblock pagetitle %}
 
-{% block headsup %}
-
-{% load scipost_extras %}
-
-<script>
-  $(document).ready(function(){
-   $(".TabSection").hide();
-   $(".TabItem").attr("class", "TabItem inactive");
-   $("#AccountTab").attr("class", "TabItem active");
-   $("#Account").show();
-   $("#AccountTab").click(function(){
-    $(".TabItem").attr("class", "TabItem inactive");
-    $("#AccountTab").attr("class", "TabItem active");
-    $(".TabSection").hide();
-    $("#Account").show();
-   });
-   $("#EdActionTab").click(function(){
-    $(".TabItem").attr("class", "TabItem inactive");
-    $("#EdActionTab").attr("class", "TabItem active");
-    $(".TabSection").hide();
-    $("#EdActions").show();
-   });
-   $("#RefereeingTab").click(function(){
-    $(".TabItem").attr("class", "TabItem inactive");
-    $("#RefereeingTab").attr("class", "TabItem active");
-    $(".TabSection").hide();
-    $("#Refereeing").show();
-   });
-   $("#SubmissionsTab").click(function(){
-    $(".TabItem").attr("class", "TabItem inactive");
-    $("#SubmissionsTab").attr("class", "TabItem active");
-    $(".TabSection").hide();
-    $("#Submissions").show();
-   });
-   $("#CommentariesTab").click(function(){
-    $(".TabItem").attr("class", "TabItem inactive");
-    $("#CommentariesTab").attr("class", "TabItem active");
-    $(".TabSection").hide();
-    $("#Commentaries").show();
-   });
-   $("#ThesesTab").click(function(){
-    $(".TabItem").attr("class", "TabItem inactive");
-    $("#ThesesTab").attr("class", "TabItem active");
-    $(".TabSection").hide();
-    $("#Theses").show();
-   });
-   $("#CommentsTab").click(function(){
-    $(".TabItem").attr("class", "TabItem inactive");
-    $("#CommentsTab").attr("class", "TabItem active");
-    $(".TabSection").hide();
-    $("#Comments").show();
-   });
-   $("#AuthorRepliesTab").click(function(){
-    $(".TabItem").attr("class", "TabItem inactive");
-    $("#AuthorRepliesTab").attr("class", "TabItem active");
-    $(".TabSection").hide();
-    $("#AuthorReplies").show();
-   });
-  });
-</script>
-
-{% endblock headsup %}
-
 {% block content %}
 
 {% if 'Registered Contributors' not in user_groups %}
-<div class="row">
-    <div class="col-12">
-      <hr class="hr12">
-      <h3>Your credentials will soon be verified by an Editor.</h3>
-      <p>If accepted, you will become a registered Contributor, enabling you to submit, comment and vote.</p>
-    </div>
-</div>
-
-{% else %}
 
-<div class="row">
-    <div class="col-12">
-        <h1 class="highlight">Welcome to your SciPost Personal Page, {{ appellation }}</h1>
-    </div>
-</div>
-
-<div class="row">
-    <div class="col-12">
-        <ul class="personalTabMenu">
-            <li><a class="TabItem" id="AccountTab">Account</a></li>
-            {% if 'Editorial Administrators' in user_groups or 'Advisory Board' in user_groups or 'Editorial College' in user_groups or 'Vetting Editors' in user_groups or 'Ambassadors' in user_groups or 'Junior Ambassadors' in user_groups %}
-                <li><a class="TabItem" id="EdActionTab">Editorial Actions</a></li>
-            {% endif %}
-            <li><a class="TabItem" id="RefereeingTab">Refereeing</a></li>
-            <li><a class="TabItem" id="SubmissionsTab">Submissions</a></li>
-            <li><a class="TabItem" id="CommentariesTab">Commentaries</a></li>
-            <li><a class="TabItem" id="ThesesTab">Theses</a></li>
-            <li><a class="TabItem" id="CommentsTab">Comments</a></li>
-            <li><a class="TabItem" id="AuthorRepliesTab">Author Replies</a></li>
-        </ul>
-    </div>
-</div>
-
-<hr>
-
-<div class="TabSection" id="Account">
     <div class="row">
         <div class="col-12">
-            <div class="card card-grey">
-                <div class="card-block">
-                    <h2 class="card-title mb-0">Your Account</h2>
-                </div>
-            </div>
+          <hr class="hr12">
+          <h3>Your credentials will soon be verified by an Editor.</h3>
+          <p>If accepted, you will become a registered Contributor, enabling you to submit, comment and vote.</p>
         </div>
     </div>
+
+{% else %}
+
     <div class="row">
-        <div class="col-md-6">
-            <h3>Your personal details:</h3>
-            {{ contributor.private_info_as_table }}
-
-            <h3 class="mt-3">Your main discipline:</h3>
-            <ul><li>{{ contributor.discipline_as_string }}</li></ul>
-
-            <h3 class="mt-3">Your expertises:</h3>
-            {% if contributor.expertises %}
-                {{ contributor.expertises_as_ul }}
-            {% else %}
-                <p>You haven't listed your expertise(s).<br/>
-                Do so by <a href="{% url 'scipost:update_personal_data' %}">updating your personal data</a>
-                </p>
-            {% endif %}
-        </div>
-        <div class="col-md-6">
-            {% if 'SciPost Administrators' in user_groups %}
-                <h3>You are a SciPost Administrator.</h3>
-            {% endif %}
-            {% if 'Editorial Administrators' in user_groups %}
-                <h3>You are a SciPost Editorial Administrator.</h3>
-            {% endif %}
-            {% if 'Advisory Board' in user_groups %}
-                <h3>You are a member of the Advisory Board.</h3>
-            {% endif %}
-            {% if 'Editorial College' in user_groups %}
-                <h3>You are a member of the Editorial College.</h3>
-            {% endif %}
-            {% if 'Vetting Editors' in user_groups %}
-                <h3>You are a SciPost Vetting Editor.</h3>
-            {% endif %}
-            {% if 'Registered Contributors' in user_groups %}
-                <h3>You are a Registered Contributor.</h3>
-            {% endif %}
-            {% if 'Testers' in user_groups %}
-                <h3>You are a SciPost Tester.</h3>
-            {% endif %}
-            {% if 'Ambassadors' in user_groups %}
-                <h3>You are a SciPost Ambassador.</h3>
-            {% endif %}
-            {% if 'Junior Ambassadors' in user_groups %}
-                <h3>You are a SciPost Junior Ambassador.</h3>
-            {% endif %}
-
-            <h3 class="mt-3">Update your personal data or password</h3>
-
-            <ul>
-                <li><a href="{% url 'scipost:update_personal_data' %}">Update your personal data</a></li>
-                <li><a href="{% url 'scipost:change_password' %}">Change your password</a></li>
-            </ul>
+        <div class="col-12">
+            <h1 class="highlight">Welcome to your SciPost Personal Page, {{ appellation }}</h1>
         </div>
     </div>
 
-        <hr>
     <div class="row">
         <div class="col-12">
-            <div class="card card-grey">
-                <div class="card-block">
-                    <h2 class="card-title mb-0">Your Availability</h2>
-                </div>
-            </div>
+            <!-- Nav tabs -->
+            <ul class="nav btn-group personal-page-nav" role="tablist">
+              <li class="nav-item btn btn-secondary">
+                <a class="nav-link active" data-toggle="tab" href="#account" role="tab">Account</a>
+              </li>
+              {% if 'SciPost Administrators' in user_groups or 'Editorial Administrators' in user_groups or 'Editorial College' in user_groups or 'Advisory Board' in user_groups or 'Vetting Editors' in user_groups or 'Ambassadors' in user_groups or 'Junior Ambassadors' in user_groups %}
+                  <li class="nav-item btn btn-secondary">
+                    <a class="nav-link" data-toggle="tab" href="#editorial-actions" role="tab">Editorial Actions</a>
+                  </li>
+              {% endif %}
+              {% if perms.scipost.can_referee %}
+                  <li class="nav-item btn btn-secondary">
+                    <a class="nav-link" data-toggle="tab" href="#refereeing" role="tab">Refereeing</a>
+                  </li>
+              {% endif %}
+              <li class="nav-item btn btn-secondary">
+                <a class="nav-link" data-toggle="tab" href="#submissions" role="tab">Submissions</a>
+              </li>
+              <li class="nav-item btn btn-secondary">
+                <a class="nav-link" data-toggle="tab" href="#commentaries" role="tab">Commentaries</a>
+              </li>
+              <li class="nav-item btn btn-secondary">
+                <a class="nav-link" data-toggle="tab" href="#theses" role="tab">Theses</a>
+              </li>
+              <li class="nav-item btn btn-secondary">
+                <a class="nav-link" data-toggle="tab" href="#comments" role="tab">Comments</a>
+              </li>
+              <li class="nav-item btn btn-secondary">
+                <a class="nav-link" data-toggle="tab" href="#author-replies" role="tab">Author Replies</a>
+              </li>
+            </ul>
         </div>
     </div>
-    <div class="row">
-        <div class="col-md-4 offset-md-1">
-            <p>To help with the editorial workflow, you can inform us of any periods during which you are unavailable. We will do our best to respect these.</p>
-            <h3 class="mb-3">Mark a period as unavailable:</h3>
-            <form action="{% url 'scipost:mark_unavailable_period' %}" method="post">
-                {% csrf_token %}
-        	    {{ unavailability_form|bootstrap }}
-            	<input class="btn btn-secondary" type="submit" value="Submit" />
-            </form>
-        </div>
-        <div class="col-md-4 offset-md-1">
-            {% if unavailabilities %}
-                <h3>Your unavailability periods in our records (YYYY-DD-MM):</h3>
-                <table class="availabilities">
-                    <tr>
-                        <th>Start</th>
-                        <th>End</th>
-                    </tr>
-                {% for unav in unavailabilities %}
-                    <tr>
-                        <td>{{ unav.start }}</td>
-                        <td>{{ unav.end }}</td>
-                    </tr>
-                {% endfor %}
-                </table>
-            {% else %}
-                <p>You don't have any upcoming unavailability periods on record.</p>
-            {% endif %}
-        </div>
-  </div>
-
-</div>
-
 
-{% if 'SciPost Administrators' in user_groups or 'Editorial Administrators' in user_groups or 'Editorial College' in user_groups or 'Vetting Editors' in user_groups or 'Ambassadors' in user_groups or 'Junior Ambassadors' in user_groups %}
-    <div class="TabSection" id="EdActions">
-        <div class="row">
-            <div class="col-12">
-                <div class="card card-grey">
-                    <div class="card-block">
-                        <h2 class="card-title mb-0">Pending Editorial Actions</h2>
+    <hr>
+    <div class="tab-content">
+        <!-- Tab: Account -->
+        <div class="tab-pane active" id="account" role="tabpanel">
+            <div class="row">
+                <div class="col-12">
+                    <div class="card card-grey">
+                        <div class="card-block">
+                            <h2 class="card-title mb-0">Your Account</h2>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-
-        <div class="row">
-            {% if 'SciPost Administrators' in user_groups or 'Advisory Board' in user_groups or 'Ambassadors' in user_groups or 'Junior Ambassadors' in user_groups %}
-            <div class="col-md-4">
-                <h3>Registration actions</h3>
-                <ul>
-                    {% if perms.scipost.can_vet_registration_requests %}
-                        <li><a href="{% url 'scipost:vet_registration_requests' %}">Vet Registration requests</a> ({{ nr_reg_to_vet }})</li>
-                        <li>Awaiting validation ({{ nr_reg_awaiting_validation }}) (no action necessary)</li>
+            <div class="row">
+                <div class="col-md-6">
+                    <h3>Your personal details:</h3>
+                    {{ contributor.private_info_as_table }}
+
+                    <h3 class="mt-3">Your main discipline:</h3>
+                    <ul><li>{{ contributor.discipline_as_string }}</li></ul>
+
+                    <h3 class="mt-3">Your expertises:</h3>
+                    {% if contributor.expertises %}
+                        {{ contributor.expertises_as_ul }}
+                    {% else %}
+                        <p>You haven't listed your expertise(s).<br/>
+                        Do so by <a href="{% url 'scipost:update_personal_data' %}">updating your personal data</a>
+                        </p>
                     {% endif %}
-                    {% if perms.scipost.can_draft_registration_invitations %}
-                        <li><a href="{% url 'scipost:draft_registration_invitation' %}">Draft a Registration Invitation</a></li>
+                </div>
+                <div class="col-md-6">
+                    {% if 'SciPost Administrators' in user_groups %}
+                        <h3>You are a SciPost Administrator.</h3>
                     {% endif %}
-                    {% if perms.scipost.can_manage_registration_invitations %}
-                        <li><a href="{% url 'scipost:registration_invitations' %}">Manage Registration Invitations</a></li>
+                    {% if 'Editorial Administrators' in user_groups %}
+                        <h3>You are a SciPost Editorial Administrator.</h3>
                     {% endif %}
-                </ul>
-
-                {% if perms.scipost.can_manage_registration_invitations %}
-                <h3>Notifications</h3>
-                <ul>
-                    <li><a href="{% url 'scipost:citation_notifications' %}">Manage citation notifications</a></li>
-                </ul>
-                {% endif %}
-
-                <h3>Email communications</h3>
-                <ul>
-                    {% if perms.scipost.can_email_group_members %}
-                        <li><a href="{% url 'scipost:email_group_members' %}">Email Group Members</a></li>
+                    {% if 'Advisory Board' in user_groups %}
+                        <h3>You are a member of the Advisory Board.</h3>
                     {% endif %}
-                    {% if perms.scipost.can_email_particulars %}
-                        <li><a href="{% url 'scipost:send_precooked_email' %}">Send a precooked email</a></li>
-                        <li><a href="{% url 'scipost:email_particular' %}">Email a particular individual/address</a></li>
+                    {% if 'Editorial College' in user_groups %}
+                        <h3>You are a member of the Editorial College.</h3>
                     {% endif %}
-                </ul>
-            </div>
-            {% endif %}
-
-            <div class="col-md-4">
-                <h3>Vetting actions</h3>
-                <ul>
-                    {% if perms.scipost.can_vet_commentary_requests %}
-                        <li><a href="{% url 'commentaries:vet_commentary_requests' %}">Vet Commentary Page requests</a> ({{ nr_commentary_page_requests_to_vet }})</li>
+                    {% if 'Vetting Editors' in user_groups %}
+                        <h3>You are a SciPost Vetting Editor.</h3>
                     {% endif %}
-                    {% if perms.scipost.can_vet_comments %}
-                        <li><a href="{% url 'comments:vet_submitted_comments' %}">Vet submitted Comments</a> ({{ nr_comments_to_vet }})</li>
+                    {% if 'Registered Contributors' in user_groups %}
+                        <h3>You are a Registered Contributor.</h3>
                     {% endif %}
-                    {% if perms.scipost.can_vet_thesislink_requests %}
-                        <li><a href="{% url 'theses:unvetted_thesislinks' %}">Vet Thesis Link Requests</a> ({{ nr_thesislink_requests_to_vet }})</li>
+                    {% if 'Testers' in user_groups %}
+                        <h3>You are a SciPost Tester.</h3>
                     {% endif %}
-                    {% if perms.scipost.can_vet_authorship_claims %}
-                        <li><a href="{% url 'scipost:vet_authorship_claims' %}">Vet Authorship Claims</a> ({{ nr_authorship_claims_to_vet }})</li>
+                    {% if 'Ambassadors' in user_groups %}
+                        <h3>You are a SciPost Ambassador.</h3>
                     {% endif %}
-                    {% if perms.scipost.can_vet_submitted_reports %}
-                        <li><a href="{% url 'submissions:vet_submitted_reports' %}">Vet submitted Reports</a> ({{ nr_reports_to_vet }})</li>
+                    {% if 'Junior Ambassadors' in user_groups %}
+                        <h3>You are a SciPost Junior Ambassador.</h3>
                     {% endif %}
-                </ul>
 
-                {% if perms.scipost.can_attend_VGMs %}
-                <h3>Virtual General Meetings</h3>
-                <ul>
-                    <li><a href="{% url 'virtualmeetings:VGMs' %}">List of VGMs</a></li>
-                </ul>
-                {% endif %}
-            </div>
-
-            {% if 'Editorial Administrators' in user_groups or 'Editorial College' in user_groups %}
-            <div class="col-md-4">
-                <h3>Info</h3>
-                <ul>
-                    <li><a href="{% url 'submissions:editorial_workflow' %}">How-to guide: summary of the editorial workflow</a></li>
-                </ul>
-
-                <h3>Submissions assignments</h3>
-                <ul>
-                {% if perms.scipost.can_view_pool %}
-                    <li><a href="{% url 'submissions:assignments' %}">Your assignments</a></li>
-                    <li><a href="{% url 'scipost:Fellow_activity_overview' %}">View assignments overview</a></li>
-                {% endif %}
-                {% if perms.scipost.can_assign_submissions %}
-                    <li>Assign Submissions via the <a href="{% url 'submissions:pool' %}">Submissions Pool</a> ({{ nr_submissions_to_assign }})</li>
-                {% endif %}
-                {% if perms.scipost.can_take_charge_of_submissions %}
-                    <li>Accept or decline assignments via the <a href="{% url 'submissions:pool' %}">Submissions Pool</a> ({{ nr_assignments_to_consider }})</li>
-                {% endif %}
-                </ul>
+                    <h3 class="mt-3">Update your personal data or password</h3>
 
-                <h3>Voting</h3>
-                <ul>
-                    <li>Prepare Editorial Recommendations for voting via the <a href="{% url 'submissions:pool' %}">Submissions Pool</a> ({{ nr_recommendations_to_prepare_for_voting }})</li>
-                </ul>
+                    <ul>
+                        <li><a href="{% url 'scipost:update_personal_data' %}">Update your personal data</a></li>
+                        <li><a href="{% url 'scipost:change_password' %}">Change your password</a></li>
+                    </ul>
+                </div>
             </div>
-            {% endif %}
-        </div>
 
-        {% if active_assignments %}
-        <div class="row">
-            <div class="col-12">
-                <h3 class="highlight">Submissions for which you are Editor-in-charge</h3>
-            </div>
-            <div class="col-12">
-                <ul class="list-group list-group-flush">
-                    {% for assignment in active_assignments %}
-                        <li class="list-group-item">
-                            {% include 'submissions/_submission_card_eic_content.html' with submission=assignment.submission %}
-                        </li>
-                    {% endfor %}
-                </ul>
-            </div>
-        </div>
-        {% endif %}
-    </div>
-    {% endif %}
-
-
-    {% if perms.scipost.can_referee %}
-    <div class="TabSection" id="Refereeing">
-        <div class="row">
-            <div class="col-12">
-                <div class="card card-grey">
-                    <div class="card-block">
-                        <h2 class="card-title">Refereeing Tasks</h2>
-                        <ul class="mb-0">
-                            <li><a href="{% url 'submissions:accept_or_decline_ref_invitations' %}">Accept/decline refereeing invitations</a> ({{ nr_ref_inv_to_consider }})</li>
-                        </ul>
+            <hr>
+            <div class="row">
+                <div class="col-12">
+                    <div class="card card-grey">
+                        <div class="card-block">
+                            <h2 class="card-title mb-0">Your Availability</h2>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-        {% if pending_ref_tasks %}
-        <div class="row">
-            <div class="col-12">
-                <h3>Pending Refereeing Tasks:</h3>
-            </div>
-            <div class="col-12">
-                <ul class="list-group list-group-flush">
-                {% for task in pending_ref_tasks %}
-                    <li class="list-group-item">
-                        {% include 'submissions/_refereeing_invitation_card_content.html' with invitation=task %}
-                    </li>
-                {% endfor %}
-                </ul>
+            <div class="row">
+                <div class="col-md-4 offset-md-1">
+                    <p>To help with the editorial workflow, you can inform us of any periods during which you are unavailable. We will do our best to respect these.</p>
+                    <h3 class="mb-3">Mark a period as unavailable:</h3>
+                    <form action="{% url 'scipost:mark_unavailable_period' %}" method="post">
+                        {% csrf_token %}
+                	    {{ unavailability_form|bootstrap }}
+                    	<input class="btn btn-secondary" type="submit" value="Submit" />
+                    </form>
+                </div>
+                <div class="col-md-4 offset-md-1">
+                    {% if unavailabilities %}
+                        <h3>Your unavailability periods in our records (YYYY-DD-MM):</h3>
+                        <table class="availabilities">
+                            <tr>
+                                <th>Start</th>
+                                <th>End</th>
+                            </tr>
+                        {% for unav in unavailabilities %}
+                            <tr>
+                                <td>{{ unav.start }}</td>
+                                <td>{{ unav.end }}</td>
+                            </tr>
+                        {% endfor %}
+                        </table>
+                    {% else %}
+                        <p>You don't have any upcoming unavailability periods on record.</p>
+                    {% endif %}
+                </div>
             </div>
-        </div>
-        {% endif %}
-    </div>
-    {% endif %}
-
-    <div class="TabSection" id="Submissions">
-        <div class="row">
-            <div class="col-12">
-                <div class="card card-grey">
-                    <div class="card-block">
-                        <h2 class="card-title">Submissions</h2>
-                        <ul class="mb-0">
-                            {% if nr_submission_authorships_to_claim > 0 %}
-                                <li><a href="{% url 'scipost:claim_authorships' %}">Potential authorships to claim (auto-detected: {{ nr_submission_authorships_to_claim}})</a></li>
+        </div><!-- End tab -->
+
+        {% if 'SciPost Administrators' in user_groups or 'Editorial Administrators' in user_groups or 'Editorial College' in user_groups or 'Advisory Board' in user_groups or 'Vetting Editors' in user_groups or 'Ambassadors' in user_groups or 'Junior Ambassadors' in user_groups %}
+            <!-- Tab: Editorial Actions -->
+            <div class="tab-pane" id="editorial-actions" role="tabpanel">
+                <div class="row">
+                    <div class="col-12">
+                        <div class="card card-grey">
+                            <div class="card-block">
+                                <h2 class="card-title mb-0">Pending Editorial Actions</h2>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="row">
+                    {% if 'SciPost Administrators' in user_groups or 'Advisory Board' in user_groups or 'Ambassadors' in user_groups or 'Junior Ambassadors' in user_groups %}
+                    <div class="col-md-4">
+                        <h3>Registration actions</h3>
+                        <ul>
+                            {% if perms.scipost.can_vet_registration_requests %}
+                                <li><a href="{% url 'scipost:vet_registration_requests' %}">Vet Registration requests</a> ({{ nr_reg_to_vet }})</li>
+                                <li>Awaiting validation ({{ nr_reg_awaiting_validation }}) (no action necessary)</li>
+                            {% endif %}
+                            {% if perms.scipost.can_draft_registration_invitations %}
+                                <li><a href="{% url 'scipost:draft_registration_invitation' %}">Draft a Registration Invitation</a></li>
+                            {% endif %}
+                            {% if perms.scipost.can_manage_registration_invitations %}
+                                <li><a href="{% url 'scipost:registration_invitations' %}">Manage Registration Invitations</a></li>
                             {% endif %}
-                            <li><a href="{% url 'submissions:submit_manuscript' %}">Submit an arXiv preprint to a SciPost Journal</a></li>
+                        </ul>
+
+                        {% if perms.scipost.can_manage_registration_invitations %}
+                        <h3>Notifications</h3>
+                        <ul>
+                            <li><a href="{% url 'scipost:citation_notifications' %}">Manage citation notifications</a></li>
+                        </ul>
+                        {% endif %}
+
+                        <h3>Email communications</h3>
+                        <ul>
+                            {% if perms.scipost.can_email_group_members %}
+                                <li><a href="{% url 'scipost:email_group_members' %}">Email Group Members</a></li>
+                            {% endif %}
+                            {% if perms.scipost.can_email_particulars %}
+                                <li><a href="{% url 'scipost:send_precooked_email' %}">Send a precooked email</a></li>
+                                <li><a href="{% url 'scipost:email_particular' %}">Email a particular individual/address</a></li>
+                            {% endif %}
+                        </ul>
+                    </div>
+                    {% endif %}
+
+                    <div class="col-md-4">
+                        <h3>Vetting actions</h3>
+                        <ul>
+                            {% if perms.scipost.can_vet_commentary_requests %}
+                                <li><a href="{% url 'commentaries:vet_commentary_requests' %}">Vet Commentary Page requests</a> ({{ nr_commentary_page_requests_to_vet }})</li>
+                            {% endif %}
+                            {% if perms.scipost.can_vet_comments %}
+                                <li><a href="{% url 'comments:vet_submitted_comments' %}">Vet submitted Comments</a> ({{ nr_comments_to_vet }})</li>
+                            {% endif %}
+                            {% if perms.scipost.can_vet_thesislink_requests %}
+                                <li><a href="{% url 'theses:unvetted_thesislinks' %}">Vet Thesis Link Requests</a> ({{ nr_thesislink_requests_to_vet }})</li>
+                            {% endif %}
+                            {% if perms.scipost.can_vet_authorship_claims %}
+                                <li><a href="{% url 'scipost:vet_authorship_claims' %}">Vet Authorship Claims</a> ({{ nr_authorship_claims_to_vet }})</li>
+                            {% endif %}
+                            {% if perms.scipost.can_vet_submitted_reports %}
+                                <li><a href="{% url 'submissions:vet_submitted_reports' %}">Vet submitted Reports</a> ({{ nr_reports_to_vet }})</li>
+                            {% endif %}
+                        </ul>
+
+                        {% if perms.scipost.can_attend_VGMs %}
+                        <h3>Virtual General Meetings</h3>
+                        <ul>
+                            <li><a href="{% url 'virtualmeetings:VGMs' %}">List of VGMs</a></li>
+                        </ul>
+                        {% endif %}
+                    </div>
+
+                    {% if 'Editorial Administrators' in user_groups or 'Editorial College' in user_groups %}
+                    <div class="col-md-4">
+                        <h3>Info</h3>
+                        <ul>
+                            <li><a href="{% url 'submissions:editorial_workflow' %}">How-to guide: summary of the editorial workflow</a></li>
+                        </ul>
+
+                        <h3>Submissions assignments</h3>
+                        <ul>
+                        {% if perms.scipost.can_view_pool %}
+                            <li><a href="{% url 'submissions:assignments' %}">Your assignments</a></li>
+                            <li><a href="{% url 'scipost:Fellow_activity_overview' %}">View assignments overview</a></li>
+                        {% endif %}
+                        {% if perms.scipost.can_assign_submissions %}
+                            <li>Assign Submissions via the <a href="{% url 'submissions:pool' %}">Submissions Pool</a> ({{ nr_submissions_to_assign }})</li>
+                        {% endif %}
+                        {% if perms.scipost.can_take_charge_of_submissions %}
+                            <li>Accept or decline assignments via the <a href="{% url 'submissions:pool' %}">Submissions Pool</a> ({{ nr_assignments_to_consider }})</li>
+                        {% endif %}
+                        </ul>
+
+                        <h3>Voting</h3>
+                        <ul>
+                            <li>Prepare Editorial Recommendations for voting via the <a href="{% url 'submissions:pool' %}">Submissions Pool</a> ({{ nr_recommendations_to_prepare_for_voting }})</li>
                         </ul>
                     </div>
+                    {% endif %}
                 </div>
-            </div>
-        </div>
-        {% if own_submissions %}
-        <div class="row" id="mysubmissionslist">
-            <div class="col-12">
-                <h3>Submissions for which you are identified as an author:</h3>
-            </div>
-            <div class="col-12">
-                <ul class="list-group list-group-flush">
-                    {% for sub in own_submissions %}
-                        <li class="list-group-item">
-                            {% include 'submissions/_submission_card_author_content.html' with submission=sub current_user=request.user %}
-                        </li>
-                    {% endfor %}
-                </ul>
-            </div>
-        </div>
+
+                {% if active_assignments %}
+                <div class="row">
+                    <div class="col-12">
+                        <h3 class="highlight">Submissions for which you are Editor-in-charge</h3>
+                    </div>
+                    <div class="col-12">
+                        <ul class="list-group list-group-flush">
+                            {% for assignment in active_assignments %}
+                                <li class="list-group-item">
+                                    {% include 'submissions/_submission_card_eic_content.html' with submission=assignment.submission %}
+                                </li>
+                            {% endfor %}
+                        </ul>
+                    </div>
+                </div>
+                {% endif %}
+            </div><!-- End tab -->
         {% endif %}
-    </div>
 
+        {% if perms.scipost.can_referee %}
+            <!-- Tab: Refereeing -->
+            <div class="tab-pane" id="refereeing" role="tabpanel">
+                <div class="row">
+                    <div class="col-12">
+                        <div class="card card-grey">
+                            <div class="card-block">
+                                <h2 class="card-title">Refereeing Tasks</h2>
+                                <ul class="mb-0">
+                                    <li><a href="{% url 'submissions:accept_or_decline_ref_invitations' %}">Accept/decline refereeing invitations</a> ({{ nr_ref_inv_to_consider }})</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
 
-    <div class="TabSection" id="Commentaries">
-        <div class="row">
-            <div class="col-12">
-                <div class="card card-grey">
-                    <div class="card-block">
-                        <h2 class="card-title">Commentaries</h2>
-                        <ul class="mb-0">
-                            {% if nr_commentary_authorships_to_claim > 0 %}
-                                <li><a href="{% url 'scipost:claim_authorships' %}">Potential authorships to claim (auto-detected: {{ nr_commentary_authorships_to_claim}})</a></li>
-                            {% endif %}
-                            <li><a href="{% url 'commentaries:request_commentary' %}">Request opening a SciPost Commentary Page</a></li>
+                <div class="row">
+                    <div class="col-12">
+                        <h3>Pending Refereeing Tasks:</h3>
+                    </div>
+                    <div class="col-12">
+                        <ul class="list-group list-group-flush">
+                        {% for task in pending_ref_tasks %}
+                            <li class="list-group-item">
+                                {% include 'submissions/_refereeing_invitation_card_content.html' with invitation=task %}
+                            </li>
+                        {% empty %}
+                            <li class="list-group-item"><em>You do not have pending Refereering Tasks</em></li>
+                        {% endfor %}
                         </ul>
                     </div>
                 </div>
+            </div><!-- End tab -->
+        {% endif %}
+
+        <!-- Tab: Submissions -->
+        <div class="tab-pane" id="submissions" role="tabpanel">
+            <div class="row">
+                <div class="col-12">
+                    <div class="card card-grey">
+                        <div class="card-block">
+                            <h2 class="card-title">Submissions</h2>
+                            <ul class="mb-0">
+                                {% if nr_submission_authorships_to_claim > 0 %}
+                                    <li><a href="{% url 'scipost:claim_authorships' %}">Potential authorships to claim (auto-detected: {{ nr_submission_authorships_to_claim}})</a></li>
+                                {% endif %}
+                                <li><a href="{% url 'submissions:submit_manuscript' %}">Submit an arXiv preprint to a SciPost Journal</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
             </div>
-        </div>
-        {% if own_commentaries %}
-        <div class="row" id="mycommentarieslist">
-            <div class="col-12">
-                <h3>Commentaries for which you are identified as an author:</h3>
+
+            {# {% if own_submissions %}#}
+            <div class="row" id="mysubmissionslist">
+                <div class="col-12">
+                    <h3>Submissions for which you are identified as an author:</h3>
+                </div>
+                <div class="col-12">
+                    <ul class="list-group list-group-flush">
+                        {% for sub in own_submissions %}
+                            <li class="list-group-item">
+                                {% include 'submissions/_submission_card_author_content.html' with submission=sub current_user=request.user %}
+                            </li>
+                        {% empty %}
+                            <li class="list-group-item">
+                                <em>No Submissions found</em>
+                            </li>
+                        {% endfor %}
+                    </ul>
+                </div>
             </div>
-            <div class="col-12">
-                <ul class="list-group list-group-flush">
-                    {% for com in own_commentaries %}
-                        <li class="list-group-item">
-                            {% include 'commentaries/_commentary_card_content.html' with commentary=com %}
-                        </li>
-                    {% endfor %}
-                </ul>
+            {# {% endif %}#}
+        </div><!-- End tab -->
+
+        <!-- Tab: Commentaries -->
+        <div class="tab-pane" id="commentaries" role="tabpanel">
+            <div class="row">
+                <div class="col-12">
+                    <div class="card card-grey">
+                        <div class="card-block">
+                            <h2 class="card-title">Commentaries</h2>
+                            <ul class="mb-0">
+                                {% if nr_commentary_authorships_to_claim > 0 %}
+                                    <li><a href="{% url 'scipost:claim_authorships' %}">Potential authorships to claim (auto-detected: {{ nr_commentary_authorships_to_claim}})</a></li>
+                                {% endif %}
+                                <li><a href="{% url 'commentaries:request_commentary' %}">Request opening a SciPost Commentary Page</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
             </div>
-        </div>
-        {% endif %}
-    </div>
 
+            <div class="row" id="mycommentarieslist">
+                <div class="col-12">
+                    <h3>Commentaries for which you are identified as an author:</h3>
+                </div>
+                <div class="col-12">
+                    <ul class="list-group list-group-flush">
+                        {% for com in own_commentaries %}
+                            <li class="list-group-item">
+                                {% include 'commentaries/_commentary_card_content.html' with commentary=com %}
+                            </li>
+                        {% empty %}
+                            <li class="list-group-item"><em>No Commentaries found</em></li>
+                        {% endfor %}
+                    </ul>
+                </div>
+            </div>
+        </div><!-- End tab -->
 
-    <div class="TabSection" id="Theses">
-        <div class="row">
-            <div class="col-12">
-                <div class="card card-grey">
-                    <div class="card-block">
-                        <h2 class="card-title">Theses</h2>
-                        <ul class="mb-0">
-                            {% if nr_thesis_authorships_to_claim > 0 %}
-                                <li><a href="{% url 'scipost:claim_authorships' %}">Potential authorships to claim (auto-detected: {{ nr_thesis_authorships_to_claim}})</a></li>
-                            {% endif %}
-                            <li><a href="{% url 'theses:request_thesislink' %}">Request a SciPost ThesisLink</a></li>
-                        </ul>
+        <!-- Tab: Theses -->
+        <div class="tab-pane" id="theses" role="tabpanel">
+            <div class="row">
+                <div class="col-12">
+                    <div class="card card-grey">
+                        <div class="card-block">
+                            <h2 class="card-title">Theses</h2>
+                            <ul class="mb-0">
+                                {% if nr_thesis_authorships_to_claim > 0 %}
+                                    <li><a href="{% url 'scipost:claim_authorships' %}">Potential authorships to claim (auto-detected: {{ nr_thesis_authorships_to_claim}})</a></li>
+                                {% endif %}
+                                <li><a href="{% url 'theses:request_thesislink' %}">Request a SciPost ThesisLink</a></li>
+                            </ul>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-        {% if own_thesislinks %}
+
             <div class="row" id="mytheseslist">
                 <div class="col-12">
                     <h3>Theses for which you are identified as an author:</h3>
@@ -470,63 +435,68 @@
                             <li class="list-group-item">
                                 {% include 'theses/_thesislink_card_content.html' with thesislink=thesis %}
                             </li>
+                        {% empty %}
+                            <li class="list-group-item"><em>No Theses found</em></li>
                         {% endfor %}
                     </ul>
                 </div>
             </div>
-        {% endif %}
-    </div>
 
-    <div class="TabSection" id="Comments">
-        <div class="row">
-            <div class="col-12">
-                <div class="card card-grey">
-                    <div class="card-block">
-                        <h2 class="card-title mb-0">Your Comments</h2>
+        </div><!-- End tab -->
+
+        <!-- Tab: Comments -->
+        <div class="tab-pane" id="comments" role="tabpanel">
+            <div class="row">
+                <div class="col-12">
+                    <div class="card card-grey">
+                        <div class="card-block">
+                            <h2 class="card-title mb-0">Your Comments</h2>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
 
-        <div class="row" id="mycommentslist">
-            <div class="col-12">
-                <ul class="list-group list-group-flush">
-                    {% for own_comment in own_comments %}
-                        <li class="list-group-item">
-                            {% include 'comments/_comment_card_extended_content.html' with comment=own_comment %}
-                        </li>
-                    {% empty %}
-                        <li class="list-group-item">You have not commented yet.</li>
-                    {% endfor %}
-                </ul>
+            <div class="row" id="mycommentslist">
+                <div class="col-12">
+                    <ul class="list-group list-group-flush">
+                        {% for own_comment in own_commentsx %}
+                            <li class="list-group-item">
+                                {% include 'comments/_comment_card_extended_content.html' with comment=own_comment %}
+                            </li>
+                        {% empty %}
+                            <li class="list-group-item"><em>You have not commented yet.</em></li>
+                        {% endfor %}
+                    </ul>
+                </div>
             </div>
-        </div>
-    </div>
+        </div><!-- End tab -->
 
-    <div class="TabSection" id="AuthorReplies">
-        <div class="row">
-            <div class="col-12">
-                <div class="card card-grey">
-                    <div class="card-block">
-                        <h2 class="card-title mb-0">Your Author Replies</h2>
+        <!-- Tab: Author Replies -->
+        <div class="tab-pane" id="author-replies" role="tabpanel">
+            <div class="row">
+                <div class="col-12">
+                    <div class="card card-grey">
+                        <div class="card-block">
+                            <h2 class="card-title mb-0">Your Author Replies</h2>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
 
-        <div class="row" id="myauthorreplieslist">
-            <div class="col-12">
-                <ul class="list-group list-group-flush">
-                  {% for own_reply in own_authorreplies %}
-                      <li class="list-group-item">
-                          {% include 'comments/_comment_card_extended_content.html' with comment=own_reply %}
-                      </li>
-                  {% empty %}
-                      <li class="list-group-item">You have not Author Replies yet.</li>
-                  {% endfor %}
-                </ul>
+            <div class="row" id="myauthorreplieslist">
+                <div class="col-12">
+                    <ul class="list-group list-group-flush">
+                      {% for own_reply in own_authorreplies %}
+                          <li class="list-group-item">
+                              {% include 'comments/_comment_card_extended_content.html' with comment=own_reply %}
+                          </li>
+                      {% empty %}
+                          <li class="list-group-item"><em>You do not have Author Replies yet.</em></li>
+                      {% endfor %}
+                    </ul>
+                </div>
             </div>
-        </div>
+        </div><!-- End tab -->
     </div>
 
 {% endif %}
diff --git a/submissions/templates/submissions/_editorial_communication_content.html b/submissions/templates/submissions/_editorial_communication_content.html
index 9086065ca..b83bcbcce 100644
--- a/submissions/templates/submissions/_editorial_communication_content.html
+++ b/submissions/templates/submissions/_editorial_communication_content.html
@@ -1,5 +1,5 @@
-<div class="card-block pt-3{% if communication.comtype == 'EtoA' or communication.comtype == 'EtoR' or communication.comtype == 'EtoS' %} text-right{% endif %}">
-    <div class="label label-sm label-secondary">
+<div class="card-block">
+    <div class="font-weight-bold d-inline-block">
         {% if communication.comtype == 'EtoA' %}
             From you to Authors
         {% elif communication.comtype == 'EtoR' %}
@@ -20,6 +20,7 @@
             From SciPost Ed Admin to you
         {% endif %}
     </div>
-    <div class="text pb-1 pt-1">{{communication.text|linebreaks}}</div>
-    <div class="text-muted">on {{communication.timestamp}}</div>
+    <small class="d-inline-block text-muted text-sm">on {{communication.timestamp}}</small>
+
+    <div class="text mt-1 pl-md-3">{{communication.text|linebreaks}}</div>
 </div>
diff --git a/submissions/templates/submissions/_recommendation_author_content.html b/submissions/templates/submissions/_recommendation_author_content.html
index 7f4646b6e..819107071 100644
--- a/submissions/templates/submissions/_recommendation_author_content.html
+++ b/submissions/templates/submissions/_recommendation_author_content.html
@@ -1,6 +1,8 @@
 <div class="card-block">
+    <h2 class="pb-0 mb-0">Editorial Recommendation</h2>
+
     {% block recommendation_header %}
-        <h3 class="card-title">Date {{recommendation.date_submitted}}</h3>
+        <h3 class="card-title text-muted">Date {{recommendation.date_submitted}}</h3>
     {% endblock %}
 
     <h3 class="pb-0">Remarks for authors</h3>
diff --git a/submissions/templates/submissions/_recommendation_fellow_content.html b/submissions/templates/submissions/_recommendation_fellow_content.html
index 1cb07e3a9..79e165088 100644
--- a/submissions/templates/submissions/_recommendation_fellow_content.html
+++ b/submissions/templates/submissions/_recommendation_fellow_content.html
@@ -1,7 +1,7 @@
 {% extends 'submissions/_recommendation_author_content.html' %}
 
 {% block recommendation_header %}
-    <h3 class="card-title text-blue">By {{recommendation.submission.editor_in_charge.get_title_display}} {{recommendation.submission.editor_in_charge.user.first_name}} {{recommendation.submission.editor_in_charge.user.last_name}}, formulated on {{recommendation.date_submitted}}</h3>
+    <h3 class="card-title text-muted mb-3">By {{recommendation.submission.editor_in_charge.get_title_display}} {{recommendation.submission.editor_in_charge.user.first_name}} {{recommendation.submission.editor_in_charge.user.last_name}}, formulated on {{recommendation.date_submitted}}</h3>
 {% endblock %}
 
 {% block recommendation_before_recommendation %}
diff --git a/submissions/templates/submissions/editorial_page.html b/submissions/templates/submissions/editorial_page.html
index e05ae5187..47cbf1ee3 100644
--- a/submissions/templates/submissions/editorial_page.html
+++ b/submissions/templates/submissions/editorial_page.html
@@ -21,66 +21,57 @@
                 <h3>(go to the <a href="{% url 'submissions:submission' arxiv_identifier_w_vn_nr=submission.arxiv_identifier_w_vn_nr %}">Submissions Page</a> to view Reports and Comments)</h3>
             </div>
         </div>
-    </div>
-</div>
-
-
-{% if other_versions %}
-    <div class="row">
-        <div class="col-12">
+        {% if other_versions %}
             <h3>Other versions of this Submission exist:</h3>
             <div class="pl-4">
                 {% for vn in other_versions %}
                     {% include 'submissions/_submission_version.html' with submission=vn %}
                 {% endfor %}
             </div>
-        </div>
+        {% endif %}
     </div>
-{% endif %}
+</div>
 
 
 <div class="row">
     <div class="col-12">
-        <h2>Submission:</h2>
+        <h2>Submission</h2>
         {% include 'submissions/_submission_summary_short.html' with submission=submission %}
-    </div>
-</div>
 
-<div class="row">
-    <div class="col-12">
-      {% if submission.author_comments %}
-          <h3>Author comments upon resubmission</h3>
-          <p>{{ submission.author_comments|linebreaks }}</p>
-      {% endif %}
-
-      {% if submission.list_of_changes %}
-          <h3>List of changes</h3>
-          <p>{{ submission.list_of_changes|linebreaks }}</p>
-      {% endif %}
-
-      {% if submission.remarks_for_editors %}
-          <h3>Comments for the Editor-in-charge</h3>
-          <p>{{ submission.remarks_for_editors|linebreaks }}</p>
-      {% endif %}
-
-      {% if submission.referees_suggested %}
+        <br>
+        {% if submission.author_comments %}
+          <h3>Author comments upon resubmission:</h3>
+          <div class="pl-md-4">{{ submission.author_comments|linebreaks }}</div>
+        {% endif %}
+
+        {% if submission.list_of_changes %}
+          <h3>List of changes:</h3>
+          <div class="pl-md-4">{{ submission.list_of_changes|linebreaks }}</div>
+        {% endif %}
+
+        {% if submission.remarks_for_editors %}
+          <h3>Comments for the Editor-in-charge:</h3>
+          <div class="pl-md-4">{{ submission.remarks_for_editors|linebreaks }}</div>
+        {% endif %}
+
+        {% if submission.referees_suggested %}
           <h3>Referees suggested by authors upon submission:</h3>
-          <p>{{ submission.referees_suggested }}</p>
-      {% endif %}
+          <div class="pl-md-4">{{ submission.referees_suggested }}</div>
+        {% endif %}
 
-      {% if submission.referees_flagged %}
+        {% if submission.referees_flagged %}
           <h3>Referees flagged upon submission (treat reports with caution):</h3>
-          <p>{{ submission.referees_flagged }}</p>
-      {% endif %}
-
+          <div class="pl-md-4">{{ submission.referees_flagged }}</div>
+        {% endif %}
     </div>
 </div>
 
 {% if recommendation %}
     <div class="row">
         <div class="col-12">
-            <h2 class="highlight">Editorial Recommendation</h2>
-            {% include 'submissions/_recommendation_author_content.html' with recommendation=recommendation %}
+            <div class="card card-outline-secondary">
+                {% include 'submissions/_recommendation_author_content.html' with recommendation=recommendation %}
+            </div>
         </div>
     </div>
 {% endif %}
@@ -181,9 +172,7 @@
                 {% if not submission.reporting_deadline_has_passed %}
                     <li><a href="{% url 'submissions:close_refereeing_round' arxiv_identifier_w_vn_nr=submission.arxiv_identifier_w_vn_nr %}">Close the refereeing round</a> &nbsp;(deactivates submission of new Reports and Comments)</li>
                 {% endif %}
-                <li><a href="{% url 'submissions:communication' arxiv_identifier_w_vn_nr=submission.arxiv_identifier_w_vn_nr comtype='EtoA' %}">Draft and send a communication with the submitting Author</a></li>
-                <li>Communicate with a Referee: see the table above.</li>
-                <li><a href="{% url 'submissions:communication' arxiv_identifier_w_vn_nr=submission.arxiv_identifier_w_vn_nr comtype='EtoS' %}">Draft and send a communication with SciPost Editorial Administration</a></li>
+                <li>Communicate with a Referee: see the communication block below.</li>
                 <li>
                     <a href="{% url 'submissions:eic_recommendation' arxiv_identifier_w_vn_nr=submission.arxiv_identifier_w_vn_nr %}">Formulate an Editorial Recommendation</a>
                     <p>If you recommend revisions, this will be communicated directly to the Authors, who will be asked to resubmit.
@@ -196,11 +185,15 @@
 <div class="row">
     <div class="col-12">
         <h1 class="highlight">Communications</h1>
+        <ul>
+            <li><a href="{% url 'submissions:communication' arxiv_identifier_w_vn_nr=submission.arxiv_identifier_w_vn_nr comtype='EtoA' %}">Draft and send a communication with the submitting Author</a></li>
+            <li><a href="{% url 'submissions:communication' arxiv_identifier_w_vn_nr=submission.arxiv_identifier_w_vn_nr comtype='EtoS' %}">Draft and send a communication with SciPost Editorial Administration</a></li>
+        </ul>
     </div>
 </div>
 
 <div class="row">
-    <div class="col-lg-6 offset-lg-3 col-md-8 offset-md-2">
+    <div class="col-12">
         <ul class="list-group list-group-flush">
             {% for comm in communications %}
                 <li class="list-group-item">
diff --git a/submissions/templates/submissions/eic_recommendation.html b/submissions/templates/submissions/eic_recommendation.html
index c692faa02..9017da496 100644
--- a/submissions/templates/submissions/eic_recommendation.html
+++ b/submissions/templates/submissions/eic_recommendation.html
@@ -2,81 +2,62 @@
 
 {% block pagetitle %}: editorial recommendation for submission{% endblock pagetitle %}
 
-{% block headsup %}
-
 {% load scipost_extras %}
-
-{% endblock headsup %}
-
-{% block bodysup %}
-
-
-<script>
-
-  $('#id_remarks_for_authors').hide()
-  $('#id_requested_changes').hide()
-  $('#id_remarks_for_editorial_college').hide()
-
-  $(document).ready(function() {
-    $('select#id_recommendation').on('change', function() {
-    var selection = $(this).val();
-    switch(selection){
-     case 1 or 2 or 3 or -3:
-      $('#id_remarks_for_editorial_college').show()
-      $('#id_remarks_for_authors').hide()
-      $('#id_requested_changes').hide()
-      break;
-     case -1 or -2:
-      $('#id_remarks_for_editorial_college').hide()
-      $('#id_remarks_for_authors').show()
-      $('#id_requested_changes').show()
-      break;
-    }
-    });
-  });
-</script>
-
-<section>
-  <div class="flex-greybox">
-    <h1>Formulate Editorial Recommendation for Submission</h1>
-    <h3>(go to the <a href="{% url 'submissions:submission' arxiv_identifier_w_vn_nr=submission.arxiv_identifier_w_vn_nr %}">
-	Submissions Page</a> to view Reports and Comments)</h3>
-    <h3>(go back to the <a href="{% url 'submissions:editorial_page' arxiv_identifier_w_vn_nr=submission.arxiv_identifier_w_vn_nr %}">
-	Editorial Page</a> to take editorial actions)</h3>
-  </div>
-
-  <hr class="hr12">
-  <div class="row">
-    <div class="col-4">
-      <h2>Submission:</h2>
+{% load bootstrap %}
+
+{% block content %}
+
+<div class="row">
+    <div class="col-12">
+        <div class="card card-grey">
+            <div class="card-block">
+                <h1 class="card-title">Formulate Editorial Recommendation for Submission</h1>
+                <h3>
+                    (go to the <a href="{% url 'submissions:submission' arxiv_identifier_w_vn_nr=submission.arxiv_identifier_w_vn_nr %}">
+                	Submissions Page</a> to view Reports and Comments)
+                </h3>
+                <h3>
+                    (go back to the <a href="{% url 'submissions:editorial_page' arxiv_identifier_w_vn_nr=submission.arxiv_identifier_w_vn_nr %}">
+                	Editorial Page</a> to take editorial actions)
+                </h3>
+            </div>
+        </div>
     </div>
-  </div>
-  {% include 'submissions/_submission_summary.html' with submission=submission %}
-  <h3>Abstract:</h3>
-  <p>{{ submission.abstract }}</p>
-
-</section>
-
-
-<section>
-  <div class="flex-greybox">
-    <h1>Your Editorial Recommendation</h1>
-    <p>You recommendation will be processed by the Editorial Administration.</p>
-    <ul>
-      <li>acceptance or rejection: forwarded to the Editorial College for ratification</li>
-      <li>request for revision: sent directly to the authors</li>
-  </div>
+</div>
 
-  <form action="{% url 'submissions:eic_recommendation' arxiv_identifier_w_vn_nr=submission.arxiv_identifier_w_vn_nr %}" method="post">
-    {% csrf_token %}
-    <table>
-      <ul>
-        {{ form.as_table }}
-      </ul>
-    </table>
-    <input type="submit" value="Submit"/>
-  </form>
-</section>
+  {# <hr class="hr12">#}
+<div class="row">
+    <div class="col-12">
+        <h2>Submission</h2>
+        {% include 'submissions/_submission_summary.html' with submission=submission %}
+    </div>
+</div>
+
+
+<div class="row">
+    <div class="col-12">
+        <div class="card card-grey">
+            <div class="card-block">
+                <h1 class="card-title">Your Editorial Recommendation</h1>
+                <p class="card-text">You recommendation will be processed by the Editorial Administration.</p>
+                <ul class="mb-0">
+                    <li>acceptance or rejection: forwarded to the Editorial College for ratification</li>
+                    <li>request for revision: sent directly to the authors</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-12">
+        <form action="{% url 'submissions:eic_recommendation' arxiv_identifier_w_vn_nr=submission.arxiv_identifier_w_vn_nr %}" method="post">
+            {% csrf_token %}
+            {{ form|bootstrap }}
+            <input class="btn btn-secondary" type="submit" value="Submit"/>
+        </form>
+    </div>
+</div>
 
 
-{% endblock bodysup %}
+{% endblock content %}
diff --git a/submissions/templates/submissions/pool.html b/submissions/templates/submissions/pool.html
index 5cc698d47..a481b1142 100644
--- a/submissions/templates/submissions/pool.html
+++ b/submissions/templates/submissions/pool.html
@@ -37,14 +37,8 @@
                 </div>
 
                 <div class="card card-outline-secondary">
-                    <div class="card-header">
-                        <h3>Editorial recommendation</h3>
-                    </div>
+                    {% include 'submissions/_recommendation_fellow_content.html' with recommendation=rec %}
                     <div class="card-block">
-                        <div class="card card-outline-secondary">
-                            {% include 'submissions/_recommendation_fellow_content.html' with recommendation=rec %}
-                        </div>
-
                         {% if rec.remark_set.all %}
                             <h3 class="card-title">Remarks by Fellows:</h3>
                             <ul>
@@ -86,10 +80,12 @@
                         </ul>
 
                         {% if rec.remark_set %}
-                            <h4 class="card-title">Remarks:</h4>
+                            <h3 class="card-title">Remarks:</h3>
                             <ul>
                               {% for rem in rec.remark_set.all %}
                                   <li>{{ rem }}</li>
+                             {% empty %}
+                                 <li><em>No remarks</em></li>
                               {% endfor %}
                             </ul>
                         {% endif %}
@@ -149,9 +145,6 @@
                 </div>
 
                 <div class="card card-outline-secondary">
-                    <div class="card-header">
-                        <h3>Editorial recommendation</h3>
-                    </div>
                     <div class="card-block">
                         {% include 'submissions/_recommendation_fellow_content.html' with recommendation=rec %}
                     </div>
@@ -186,12 +179,7 @@
                 </div>
 
                 <div class="card card-outline-secondary">
-                    <div class="card-header">
-                        <h3>Editorial recommendation</h3>
-                    </div>
-                    <div class="card-block">
-                        {% include 'submissions/_recommendation_fellow_content.html' with recommendation=rec %}
-                    </div>
+                    {% include 'submissions/_recommendation_fellow_content.html' with recommendation=rec %}
                     <div class="card-footer">
                         <h3>Your position on this recommendation</h3>
                         <form action="{% url 'submissions:vote_on_rec' rec_id=rec.id %}" method="post">
diff --git a/submissions/templates/submissions/submission_detail.html b/submissions/templates/submissions/submission_detail.html
index 935acfd7a..1c991586d 100644
--- a/submissions/templates/submissions/submission_detail.html
+++ b/submissions/templates/submissions/submission_detail.html
@@ -49,21 +49,17 @@
                 {% endif %}
             </div>
         </div>
-    </div>
-</div>
 
-{% if other_versions %}
-<div class="row">
-    <div class="col-12">
-        <h3>Other versions of this Submission (with Reports) exist:</h3>
-        <div class="pl-4">
-            {% for vn in other_versions %}
-                {% include 'submissions/_submission_version.html' with submission=vn %}
-            {% endfor %}
-        </div>
+        {% if other_versions %}
+            <h3>Other versions of this Submission (with Reports) exist:</h3>
+            <div class="pl-4">
+                {% for vn in other_versions %}
+                    {% include 'submissions/_submission_version.html' with submission=vn %}
+                {% endfor %}
+            </div>
+        {% endif %}
     </div>
 </div>
-{% endif %}
 
 <div class="row">
     <div class="col-12">
@@ -71,14 +67,16 @@
 
         {% include 'submissions/_submission_status_block.html' with submission=submission %}
 
+        <br>
+        <br>
         {% if submission.author_comments %}
             <h3>Author comments upon resubmission</h3>
-            <p>{{ submission.author_comments|linebreaks }}</p>
+            <div class="pl-md-4">{{ submission.author_comments|linebreaks }}</div>
         {% endif %}
 
         {% if submission.list_of_changes %}
             <h3>List of changes</h3>
-            <p>{{ submission.list_of_changes|linebreaks }}</p>
+            <div class="pl-md-4">{{ submission.list_of_changes|linebreaks }}</div>
         {% endif %}
     </div>
 </div>
@@ -86,11 +84,11 @@
 {% if is_author or user|is_in_group:'Editorial College' or user|is_in_group:'Editorial Administrators' %}
     {% if recommendation %}
         {% if user|is_in_group:'Editorial College' or user|is_in_group:'Editorial Administrators' or recommendation|is_viewable_by_authors %}
-        <hr>
             <div class="row">
                 <div class="col-12">
-                    <h2>Editorial Recommendation</h2>
-                    {% include 'submissions/_recommendation_author_content.html' with recommendation=recommendation %}
+                    <div class="card card-outline-secondary">
+                        {% include 'submissions/_recommendation_author_content.html' with recommendation=recommendation %}
+                    </div>
                 </div>
             </div>
         {% endif %}
diff --git a/submissions/views.py b/submissions/views.py
index c0fc5b703..5d606ad28 100644
--- a/submissions/views.py
+++ b/submissions/views.py
@@ -710,7 +710,7 @@ def recruit_referee(request, arxiv_identifier_w_vn_nr):
                                     submission.editor_in_charge.get_title_display() + ' ' +
                                     submission.editor_in_charge.user.last_name +
                                     ', we would like to invite you to referee a Submission to ' +
-                                    submission.get_submitted_to_journal_display +
+                                    submission.get_submitted_to_journal_display() +
                                     ', namely\n\n' + submission.title +
                                     '\nby ' + submission.author_list +
                                     '\n (see https://scipost.org/submission/'
@@ -968,7 +968,7 @@ def eic_recommendation(request, arxiv_identifier_w_vn_nr):
     submission = get_object_or_404(Submission, arxiv_identifier_w_vn_nr=arxiv_identifier_w_vn_nr)
     if submission.status not in ['EICassigned', 'review_closed']:
         errormessage = ('This submission\'s current status is: ' +
-                        submission.get_status_display + '. '
+                        submission.get_status_display() + '. '
                         'An Editorial Recommendation is not required.')
         return render(request, 'scipost/error.html', {'errormessage': errormessage})
     if request.method == 'POST':
-- 
GitLab