Improve data filter/"Group by" UI on /dashboard.

This will also be used by /reports/[body]/summary in a bit.

3 files changed, 140 insertions, 60 deletions

diff --git a/templates/web/base/dashboard/index.html b/templates/web/base/dashboard/index.html
index b201ebcc9..c6902556a 100644
--- a/templates/web/base/dashboard/index.html
+++ b/templates/web/base/dashboard/index.html
@@ -23,10 +23,11 @@
 
 <div class="filters">
   [% IF body %]
+    <input type="hidden" name="body" value="[% body.id | html %]">
     [% IF NOT c.user.area_id %]
     <p>
         <label for="ward">[% loc('Ward:') %]</label>
-        <select class="form-control" name="ward"><option value=''>[% loc('All') %]</option>
+        <select class="form-control" name="ward" id="ward"><option value=''>[% loc('All') %]</option>
             [% FOR w IN children.values.sort('name') %]
                 <option value="[% w.id %]"[% ' selected' IF w.id == ward %]>[% w.name %]</option>
             [% END %]
@@ -36,7 +37,7 @@
 
     <p>
         <label for="category">[% loc('Category:') %]</label>
-        <select class="form-control" name="category"><option value=''>[% loc('All') %]</option>
+        <select class="form-control" name="category" id="category"><option value=''>[% loc('All') %]</option>
             [% FOR cat IN contacts %]
                 <option value='[% cat.category | html %]'[% ' selected' IF category == cat.category %]>[% cat.category_display | html %]</option>
             [% END %]
@@ -47,7 +48,7 @@
 
     <p>
         <label for="ward">[% loc('Council:') %]</label>
-        <select class="form-control" name="body"><option value=''>[% loc('All') %]</option>
+        <select class="form-control" name="body" id="body"><option value=''>[% loc('All') %]</option>
             [% FOR b IN bodies %]
                 <option value="[% b.id %]">[% b.name %]</option>
             [% END %]
@@ -58,7 +59,7 @@
 
     <p>
         <label for="state">[% loc('Report state:') %]</label>
-        <select class="form-control" name="state">
+        <select class="form-control" name="state" id="state">
             <option value=''>[% loc('All') %]</option>
           [% FOR group IN filter_states %]
           [% FOR state IN group.1 %]
@@ -70,43 +71,40 @@
     </p>
     <p>
         <label for="start_date">[% loc('Start Date') %]</label>
-        <input name="start_date" type="date" value="[% start_date | html %]" class="form-control">
+        <input name="start_date" id="start_date" type="date" value="[% start_date | html %]" class="form-control">
     </p>
     <p>
         <label for="end_date">[% loc('End Date') %]</label>
-        <input name="end_date" type="date" value="[% end_date | html %]" class="form-control">
+        <input name="end_date" id="end_date" type="date" value="[% end_date | html %]" class="form-control">
+    </p>
+    <p class="no-label">
+        <input type="submit" class="btn" value="[% loc('Look up') %]">
     </p>
 </div>
 
-<p align="center">
-    <input type="hidden" name="group_by" value="[% group_by | html %]">
-    <input type="hidden" name="body" value="[% body.id | html %]">
-    <input type="submit" class="btn" value="[% loc('Look up') %]">
-    <input type="submit" class="btn" name="export" value="[% loc('Export as CSV') %]">
-</p>
+<input type="hidden" name="group_by" value="[% group_by | html %]">
 
 </form>
 
 [% BLOCK gb %]
-[% IF group_by == new_gb %]
-    <strong>[% text %]</strong>
-[% ELSE %]
-    <a href="[% c.uri_with({ group_by => new_gb }) %]">[% text %]</a>
-[% END %]
+  [% IF group_by == new_gb %]
+    <strong title="[% tprintf(loc('Currently grouped by %s'), text) %]">[% text %]</strong>
+  [% ELSE %]
+    <a href="[% c.uri_with({ group_by => new_gb }) %]" title="[% tprintf(loc('Group by %s'), text) %]">[% text %]</a>
+  [% END %]
 [% END %]
 
+<ul class="dashboard-options-tabs">
+    <li role="presentation"><span>[% loc('Group by:') %]</span><li>
+    <li>[% INCLUDE gb new_gb='category' text=loc('Category') %]</li>
+    <li>[% INCLUDE gb new_gb='state' text=loc('State') %]</li>
+    <li>[% INCLUDE gb new_gb='month' text=loc('Month') %]</li>
+    <li>[% INCLUDE gb new_gb='category+state' text=loc('Category and State') %]</li>
+    <li>[% INCLUDE gb new_gb='device+site' text=loc('Device and Site') %]</li>
+    <li class="pull-right"><a href="[% c.uri_with({ csv => 1 }) %]">[% loc('Export as CSV') %]</a></li>
+</ul>
+
 <table width="100%" id="overview">
-    <caption>
-        [% loc('Current state of filtered reports') %]
-        <p>
-        [% loc('Group by:') %]
-        [% INCLUDE gb new_gb='category' text=loc('Category') %]
-        | [% INCLUDE gb new_gb='state' text=loc('State') %]
-        | [% INCLUDE gb new_gb='month' text=loc('Month') %]
-        | [% INCLUDE gb new_gb='category+state' text=loc('Category and State') %]
-        | [% INCLUDE gb new_gb='device+site' text=loc('Device and Site') %]
-        </p>
-    </caption>
     <tr>
       <th></th>
       [% IF group_by == 'category+state' %]
