From cbea9ec0e1288a83f888d1388272a07ecc83098d Mon Sep 17 00:00:00 2001
From: Joel Addison <joel@addison.net.au>
Date: Tue, 22 Oct 2019 09:28:47 +1000
Subject: [PATCH] Improved dashboard styling

Display proposals in rows and columns, instead of all on one row.
Fix spacing for sections on the page.
Improve small screen display of page.
---
 pinaxcon/templates/dashboard.html             | 61 +++----------------
 .../symposion/dashboard/_categories.html      | 48 +++++++--------
 .../symposion/dashboard/_new_proposal.html    |  6 +-
 .../symposion/dashboard/_profile.html         |  4 +-
 .../symposion/dashboard/speaking.html         | 54 ++++++++++++++--
 .../proposals/_pending_proposal_row.html      | 53 ++++++++--------
 .../symposion/proposals/_proposal_row.html    | 23 ++++---
 7 files changed, 125 insertions(+), 124 deletions(-)

diff --git a/pinaxcon/templates/dashboard.html b/pinaxcon/templates/dashboard.html
index 30bdc221..e94b7d73 100644
--- a/pinaxcon/templates/dashboard.html
+++ b/pinaxcon/templates/dashboard.html
@@ -1,7 +1,7 @@
 {% extends "site_base.html" %}
 {% load staticfiles %}
 {% load i18n %}
-{% load proposal_tags %}
+
 {% load review_tags %}
 {% load teams_tags %}
 {% load registrasion_tags %}
@@ -22,61 +22,18 @@
   {% include "symposion/dashboard/_categories.html" %}
 {% endif %}
 
-<div class="mb-5">
+<div class="mb-4">
   {% include "symposion/dashboard/speaking.html" %}
 </div>
 
-{% if user.speaker_profile %}
-{% if user.speaker_profile.proposals.exists %}
-<div class="mb-5">
-  <div class="row">
-    <div class="col-12">
-      <h2 class="my-5">Your Proposals</h2>
-    </div>
-  </div>
-  <div class="row">
-      <div class="col-12">
-          <div class="card-deck">
-              {% for proposal in user.speaker_profile.proposals.all %}
-              {% include "symposion/proposals/_proposal_row.html" %}
-              {% endfor %}
-          </div>
-      </div>
-  </div>
-</div>
-{% endif %}
-{% endif %}
-
-{% if user.speaker_profile %}
-{% associated_proposals as associated_proposals %}
-{% pending_proposals as pending_proposals %}
-{% if associated_proposals or pending_proposals %}
-<div class="mb-5">
-  <div class="row">
-    <div class="col-12">
-      <h2 class="my-5">Copresenter Proposals</h2>
-    </div>
-  </div>
-  <div class="row">
-    {% for proposal in associated_proposals %}
-    {% include "symposion/proposals/_proposal_row.html" %}
-    {% endfor %}
-    {% for proposal in pending_proposals %}
-    {% include "symposion/proposals/_pending_proposal_row.html" %}
-    {% endfor %}
-  </div>
-</div>
-{% endif %}
-{% endif %}
-
 {% if review_sections %}
-<div class="mb-5">
+<div class="mb-4">
   <div class="row">
-    <h2 class="col-12 my-5">{% trans "Reviews" %}</h2>
+    <h2 class="col-12 mb-3">{% trans "Reviews" %}</h2>
   </div>
   <div class="row">
     {% for section in review_sections %}
-    <div class="col-6">
+    <div class="col-md-6 col-lg-4">
     <div class="card card-default mb-3">
       <div class="card-header">
           <h3 class="card-title">{{ section }}</h3>
@@ -110,9 +67,9 @@
 
 {% available_teams as available_teams %}
 {% if user.memberships.exists or available_teams %}
-<div class="mb-5">
+<div class="mb-4">
   <div class="row">
-    <h2 class="col-12 my-5">{% trans "Teams "%}</h2>
+    <h2 class="col-12 mb-3">{% trans "Teams "%}</h2>
   </div>
   {% if user.memberships.exists %}
   <div class="row">
@@ -120,7 +77,7 @@
   </div>
   <div class="row">
     {% for membership in user.memberships.all %}
