Started dashboard design

pinaxcon/templates/_form_btns.html

@@ -0,0 +1,2 @@
+<input class="btn btn-primary" type="submit" value="Save" />
+          <a class="btn btn-default" href="{% url "dashboard" %}">Cancel</a>

pinaxcon/templates/_form_snippet.html

@@ -1,5 +1,6 @@
 {% load lca2018_tags %}
 {% load bootstrap %}
+{% load crispy_forms_tags %}
 
 {% if form.non_field_errors %}
   <div class="has-errors">
@@ -9,7 +10,7 @@
 {% endif %}
 
 <blockquote>
-  Fields marked with <strong>*</strong> are required.
+  Fields marked with a<br/>* are required
 </blockquote>
 
-{{ form|bootstrap_horizontal }}
+{% crispy form %}

pinaxcon/templates/dashboard.html

@@ -11,18 +11,19 @@
 
 {% block header_title %}linux.conf.au 2019{% endblock %}
 {% block header_lead %}User Dashboard{% endblock %}
-
+{% block main_class %}{% endblock %}
 
 {% block content %}
 
 {% available_categories as categories %}
+<div class="container">
+<h1 class="text-primary mb-5">Dashboard</h1>
+</div>
 {% if categories %} 
 
 {% if user.is_staff %}
 <div class="container">
-        <div class="page-header">
   <h2>Administration</h2>
-        </div>
   <div class="page-row">
     <div class="col-xs-12">
       <a class="btn btn-lg btn-info" role="button" href="{% url "reports_list" %}">Reports</a>
@@ -170,43 +171,47 @@
   {% endif %}
   
 
+<div class="container">
 <div class="row">
     <div class="col-12">
-      <h2>{% trans "Speaking and Miniconfs" %}</h2>
+      <h2 class="text-primary mb-5">{% trans "Speaking and Miniconfs" %}</h2>
-        <div class="card">
-            <div class="card-header">
-                Speaker Profile
-              </div>
-            <div class="card-body">
-              <p class="card-text">
-                  Your speaker profile is independent of your attendee profile and the details you provide here will be used during selection and to populate your speaker bio on the conference website.
-              </p>
-              {% if not user.speaker_profile %}
-                <p class="card-text">To create a speaking or miniconf proposal you must first create a speaker profile.</p>
-                <a href="{% url "speaker_create" %}" class="btn btn-primary">Create Profile</a>
-              {% else %}
-                <a class="btn btn-primary" role="button" href="{% url "speaker_edit" %}">Edit Profile</a>
-              {% endif %}
     </div>
 </div>
   
