From 149b7c8a548dd3e56ef98e701039ee2e2a133520 Mon Sep 17 00:00:00 2001
From: Joel Addison <joel@addison.net.au>
Date: Wed, 24 Jul 2019 21:03:50 +1000
Subject: [PATCH] Improve proposal/review styling

Use correct block for page titles. Fix element styles to be consistent
across site. Use fluid layout for review to enable sidebar.
---
 pinaxcon/templates/dashboard.html             | 71 +++++++++--------
 pinaxcon/templates/site_base.html             |  2 +-
 .../symposion/dashboard/_categories.html      |  8 +-
 .../symposion/proposals/_proposal_fields.html |  8 +-
 .../templates/symposion/proposals/base.html   |  4 +-
 .../symposion/proposals/proposal_detail.html  |  6 +-
 .../symposion/proposals/proposal_submit.html  |  5 +-
 .../proposals/proposal_submit_kind.html       |  6 +-
 .../templates/symposion/reviews/base.html     | 78 ++++++++++---------
 .../reviews/result_notification.html          | 13 ++--
 .../symposion/reviews/review_detail.html      |  2 +-
 .../symposion/reviews/review_list.html        |  1 +
 .../symposion/reviews/review_review.html      |  3 -
 .../symposion/reviews/review_stats.html       | 24 ++++--
 static/src/scss/app.scss                      |  3 +-
 15 files changed, 124 insertions(+), 110 deletions(-)

diff --git a/pinaxcon/templates/dashboard.html b/pinaxcon/templates/dashboard.html
index fe99750d..804f4ee4 100644
--- a/pinaxcon/templates/dashboard.html
+++ b/pinaxcon/templates/dashboard.html
@@ -1,4 +1,4 @@
-{% extends "utility_page.html" %}
+{% extends "site_base.html" %}
 {% load staticfiles %}
 {% load i18n %}
 {% load proposal_tags %}
@@ -10,8 +10,7 @@
 
 
 {% block head_title %}Dashboard{% endblock %}
-{% block header_lead %}User Dashboard{% endblock %}
-{% block main_class %}{% endblock %}
+{% block page_title %}User Dashboard{% endblock %}
 
 {% block alert %}
 {% endblock %}
@@ -19,21 +18,17 @@
 {% block content %}
 
 {% available_categories as categories %}
-<div class="container mb-5">
-  <h1>Dashboard</h1>
-</div>
-
 {% if categories %}
   {% include "symposion/dashboard/_categories.html" %}
 {% endif %}
 
-<div class="container mb-5">
+<div class="mb-5">
   {% include "symposion/dashboard/speaking.html" %}
 </div>
 
 {% if user.speaker_profile %}
 {% if user.speaker_profile.proposals.exists %}
-<div class="container mb-5">
+<div class="mb-5">
   <div class="row">
     <div class="col-12">
       <h2 class="my-5">Your Proposals</h2>
@@ -56,7 +51,7 @@
 {% associated_proposals as associated_proposals %}
 {% pending_proposals as pending_proposals %}
 {% if associated_proposals or pending_proposals %}
-<div class="container mb-5">
+<div class="mb-5">
   <div class="row">
     <div class="col-12">
       <h2 class="my-5">Copresenter Proposals</h2>
@@ -75,13 +70,19 @@
 {% endif %}
 
 {% if review_sections %}
-<div class="container mb-5">
-<div class="row">
-  <h2 class="col-12 my-5">{% trans "Reviews" %}</h2>
-  {% for section in review_sections %}
-  <div class="col-md-6">
-    <h3>{{ section }}</h3>
-          <ul class="list-unstyled">
+<div class="mb-5">
+  <div class="row">
+    <h2 class="col-12 my-5">{% trans "Reviews" %}</h2>
+  </div>
+  <div class="row">
+    {% for section in review_sections %}
+    <div class="col-6">
+    <div class="card card-default mb-3">
+      <div class="card-header">
+          <h3 class="card-title">{{ section }}</h3>
+      </div>
+      <div class="card-body">
+        <ul class="list-unstyled">
             <li><a href="{% url "review_section" section.section.slug %}">All</a></li>
             <li><a href="{% url "user_reviewed" section.section.slug %}">Reviewed by you</a></li>
             <li><a href="{% url "user_not_reviewed" section.section.slug %}">Not Reviewed by you</a></li>