-    <div class="col-6">
+    <div class="col-md-6">
       {% include "symposion/teams/_team_row.html" with team=membership.team %}
     </div>
     {% endfor %}
@@ -132,7 +89,7 @@
   </div>
   <div class="row">
     {% for team in available_teams %}
-    <div class="col-6">
+    <div class="col-md-6">
       {% include "symposion/teams/_team_row.html" %}
     </div>
     {% endfor %}
diff --git a/pinaxcon/templates/symposion/dashboard/_categories.html b/pinaxcon/templates/symposion/dashboard/_categories.html
index 2a3c440e..db69f5d9 100644
--- a/pinaxcon/templates/symposion/dashboard/_categories.html
+++ b/pinaxcon/templates/symposion/dashboard/_categories.html
@@ -28,50 +28,45 @@
       <h2>{% trans "Attend" %} {% conference_name %}</h2>
     </div>
   </div>
-</div>
 
-{% if not user.attendee.completed_registration %}
-<div class="mb-4">
+  {% if not user.attendee.completed_registration %}
   <div class="row">
     <div class="col-12">
       <h3>Register</h3>
       <p>To attend the conference, you must create an attendee profile and purchase your ticket</p>
-      <div class="mt-auto">
+      <div>
         <a class="btn btn-lg btn-primary" role="button" href="{% url "guided_registration" %}">Get your ticket</a>
       </div>
     </div>
   </div>
-</div>
-{% else %}
-<div class="mb-4">
+  {% else %}
   <div class="row">
-    <div class="col-md-6 my-3 d-flex flex-column">
+    <div class="col-md-6 mb-3 mb-md-0">
       <h3>Attendee Profile</h3>
       <p>If you would like to change the details on your badge or your attendee statistics, you may edit your attendee profile here.</p>
-      <div class="mt-auto">
-        <a class="btn btn-lg btn-primary" role="button" href="{% url "attendee_edit" %}">Edit attendee profile</a>
+      <div>
+        <a class="btn btn-primary" role="button" href="{% url "attendee_edit" %}">Edit attendee profile</a>
       </div>
     </div>
-    <div class="col-md-6 my-3 d-flex flex-column">
+    <div class="col-md-6 mb-3 mb-md-0">
       <h3>Account Management</h3>
       <p>If you would like to change your registered email address or password, you can use our self-service account management portal</p>
-      <div class="mt-auto">
-        <a class="btn btn-lg btn-primary" role="button" href="https://login.linux.conf.au/manage/">Account Management</a>
+      <div>
+        <a class="btn btn-primary" role="button" href="https://login.linux.conf.au/manage/">Account Management</a>
       </div>
     </div>
   </div>
-</div>
 
-<div class="my-4 py-4">
+  {% items_pending as pending %}
   <div class="row">
-    {% items_pending as pending %}
-
     <div class="col-12">
-      <h2>Account</h2>
+      <h3 class="my-3">Account</h3>
     </div>
+  </div>
 
+  <div class="row">
     {% if pending %}
-    <div class="col-6 my-3 d-flex flex-column">
+    <div class="col-md-6 mb-3 mb-md-0">
       <h4>Items pending payment</h4>
       {% include "registrasion/_items_list.html" with items=pending %}
       <a class="btn btn-lg btn-primary" role="button" href="{% url "checkout" %}">Check out and pay</a>
@@ -80,24 +75,23 @@
 
     {% items_purchased as purchased %}
     {% if purchased %}
-    <div class="col-md-6 my-3 d-flex flex-column">
+    <div class="col-md-6 mb-3 mb-md-0">
       <h4>Paid Items</h4>
       {% include "registrasion/_items_list.html" with items=purchased %}
     </div>
     {% endif %}
 
-    <div class="col-md-6 my-3 d-flex flex-column">
+    <div class="col-md-6 mb-3 mb-md-0">
       <h4>Add/Update Items</h4>
       {% include "registrasion/_category_list.html" with categories=categories %}
     </div>
 
     {% invoices as invoices %}
     {% if invoices %}
-    <div class="col-md-6 my-3 d-flex flex-column">
+    <div class="col-md-6 mb-3 mb-md-0">
       <h4>Invoices</h4>
       <ul>
         {% for invoice in invoices %}