+<div class="row">
+    <div class="col-md-6 text-primary d-flex flex-column">
+      <h3 class="text-upper">Speaker Profile</h3>
+      {% if not user.speaker_profile %}
+      <p>
+        To create a speaking or miniconf proposal you must first create a speaker 
+        profile.
+      </p>
+      {% endif %}
+      <p>
+        Your speaker profile is independent of your attendee profile and the 
+        details you provide here will be used during selection and to populate 
+        your speaker bio on the conference website.
+      </p>
+      <div class="mt-auto">
+        {% 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 btn-lg" role="button">Edit Profile</a>
+        {% endif %}
+      </div>
+    </div>
     
     {% if user.speaker_profile %}
-        <div class="col-xs-12 col-sm-6 col-lg-6">
+    <div class="col-md-6 text-primary d-flex flex-column">
-          <div class="panel panel-primary">
+      <h3 class="text-upper">New Proposal</h3>
-            <div class="panel-heading">
-              <h5>New Proposal</h5>
-            </div>
-            <div class="panel-body">
       <p>You may use the following form 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>
-              <a class="btn btn-lg btn-primary pull-right" role="button" href="{% url "proposal_submit" %}">New Proposal</a>
+      <div class="mt-auto">
-            </div>
+        <a class="btn btn-lg btn-primary" role="button" href="{% url "proposal_submit" %}">New Proposal</a>
       </div>
     </div>
     {% endif %}
 </div>
-
 </div>
 
 
@@ -248,26 +253,22 @@
 {% endif %}
 {% endif %}
 
-  {% if review_sections %}
+<div class="bg-primary text-secondary mt-5 pb-5">
 <div class="container">
-      <div class="page-header">
+
-        <h2>{% trans "Reviews" %}</h2>
+{% if review_sections %}
-      </div>
+<div class="row">
-      <div class="page-row">
+  <h2 class="col-12 my-5">{% trans "Reviews" %}</h2>
   {% for section in review_sections %}
-          <div class="col-xs-12 col-sm-6 col-lg-6">
+  <div class="col-md-6">
-            <div class="panel panel-primary">
+    <h3>{{ section }}</h3>
-              <div class="panel-heading">
+          <ul class="list-unstyled">
-                <h5>{{ section }}</h5>
-              </div>
-              <div class="panel-body">
-                <ul>
             <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>
           </ul>
           {% if section in manage_sections %}
-                <ul>
+          <ul class="list-unstyled">
             <li><a href="{% url "review_bulk_update" section.section.slug %}">Bulk Update</a></li>
             <li><a href="{% url "result_notification" section.section.slug "accepted" %}">Send notifications</a></li>
             <li><a href="{% url "review_status" section.section.slug %}">Voting Status</a></li>
@@ -275,13 +276,11 @@
           </ul>
           {% endif %}
   </div>
-            </div>
-          </div>
   {% endfor %}
 </div>
-    </div>
 {% endif %}
-
+</div>
+</div>
 {% available_teams as available_teams %}
 {% if user.memberships.exists or available_teams %}
 <div class="container">

pinaxcon/templates/site_base.html

@@ -52,7 +52,7 @@
     {% endif %}
     
     
-
+    <h1 class="text-primary text-upper h2 mb-5">{% block page_title %}{% endblock %}</h1>
 
     {% block body_base %}
     {% block body %}

pinaxcon/templates/symposion/speakers/speaker_create.html

@@ -10,10 +10,7 @@
         {% csrf_token %}
         <fieldset>
           {% include "_form_snippet.html" with form=speaker_form %}
-          <div class="btn-group">
+          {% include "_form_btns.html" %}
-              <input class="btn btn-primary" type="submit" value="Save" />
-              <a class="btn btn-default" href="{% url "dashboard" %}">Cancel</a>
-          </div>
         </fieldset>
     </form>
 {% endblock %}

pinaxcon/templates/symposion/speakers/speaker_edit.html

@@ -10,10 +10,7 @@
         {% csrf_token %}
         <fieldset>
           {% include "_form_snippet.html" with form=speaker_form %}
-          <div class="btn-group">
+          {% include "_form_btns.html" %}
-              <input class="btn btn-primary" type="submit" value="Save" />
-              <a class="btn btn-default" href="{% url "dashboard" %}">Cancel</a>
-          </div>
         </fieldset>
     </form>
 {% endblock %}

static/src/scss/app.scss

@@ -41,6 +41,10 @@ body {
     }
 }
 
+.text-upper {
+    text-transform: uppercase;
+}
+
 .navbar-collapse {
     margin-left: $padding-left-default;
 }
@@ -184,3 +188,65 @@ main.container-fluid {
     height: 480px;
     filter: grayscale(100%);
 }
+
+.btn-lg {
+    padding: 0.8rem 4.5rem;
+    font-size: 1rem;
+    line-height: 1.5;
+}
+
+.btn {
+    padding: 0.4rem 2.25rem;
+    font-size: 1rem;
+    border-radius: 0;
+    text-transform: uppercase;
+}
+
+.jumbotron {
+    border-radius: 0;
+    background-color: rgba(204, 213, 197, 0.1);
+    border: 1px $primary solid;
+    color: $primary;
+    padding: 5rem 6rem ;
+}
+
+.col-form-label, .form-check-label {
+    font-weight: bold;
+}
+
+.form-text.text-muted {
+    color: $primary !important;
+    margin-bottom: 1rem;
+}
+
+fieldset {
+    blockquote {
+        font-size: 80%;
+    }
+}
+
+.form-control {
+    border-radius: 0;
+    border: 2px $primary solid;
+
+    &:focus {
+        border: 2px $primary solid;
+    }
+}
+
+label.form-check-label {
+    display: flex;
+    align-items: center
+}
+
+h3 {
+    text-transform: uppercase;
+}
+
+
+main {
+    a {
+        color: #f5843e;
+        font-weight: 600;
+    }
+}