@@ -94,48 +95,46 @@
             <li><a href="{% url "review_admin" section.section.slug %}">Reviewer Stats</a></li>
           </ul>
           {% endif %}
+      </div>
+    </div>
+    </div>
+    {% endfor %}
   </div>
-  {% endfor %}
+</div>
 {% endif %}
-</div>
-</div>
 
 {% available_teams as available_teams %}
 {% if user.memberships.exists or available_teams %}
-<div class="container mb-5">
+<div class="mb-5">
   <div class="row">
     <h2 class="col-12 my-5">{% trans "Teams "%}</h2>
-    {% if user.memberships.exists %}
-    </div>
+  </div>
+  {% if user.memberships.exists %}
   <div class="row">
     <div class="col-12">
       <h3>Your Teams</h3>
       <div class="card-deck">
       {% for membership in user.memberships.all %}
-      {% include "symposion/teams/_team_row.html" with team=membership.team %}
-        {% endfor %}
+        {% include "symposion/teams/_team_row.html" with team=membership.team %}
+      {% endfor %}
       </div>
     </div>
-    {% endif %}
   </div>
-</div>
-
-<div class="container">
+  {% endif %}
+  {% if available_teams %}
   <div class="row">
-    {% if available_teams %}
     <div class="col-12">
-  <h3 class="my-5">Available Teams</h3>
+      <h3>Available Teams</h3>
     </div>
-  <div class="col-12">
+    <div class="col-12">
       <div class="card-deck">
-    {% for team in available_teams %}
+      {% for team in available_teams %}
         {% include "symposion/teams/_team_row.html" %}
-    {% endfor %}
+      {% endfor %}
       </div>
-  </div>
     </div>
-    {% endif %}
   </div>
+  {% endif %}
 </div>
 {% endif %}
 
diff --git a/pinaxcon/templates/site_base.html b/pinaxcon/templates/site_base.html
index 210f316c..b172663a 100644
--- a/pinaxcon/templates/site_base.html
+++ b/pinaxcon/templates/site_base.html
@@ -98,7 +98,7 @@
     {% endblock %}
   </main>
 
-  <footer class="footer">
+  <footer class="footer mt-4">
     <div class="container py-4">
       <div class="row">
         <div class="col-md-4 pb-4">
diff --git a/pinaxcon/templates/symposion/dashboard/_categories.html b/pinaxcon/templates/symposion/dashboard/_categories.html
index 20e19f06..99b430bd 100644
--- a/pinaxcon/templates/symposion/dashboard/_categories.html
+++ b/pinaxcon/templates/symposion/dashboard/_categories.html
@@ -8,7 +8,7 @@
 {% load staticfiles %}
 
 {% if user.is_staff %}
-<div class="container mb-4">
+<div class="mb-4">
   <div class="row">
     <div class="col-12">
       <h2>{% trans "Administration" %}</h2>
@@ -22,7 +22,7 @@
 </div>
 {% endif %}
 
-<div class="container mb-4">
+<div class="mb-4">
   <div class="row">
     <div class="col-12">
       <h2>{% trans "Attend" %} {% conference_name %}</h2>
@@ -30,7 +30,7 @@
   </div>
 </div>
 
-<div class="container mb-4">
+<div class="mb-4">
   <div class="row">
     {% if not user.attendee.completed_registration %}
     <div class="col-12">
@@ -61,7 +61,7 @@
   </div>
 </div>
 
-<div class="container my-4 py-4">
+<div class="my-4 py-4">
   <div class="row">
     {% items_pending as pending %}
 