-
         <li{% if invoice.is_void %} class="void-invoice" style="display: none;"{% endif %}>
           <a href="{% url "invoice" invoice.id %}" >Invoice {{ invoice.id }}</a> - ${{ invoice.value }} ({{ invoice.get_status_display }})
         </li>
@@ -112,7 +106,7 @@
     {% endif %}
 
     {% if false %}
-    <div class="col-md-6 my-3 d-flex flex-column">
+    <div class="col-md-6 mb-3 mb-md-0">
       <h4>Raffle Tickets</h4>
 
       <p><a href="/raffle/tickets/">View all my raffle tickets</a></p>
@@ -123,11 +117,11 @@
 
     {% available_credit as credit %}
     {% if credit %}
-    <div class="col-md-6 my-3 d-flex flex-column">
+    <div class="col-md-6 mb-3 mb-md-0">
       <h4>Credit</h4>
-      <p>You have ${{ credit }} leftover from refunded invoices. This credit will be automatically applied to new invoices. Contact the conference organisers to for a refund to your original payment source.</p>
+      <p>You have ${{ credit }} leftover from refunded invoices. This credit will be automatically applied to new invoices. Contact the conference organisers if you wish to arrange a refund to your original payment source.</p>
     </div>
     {% endif %}
   </div>
+  {% endif %} {# user.attendee.completed_registration #}
 </div>
-{% endif %} {# user.attendee.completed_registration #}
diff --git a/pinaxcon/templates/symposion/dashboard/_new_proposal.html b/pinaxcon/templates/symposion/dashboard/_new_proposal.html
index 5374126c..a66558fe 100644
--- a/pinaxcon/templates/symposion/dashboard/_new_proposal.html
+++ b/pinaxcon/templates/symposion/dashboard/_new_proposal.html
@@ -1,8 +1,8 @@
 <h3>New Proposal</h3>
 <p>Click one of the following links to create a speaking or miniconf proposal.</p>
 <p>Once submitted you will be able to see the status of your proposals, as well manage the submission and co-speakers from this page</p>
-<div class="mt-auto">
+<div>
   {% for kind in proposal_kinds %}
-  <a class="btn btn-outline-primary" href="{% url "proposal_submit_kind" kind.slug %}">{{ kind }}</a>
+  <a class="btn btn-outline-primary mb-2" href="{% url "proposal_submit_kind" kind.slug %}">{{ kind }}</a>
   {% endfor %}
-</div>
\ No newline at end of file
+</div>
diff --git a/pinaxcon/templates/symposion/dashboard/_profile.html b/pinaxcon/templates/symposion/dashboard/_profile.html
index 7be5e050..59ef62f2 100644
--- a/pinaxcon/templates/symposion/dashboard/_profile.html
+++ b/pinaxcon/templates/symposion/dashboard/_profile.html
@@ -10,10 +10,10 @@
   details you provide here will be used during selection and to populate
   your speaker bio on the conference website.
 </p>
-<div class="mt-auto">
+<div>
   {% if not user.speaker_profile %}
   <a href="{% url "speaker_create" %}" class="btn btn-primary btn-lg" role="button">Create Profile</a>
   {% else %}
   <a href="{% url "speaker_edit" %}" class="btn btn-primary" role="button">Edit Profile</a>
   {% endif %}
-</div>
\ No newline at end of file
+</div>
diff --git a/pinaxcon/templates/symposion/dashboard/speaking.html b/pinaxcon/templates/symposion/dashboard/speaking.html
index dab5c002..5baab215 100644
--- a/pinaxcon/templates/symposion/dashboard/speaking.html
+++ b/pinaxcon/templates/symposion/dashboard/speaking.html
@@ -1,18 +1,62 @@
 {% load i18n %}
+{% load proposal_tags %}
 
 <div class="row">
-    <div class="col-12">
-      <h2 class="mb-5">{% trans "Speaking and Miniconfs" %}</h2>
-    </div>
+  <div class="col-12">
+    <h2 class="mb-3">{% trans "Speaking and Miniconfs" %}</h2>
+  </div>
 </div>
 
 <div class="row">
   {% if user.speaker_profile and proposal_kinds|length > 0 %}
-  <div class="col-md-6 d-flex flex-column">
+  <div class="col-md-6 mb-3 mb-md-0">
     {% include "symposion/dashboard/_new_proposal.html" %}
   </div>
   {% endif %}
-  <div class="col-md-6 d-flex flex-column">
+  <div class="col-md-6 mb-3 mb-md-0">
     {% include "symposion/dashboard/_profile.html" %}
   </div>
 </div>
+
+{% if user.speaker_profile %}
+{% if user.speaker_profile.proposals.exists %}
+<div class="row">
+  <div class="col-12">
+    <h3 class="my-4">Your Proposals</h3>
+  </div>
+</div>
+
+<div class="row">
+  {% for proposal in user.speaker_profile.proposals.all %}
+  <div class="col-md-6 col-lg-4">
+    {% include "symposion/proposals/_proposal_row.html" %}
+  </div>
+  {% endfor %}
+</div>
+{% endif %}
+{% endif %}
+
+{% if user.speaker_profile %}
+{% associated_proposals as associated_proposals %}
+{% pending_proposals as pending_proposals %}
+{% if associated_proposals or pending_proposals %}
+<div class="row">
+  <div class="col-12">
+    <h3 class="my-4">Copresenter Proposals</h2>
+  </div>
+</div>
+
+<div class="row">
+  {% for proposal in associated_proposals %}
+  <div class="col-md-6 col-lg-4">
+    {% include "symposion/proposals/_proposal_row.html" %}
+  </div>
+  {% endfor %}
+  {% for proposal in pending_proposals %}
+  <div class="col-md-6 col-lg-4">
+    {% include "symposion/proposals/_pending_proposal_row.html" %}
+  </div>
+  {% endfor %}
+</div>
+{% endif %}
+{% endif %}
diff --git a/pinaxcon/templates/symposion/proposals/_pending_proposal_row.html b/pinaxcon/templates/symposion/proposals/_pending_proposal_row.html
index 7591c424..7b714fae 100644
--- a/pinaxcon/templates/symposion/proposals/_pending_proposal_row.html
+++ b/pinaxcon/templates/symposion/proposals/_pending_proposal_row.html
@@ -1,41 +1,44 @@
 {% load i18n %}
 
+<div class="card mb-4">
 {% if proposal.result.status == "accepted" %}
-  <div class="card text-white bg-success mx-4 my-4">
+  <div class="card-header text-white bg-success">
 {% elif proposal.result.status == "rejected" %}
-  <div class="card text-white bg-danger mx-4 my-4">
+  <div class="card-header text-white bg-danger">
 {% elif proposal.result.status == "standby" %}
-  <div class="card text-white bg-warning mx-4 my-4">
+  <div class="card-header text-white bg-warning">
 {% else %}
-  <div class="card bg-light mx-4 my-4">
+  <div class="card-header bg-light">
 {% endif %}
+    {{ proposal.section.name }}
+  </div>
   <div class="card-body">
-      <h4 class="card-title">{{ proposal.title }}</h4>
+    <h4 class="card-title">{{ proposal.title }}</h4>
+    <h6 class="card-subtitle mb-2 text-muted">{{ proposal.kind.name }}</h6>
 	  <div class="card-text">
-	      <p>
-		  <small>{{ proposal.kind.name }}</small>
+      <p>
 		  {% if proposal.cancelled %}
-		      <small class="badge badge-pill float-right badge-danger">Cancelled</small>
+        <small class="badge badge-pill float-right badge-info">Cancelled</small>
 		  {% else %}
-		      {% if request.user == proposal.speaker.user %}
-			  {% if proposal.result.status == "accepted" %}
-			      <small class="badge badge-pill float-right badge-success">Accepted</small>
-			  {% else %}
-			      <small class="badge badge-pill float-right badge-default">Submitted</small>
-			  {% endif %}
-		      {% else %}
-			  <small class="badge badge-pill float-right badge-default">Invited</small>
-		      {% endif %}
+        {% if request.user == proposal.speaker.user %}
+  			  {% if proposal.result.status == "accepted" %}
+          <small class="badge badge-pill float-right badge-success">Accepted</small>
+	  		  {% else %}
+          <small class="badge badge-pill float-right badge-primary">Submitted</small>
+		  	  {% endif %}
+        {% else %}
+			  <small class="badge badge-pill float-right badge-secondary">Invited</small>
+        {% endif %}
 		  {% endif %}
-	      </p>
-	      <p>{{ proposal.abstract|truncatewords:40 }}</p>
+      </p>
+      <p>{{ proposal.abstract|truncatewords:40 }}</p>
 	  </div>
   </div>
   <div class="card-footer">
-      <a href="{% url "proposal_detail" proposal.pk %}">View Details</a><br />
-      {% if not proposal.cancelled %}
-	  <a href="{% url "proposal_pending_join" proposal.id %}">Accept Invitation</a><br />
-	  <a href="{% url "proposal_pending_decline" proposal.id %}">Decline Invitation</a>
-      {% endif %}
-  </div>
+    <a href="{% url "proposal_detail" proposal.pk %}" class="card-link">View Details</a>
+    {% if not proposal.cancelled %}
+    <a href="{% url "proposal_pending_join" proposal.id %}" class="card-link">Accept Invitation</a>
+	  <a href="{% url "proposal_pending_decline" proposal.id %}" class="card-link">Decline Invitation</a>
+    {% endif %}
   </div>
+</div>
diff --git a/pinaxcon/templates/symposion/proposals/_proposal_row.html b/pinaxcon/templates/symposion/proposals/_proposal_row.html
index d4961822..aff9489d 100644
--- a/pinaxcon/templates/symposion/proposals/_proposal_row.html
+++ b/pinaxcon/templates/symposion/proposals/_proposal_row.html
@@ -1,21 +1,24 @@
+  <div class="card mb-4">
   {% if proposal.result.status == "accepted" %}
-    <div class="card text-white bg-success mx-4 my-4">
+    <div class="card-header text-white bg-success">
   {% elif proposal.result.status == "rejected" %}
-    <div class="card text-white bg-danger mx-4 my-4">
+    <div class="card-header text-white bg-danger">
   {% elif proposal.result.status == "standby" %}
-    <div class="card text-white bg-warning mx-4 my-4">
+    <div class="card-header text-white bg-warning">
   {% else %}
-    <div class="card bg-light mx-4 my-4">
+    <div class="card-header bg-light">
   {% endif %}
+        {{ proposal.section.name }}
+      </div>
       <div class="card-body">
         <h4 class="card-title">
           {{ proposal.title }}
         </h4>
+        <h6 class="card-subtitle mb-2 text-muted">{{ proposal.kind.name }}</h6>
         <div class="card-text">
           <p>
-            <small class="text-muted">{{ proposal.kind.name }}</small>
             {% if proposal.cancelled %}
-            <small class="badge badge-pill float-right badge-danger">Cancelled</small>
+            <small class="badge badge-pill float-right badge-info">Cancelled</small>
             {% else %}
               {% if request.user == proposal.speaker.user %}
                 {% if proposal.result.status == "accepted" %}
@@ -25,10 +28,10 @@
                 {% elif proposal.result.status == "standby" %}
             <small class="badge badge-pill float-right badge-warning">Standby</small>
                 {% else %}
-            <small class="badge badge-pill float-right badge-default">Submitted</small>
+            <small class="badge badge-pill float-right badge-primary">Submitted</small>
                 {% endif %}
               {% else %}
-            <small class="badge badge-pill float-right badge-default">Associated</small>
+            <small class="badge badge-pill float-right badge-secondary">Associated</small>
               {% endif %}
             {% endif %}
           </p>
@@ -36,10 +39,10 @@
         </div>
       </div>
       <div class="card-footer">
-        <a href="{% url "proposal_detail" proposal.pk %}">View Details</a>
+        <a href="{% url "proposal_detail" proposal.pk %}" class="card-link">View Details</a>
         {% if not proposal.cancelled %}
         {% if request.user == proposal.speaker.user and proposal.can_edit %}
-        <br/><a href="{% url "proposal_edit" proposal.pk %}">Edit</a>
+        <a href="{% url "proposal_edit" proposal.pk %}" class="card-link">Edit</a>
         {% endif %}
         {% endif %}
       </div>