diff --git a/web/cobrands/fixmystreet/dashboard.scss b/web/cobrands/fixmystreet/dashboard.scss
index 8d153d8e5..302afbf80 100644
--- a/web/cobrands/fixmystreet/dashboard.scss
+++ b/web/cobrands/fixmystreet/dashboard.scss
@@ -60,30 +60,6 @@
         }
     }
 
-    .filters {
-        @include clearfix();
-        background-color:#ffec99;
-        margin: 0 -1em 1em -1em;
-        border-top:#ffd000 solid 0.75em;
-        padding:0 1em;
-
-        p {
-            float: $left;
-            padding:0 1em;
-            max-width:25%;
-            font-size:0.75em;
-            color:#333333;
-        }
-
-        .no-label {
-            margin-top: 1.25em + 1.5em + 0.5em; // label line-height + margin-top + margin-bottom
-        }
-
-        select {
-            width:100%;
-        }
-    }
-
     hgroup {
         h2 {
             color:#737373;
diff --git a/web/cobrands/sass/_dashboard.scss b/web/cobrands/sass/_dashboard.scss
index 396d53d56..648baec01 100644
--- a/web/cobrands/sass/_dashboard.scss
+++ b/web/cobrands/sass/_dashboard.scss
@@ -25,7 +25,7 @@
     padding: 1em;
 
     @media (min-width: 48em) {
-        float: left;
+        float: $left;
         padding: 2em;
     }
 
@@ -78,19 +78,19 @@
     @include box-sizing(border-box);
 
     @media (min-width: 48em) {
-        padding-right: 20%;
+        padding-#{$right}: 20%;
     }
 
     .label {
-        float: left;
-        margin-right: 2em;
+        float: $left;
+        margin-#{$right}: 2em;
     }
 }
 .js .labelled-line-chart .label {
     @media (min-width: 48em) {
         position: absolute;
         margin-top: -1em;
-        margin-right: 0;
+        margin-#{$right}: 0;
     }
 }
 
@@ -150,13 +150,13 @@
 .dashboard-search__input {
     @include box-sizing(border-box);
     width: 80%;
-    float: left;
-    padding-right: 1em;
+    float: $left;
+    padding-#{$right}: 1em;
 }
 
 .dashboard-search__submit {
     width: 20%;
-    float: right;
+    float: $right;
 
     input {
         width: 100%;
@@ -217,3 +217,109 @@
         padding: 0.4em 0.8em;
     }
 }
+
+.filters {
+    @include clearfix();
+    background-color: mix(#fff, $primary, 60%);
+    margin: 0 -1em 1em -1em;
+    border-top: $primary solid 0.75em;
+    padding: 0 1em;
+
+    // No border-top when visually preceded by .dashboard-header
+    .dashboard-header + * & {
+        border-top: none;
+    }
+
+    // Quick fix for too much spacing when followed by .dashboard-item(s)
+    & + .dashboard-row {
+        margin-top: -1em;
+    }
+
+    p {
+        padding: 0 1em;
+        font-size: 0.75em;
+
+        @media (min-width: 48em) {
+            float: $left;
+            max-width: 25%;
+        }
+    }
+
+    .no-label {
+        margin-top: 1.25em + 1.5em + 0.5em; // label line-height + margin-top + margin-bottom
+    }
+
+    select {
+        width: 100%;
+    }
+
+    .pro-feature {
+        color: mix(#222, mix(#fff, $primary, 60%), 30%);
+        cursor: help;
+
+        label {
+            cursor: inherit;
+
+            &:after {
+                display: inline-block;
+                content: "PRO";
+                color: #fff;
+                background: mix(#222, mix(#fff, $primary, 60%), 30%);
+                border-radius: 0.3em;
+                padding: 0.2em 0.4em;
+                margin-#{$left}: 1em;
+                font-size: 0.8em;
+                line-height: 1em;
+            }
+        }
+    }
+
+    .form-control[disabled] {
+        border-color: #ccc;
+        color: #999;
+        box-shadow: none;
+    }
+}
+
+.dashboard-options-tabs {
+    @include clearfix();
+    @include list-reset-soft();
+    border-bottom: 1px solid #ddd;
+    margin-bottom: 2em;
+
+    li {
+        float: $left;
+    }
+
+    .pull-right {
+        float: $right;
+    }
+
+    a, span, strong {
+        display: inline-block;
+        padding: 0.4em 0.8em;
+    }
+
+    strong {
+        background: #fff;
+        border: 1px solid #ddd;
+        border-bottom-color: #fff;
+        border-radius: 0.3em 0.3em 0 0;
+        margin-bottom: -1px;
+    }
+}
+
+.dashboard-options-tabs--below {
+    margin-bottom: 0;
+    margin-top: 2em;
+    border-bottom: none;
+    border-top: 1px solid #ddd;
+
+    strong {
+        border-top-color: #fff;
+        border-bottom-color: #ddd;
+        border-radius: 0 0 0.3em 0.3em;
+        margin-bottom: 0;
+        margin-top: -1px;
+    }
+}