diff --git a/pinaxcon/templates/symposion/proposals/_proposal_fields.html b/pinaxcon/templates/symposion/proposals/_proposal_fields.html
index eea7b68c..2868a3c1 100644
--- a/pinaxcon/templates/symposion/proposals/_proposal_fields.html
+++ b/pinaxcon/templates/symposion/proposals/_proposal_fields.html
@@ -1,10 +1,10 @@
 {% load i18n %}
 {% load lca2018_tags %}
 
-<div class="row my-4">
-  <h2 class="col-12">
-    Details
-  </h2>
+<div class="row">
+  <div class="col-12">
+    <h2 class="my-4">{% trans 'Details' %}</h2>
+  </div>
 </div>
 
 <div class="row">
diff --git a/pinaxcon/templates/symposion/proposals/base.html b/pinaxcon/templates/symposion/proposals/base.html
index 999a0e9d..e994c4cc 100644
--- a/pinaxcon/templates/symposion/proposals/base.html
+++ b/pinaxcon/templates/symposion/proposals/base.html
@@ -1,8 +1,8 @@
-{% extends "utility_page.html" %}
+{% extends "site_base.html" %}
 {% load staticfiles %}
 
 
-{% block utility_body %}
+{% block body_outer %}
   {% block proposals_body %}
   {% endblock %}
 {% endblock %}
diff --git a/pinaxcon/templates/symposion/proposals/proposal_detail.html b/pinaxcon/templates/symposion/proposals/proposal_detail.html
index 1768d0d1..ebd0b597 100644
--- a/pinaxcon/templates/symposion/proposals/proposal_detail.html
+++ b/pinaxcon/templates/symposion/proposals/proposal_detail.html
@@ -6,8 +6,8 @@
 {% block page_title %}#{{ proposal.number }}: {{ proposal.title }} ({{ proposal.speaker }}){% endblock %}
 
 {% block proposals_body %}
-  <div>
-    <ul class="nav nav-pills mb-5">
+  <div class="mb-4">
+    <ul class="nav nav-tabs mb-2">
       <li class="nav-item"><a class="nav-link active" href="#proposal-detail" data-toggle="tab">{% trans "Proposal Details" %}</a></li>
       <li class="nav-item"><a class="nav-link" href="#supporting-document" data-toggle="tab">{% trans "Supporting Documents" %}</a></li>
       <li class="nav-item"><a class="nav-link" href="#reviewer-feedback" data-toggle="tab">{% trans "Reviewer Feedback" %} ({{ proposal.messages.all|length }})</a></li>
@@ -53,8 +53,6 @@
            <a class="btn btn-primary {% if proposal.cancelled %} btn-disabled{% endif %}" href="{% url "proposal_document_create" proposal.pk %}"><i class="fa fa-upload"></i> {% trans 'Add Document' %}</a>
           </div>
         </div>
-        
-        
       </div>
 
       <div class="tab-pane" id="reviewer-feedback">
diff --git a/pinaxcon/templates/symposion/proposals/proposal_submit.html b/pinaxcon/templates/symposion/proposals/proposal_submit.html
index 4866fdc0..900e8edd 100644
--- a/pinaxcon/templates/symposion/proposals/proposal_submit.html
+++ b/pinaxcon/templates/symposion/proposals/proposal_submit.html
@@ -3,15 +3,14 @@
 {% load i18n %}
 
 {% block head_title %}{% trans "Submit A Proposal" %}{% endblock %}
-{% block header_title %}Submit A Proposal{% endblock %}
+{% block page_title %}Submit a Proposal{% endblock %}
 
 {% block proposals_body %}
     {% if kinds %}
         <h1>New Proposal</h1>
         <p>Select what kind of proposal you'd like to submit:</p>
         {% for kind in kinds %}
-            <h2>{{ kind }}</h2>
-            <a class="btn btn-lg btn-secondary" role="button" href="{% url "proposal_submit_kind" kind.slug %}">{{ kind }}</a>
+            <a class="btn btn-outline-primary" href="{% url "proposal_submit_kind" kind.slug %}">{{ kind }}</a>
         {% endfor %}
     {% else %}
         <h1>Proposals Closed</h1>
