incorporate new dashboard design

2 files changed, 135 insertions, 25 deletions

diff --git a/templates/web/default/dashboard/index.html b/templates/web/default/dashboard/index.html
index 308042d0d..c2bfa9ea3 100644
--- a/templates/web/default/dashboard/index.html
+++ b/templates/web/default/dashboard/index.html
@@ -1,39 +1,52 @@
-[% 
+[% extra_css = BLOCK %]
+	    <link rel="stylesheet" href="[% version('/cobrands/fixmystreet/dashboard.css') %]">
+[% END %]
+
+[%
     INCLUDE 'header.html'
         title = loc('Dashboard')
         robots = 'noindex, nofollow'
         bodyclass = 'fullwidthpage'
 %]
 
-<style>
-    th[scope=row] { text-align: left; }
-    tr.subtotal { background-color: #eee; }
-    #overview tr:nth-child(2) { background-color: #fee; }
-    select { width: auto; }
-</style>
-
 <form>
 
-<p>Ward: <select name="ward"><option value=''>All</option>
-    [% FOR w IN children.values.sort('name') %]
-        <option value="[% w.id %]"[% ' selected' IF w.id == ward %]>[% w.name %]</option>
-    [% END %]
-</select>
-
-<p>Report category: <select name="category"><option value=''>All</option>
-    [% FOR cat_op IN category_options %]
-        <option value='[% cat_op | html %]'[% ' selected' IF category == cat_op %]>[% cat_op | html %]</option>
-    [% END %]
-    </select>
-
-<p><input type="submit" value="Look up">
+<hgroup>
+    <h2>Reports, Statistics and Actions for</h2>
+    <h1>[% council.name %]</h1>
+</hgroup>
+
+<div class="filters">
+    <p>
+        <label for="ward">Ward:</label>
+        <select name="ward"><option value=''>All</option>
+            [% FOR w IN children.values.sort('name') %]
+                <option value="[% w.id %]"[% ' selected' IF w.id == ward %]>[% w.name %]</option>
+            [% END %]
+        </select>
+    </p>
+
+    <p>
+        <label for="category">Report category:</label>
+        <select name="category"><option value=''>All</option>
+            [% FOR cat_op IN category_options %]
+                <option value='[% cat_op | html %]'[% ' selected' IF category == cat_op %]>[% cat_op | html %]</option>
+            [% END %]
+        </select>
+    </p>
+
+    <p>
+        <input type="submit" value="Look up">
+    </p>
+
+    <br clear="all" />
+</div>
 
-<h2>Summary Statistics for [% council.name %]</h2>
 
 <table width="100%" id="overview">
     <tr>
-        <td>&nbsp;</td>
-        <th scope="col">WTD</th>
+        <th>&nbsp;</th>
+        <th scope="col"><abbr title="Week To Date">WTD</abbr></th>
         <th scope="col">Last 7 days</th>
         <th scope="col">Last 4 weeks</th>
         <th scope="col">YTD</th>
@@ -147,6 +160,6 @@
 
 [% BLOCK list %]
 [% FOR p IN list %]
-<li><a href="/report/[% p.id %]">[% p.title | html %]</a></li>
+<li><a href="/report/[% p.id %]">[% p.title | html %]</a> <date>[% p.confirmed.dmy('/') %]</date></li>
 [% END %]
 [% END %]
diff --git a/web/cobrands/fixmystreet/dashboard.scss b/web/cobrands/fixmystreet/dashboard.scss
new file mode 100644
index 000000000..bd241617e
--- /dev/null
+++ b/web/cobrands/fixmystreet/dashboard.scss
@@ -0,0 +1,97 @@
+    select {
+        width: auto;
+    }
+
+    #overview {
+        margin-top: 1em;
+
+        th[scope=col] {
+            font-size:0.8em;
+        }
+
+        tr:nth-child(2) {
+            background-color:#fee;
+        }
+    }
+
+    th {
+        text-align:left;
+        &[scope=col] {
+            border-left:1px solid #ccc;
+            padding:10px 0 10px 10px;
+            font-weight:bold;
+        }
+
+        &[scope=row] {
+            font-weight: normal;text-align:left;
+            border-top:1px solid #ddd;
+            padding-left:10px;
+        }
+
+        abbr[title] {
+            border: none;
+        }
+    }
+
+    td {
+        width:10%;
+        border-left:1px solid #ccc;
+        border-top:1px solid #ddd;
+        padding-left:10px;
+    }
+
+    tr.subtotal {
+        background-color:#eee;
+        border-bottom:20px solid white;
+        border-top:2px solid #aaa;
+        font-weight: bold;
+
+        th {
+            font-weight: bold;
+        }
+    }
+
+
+    #reports{
+        th {
+            padding-left: 20px;
+            border-bottom: none;
+        }
+        date {
+            font-size: 0.7em;
+            color: #ccc;
+        }
+    }
+
+    .filters{
+        background-color:#ffec99;
+        margin:0 -1em;
+        border-top:#ffd000 solid 0.75em;
+        padding:0 1em;
+
+        p {
+            float:left;
+            padding:0 1em;
+            width:25%;
+            font-size:0.75em;
+            color:#333333;
+            input {
+                margin-top: 2.5em;
+            }
+        }
+        select {
+            width:100%;
+        }
+    }
+
+    hgroup {
+        h2 {
+            color:#737373;
+            font-size:1.25em;
+            margin-bottom:0.5em;
+        }
+        h1 {
+            color:#333;
+            font-size:2.25em;
+        }
+    }