diff --git a/pinaxcon/templates/symposion/proposals/proposal_submit_kind.html b/pinaxcon/templates/symposion/proposals/proposal_submit_kind.html
index de212cff..030b8e54 100644
--- a/pinaxcon/templates/symposion/proposals/proposal_submit_kind.html
+++ b/pinaxcon/templates/symposion/proposals/proposal_submit_kind.html
@@ -2,7 +2,7 @@
 
 {% load i18n %}
 
-{% block header_title %}Submit a Proposal for a {{ kind.name }}{% endblock %}
+{% block page_title %}Submit a Proposal for a {{ kind.name }}{% endblock %}
 {% block head_title %}Submit a Proposal for a {{ kind.name }}{% endblock %}
 
 {% block proposals_body %}
@@ -13,8 +13,8 @@
           <p>
             You will be able to edit your proposal after it has been submitted. The program committee may ask questions, provide feedback, and even suggest changes to your proposal as part of the review processes.
           </p>
-          <input class="btn btn-primary" type="submit" name="finish" value="Save" />
-          <input class="btn btn-default" type="submit" name="add-speakers" value="Save and Add Additional Speakers" />
+          <input class="btn btn-primary" type="submit" name="finish" value="Submit" />
+          <input class="btn btn-default" type="submit" name="add-speakers" value="Submit and Add Additional Speakers" />
         </fieldset>
     </form>
 {% endblock %}
diff --git a/pinaxcon/templates/symposion/reviews/base.html b/pinaxcon/templates/symposion/reviews/base.html
index 389e6aee..03bfb371 100644
--- a/pinaxcon/templates/symposion/reviews/base.html
+++ b/pinaxcon/templates/symposion/reviews/base.html
@@ -4,14 +4,12 @@
 {% load i18n %}
 
 {% block body_class %}reviews{% endblock %}
+{% block main_class %}container-fluid{% endblock %}
 
 {% block body_outer %}
-<div>
-    <div class="sidebar-wrapper">
-        <div class="sidebar mr-5">
-            <div class="collapser mb-3">
-                <div id="sidebarBtn"><span class="oi oi-menu"></span></div>
-            </div>
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-md-2 col-sm-4">
             {% block sidebar %}
             {% for section in review_sections %}
 
@@ -50,44 +48,54 @@
             {% endfor %}
             {% endblock %}
         </div>
-        <div style="flex: 1 1 0; min-width: 40px;">
+        <div class="col-md-10 col-sm-8">
             {% block body %}
             {% endblock %}
         </div>
     </div>
 </div>
-
 {% endblock %}
-{% block extra_script %}
-<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/b-1.5.2/b-colvis-1.5.2/b-html5-1.5.2/b-print-1.5.2/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.4.0/r-2.2.2/rg-1.0.3/rr-1.2.4/datatables.min.css"/>
-<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
-<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
-<script type="text/javascript" src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
-<script type="text/javascript" src="//cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/b-1.5.2/b-colvis-1.5.2/b-html5-1.5.2/b-print-1.5.2/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.4.0/r-2.2.2/rg-1.0.3/rr-1.2.4/datatables.min.js"></script>
+
+{% block extra_style %}
+<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/b-1.5.6/b-colvis-1.5.6/b-html5-1.5.6/b-print-1.5.6/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/datatables.min.css"/>
+{% endblock %}
+
+{% block extra_script %} 
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
+<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/b-1.5.6/b-colvis-1.5.6/b-html5-1.5.6/b-print-1.5.6/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/datatables.min.js"></script>
 <script type="text/javascript">
     var reviewtable = $("table.table-reviews").DataTable({
-        "stateSave": true,
-        "autoWidth": false,
-        "lengthMenu": [[10, 50, 100, -1], [10, 50, 100, "All"]],
-        "pageLength": 100,
-        "colReorder": true,
-         "columnDefs": [
-            { targets: [6,7,8,9,10], visible: false}
-        ],
-        "buttons": [{
-              extend: 'collection',
-              text: 'Export',
-              buttons: ["copy", "csv", "print"]
+            "stateSave": true,
+            "autoWidth": false,
+            "lengthMenu": [[10, 50, 100, -1], [10, 50, 100, "All"]],
+            "pageLength": 100,
+            "colReorder": true,
+            "columnDefs": [
+                { targets: [6, 7, 8, 9, 10], visible: false }
+            ],
+            "buttons": [{
+                extend: 'collection',
+                text: 'Export',
+                buttons: ["copy", "csv", "print", "pdf"]
             },
-            { extend: 'collection',
-              text: 'Columns',
-              buttons: [
-                { extend: 'columnsToggle',
-                  columns: '.toggle' },
-                { extend: 'columnToggle',
-                  text: 'Vote details',
-                  columns: '.votes'
-    }]}]});
+            {
+                extend: 'collection',
+                text: 'Columns',
+                buttons: [
+                    {
+                        extend: 'columnsToggle',
+                        columns: '.toggle'
+                    },
+                    {
+                        extend: 'columnToggle',
+                        text: 'Vote details',
+                        columns: '.votes'
+                    }
+                ]
+            }
+            ]
+        });
     reviewtable.buttons().container().prependTo( $(reviewtable.table().container() ));
 </script>
 <script>
diff --git a/pinaxcon/templates/symposion/reviews/result_notification.html b/pinaxcon/templates/symposion/reviews/result_notification.html
index 12a6cbea..6406cbf0 100644
--- a/pinaxcon/templates/symposion/reviews/result_notification.html
+++ b/pinaxcon/templates/symposion/reviews/result_notification.html
@@ -2,6 +2,7 @@
 
 {% load i18n %}
 
+{% block head_title %}{% trans 'Result Notification' %}{% endblock %}
 
 {% block body_class %}{{ block.super }} review-results{% endblock %}
 
@@ -16,14 +17,14 @@
 
 {% block body %}
 
-    <ul class="nav nav-pills">
-        <li{% if status == 'accepted' %} class="active"{% endif %}><a href="{% url "result_notification" section_slug 'accepted' %}">accepted</a>
-        <li{% if status == 'rejected' %} class="active"{% endif %}><a href="{% url "result_notification" section_slug 'rejected' %}">rejected</a>
-        <li{% if status == 'standby' %} class="active"{% endif %}><a href="{% url "result_notification" section_slug 'standby' %}">standby</a>
-    </ul>
-
     <h1>Result Notification</h1>
 
+    <ul class="nav nav-tabs">
+        <li class="nav-item"><a class="nav-link {% if status == 'accepted' %}active{% endif %}" href="{% url "result_notification" section_slug 'accepted' %}">Accepted</a>
+        <li class="nav-item"><a class="nav-link {% if status == 'rejected' %}active{% endif %}" href="{% url "result_notification" section_slug 'rejected' %}">Rejected</a>
+        <li class="nav-item"><a class="nav-link {% if status == 'standby' %}active{% endif %}" href="{% url "result_notification" section_slug 'standby' %}">Standby</a>
+    </ul>
+
     <form class="form-horizontal" method="post" action="{% url "result_notification_prepare" section_slug status %}">
 
         {% csrf_token %}
diff --git a/pinaxcon/templates/symposion/reviews/review_detail.html b/pinaxcon/templates/symposion/reviews/review_detail.html
index afc6647e..decd0b0c 100644
--- a/pinaxcon/templates/symposion/reviews/review_detail.html
+++ b/pinaxcon/templates/symposion/reviews/review_detail.html
@@ -53,7 +53,7 @@
 <h2 class="mb-5">#{{ proposal.number }}: {{ proposal.title }} ({{ proposal.speaker }})</h2>
 
 <div class="tabbable">
-  <ul class="nav nav-pills">
+  <ul class="nav nav-tabs">
     <li class="nav-item"><a class="nav-link active" href="#proposal-detail" data-toggle="tab">{% trans "Proposal Details" %}</a></li>
     <li class="nav-item"><a class="nav-link" href="#proposal-feedback" data-toggle="tab">{% trans "Speaker Feedback" %} <span class="badge">{{ proposal.messages.all|length }}</span></a></li>
   </ul>
diff --git a/pinaxcon/templates/symposion/reviews/review_list.html b/pinaxcon/templates/symposion/reviews/review_list.html
index 65be8fb0..10c0b590 100644
--- a/pinaxcon/templates/symposion/reviews/review_list.html
+++ b/pinaxcon/templates/symposion/reviews/review_list.html
@@ -1,5 +1,6 @@
 {% extends "symposion/reviews/base.html" %}
 
+{% block head_title %}Reviews - {{ section }}{% endblock %}
 
 {% block body_class %}{{ block.super }}
 	{% if reviewed == "all_reviews" %}
diff --git a/pinaxcon/templates/symposion/reviews/review_review.html b/pinaxcon/templates/symposion/reviews/review_review.html
index 86c25f8e..80e1a4ba 100644
--- a/pinaxcon/templates/symposion/reviews/review_review.html
+++ b/pinaxcon/templates/symposion/reviews/review_review.html
@@ -1,8 +1,5 @@
 {% extends "site_base.html" %}
 {% load staticfiles %}
-{% block extra_style %}
-<link rel="stylesheet" href="{% static 'css/site-0a247b924d.css' %}">
-{% endblock %}
 
 {% load bootstrap %}
 
diff --git a/pinaxcon/templates/symposion/reviews/review_stats.html b/pinaxcon/templates/symposion/reviews/review_stats.html
index 9ecb0d7d..810b3389 100644
--- a/pinaxcon/templates/symposion/reviews/review_stats.html
+++ b/pinaxcon/templates/symposion/reviews/review_stats.html
@@ -7,13 +7,23 @@
 
     {% if key %}
         <br />
-        <div class="btn-group">
-            <a class="btn btn-default positive" href="{% url "review_status" section_slug "positive" %}">Positive</a>
-            <a class="btn btn-default negative" href="{% url "review_status" section_slug "negative" %}">Negative</a>
-            <a class="btn btn-default indifferent" href="{% url "review_status" section_slug "indifferent" %}">Indifferent</a>
-            <a class="btn btn-default controversial" href="{% url "review_status" section_slug "controversial" %}">Controversial</a>
-            <a class="btn btn-default too_few" href="{% url "review_status" section_slug "too_few" %}">Too Few</a>
-        </div>
+        <ul class="nav nav-tabs">
+            <li class="nav-item">
+                <a class="nav-link {% if key == 'positive' %}active{% endif %}" href="{% url "review_status" section_slug "positive" %}">Positive</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link {% if key == 'negative' %}active{% endif %}" href="{% url "review_status" section_slug "negative" %}">Negative</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link {% if key == 'indifferent' %}active{% endif %}" href="{% url "review_status" section_slug "indifferent" %}">Indifferent</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link {% if key == 'controversial' %}active{% endif %}" href="{% url "review_status" section_slug "controversial" %}">Controversial</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link {% if key == 'too_few' %}active{% endif %}" href="{% url "review_status" section_slug "too_few" %}">Too Few</a>
+            </li>
+        </ul>
 
         <div>
             {% if key == "positive" %}
diff --git a/static/src/scss/app.scss b/static/src/scss/app.scss
index bfa0a575..cb0be683 100644
--- a/static/src/scss/app.scss
+++ b/static/src/scss/app.scss
@@ -67,7 +67,8 @@ h3, .h3 {
     margin-bottom: 0;
 }
 
-.label-required:after { content: ' *'; }
+.asteriskField:before { content: ' '; }
+
 .abstract, .bio, .monospace-text {
     font-family: Hack, monospace;
     white-space: pre-wrap;