Reintroduce “nicetable” class for simple table styling

Useful for simple tables like the cookie lists on Privacy Policy pages.

6 files changed, 119 insertions, 37 deletions

diff --git a/templates/web/base/about/privacy.html b/templates/web/base/about/privacy.html
index a794cfadf..de0fee32c 100755
--- a/templates/web/base/about/privacy.html
+++ b/templates/web/base/about/privacy.html
@@ -31,9 +31,17 @@ this. We use this information to, for example, remember you have logged in so
 you don't need to do that on every page. Below, we list the cookies and
 services that this site can use.
 
-<table cellpadding=5>
-<tr align="left"><th scope="col">Name</th><th scope="col">Typical Content</th><th scope="col">Expires</th></tr>
-<tr><td>fixmystreet_app_session</td><td nowrap>A random unique identifier</td><td>When browser is closed, or four weeks if &ldquo;Keep me signed in&rdquo; is ticked</td></tr>
+<table class="nicetable">
+    <tr>
+        <th scope="col">Name</th>
+        <th scope="col">Typical Content</th>
+        <th scope="col">Expires</th>
+    </tr>
+    <tr>
+        <td>fixmystreet_app_session</td>
+        <td nowrap>A random unique identifier</td>
+        <td>When browser is closed, or four weeks if &ldquo;Keep me signed in&rdquo; is ticked</td>
+    </tr>
 </table>
 
 [% INCLUDE 'footer.html' pagefooter = 'yes' %]
diff --git a/templates/web/fixamingata/about/privacy.html b/templates/web/fixamingata/about/privacy.html
index 805ca5f00..134e494f2 100755
--- a/templates/web/fixamingata/about/privacy.html
+++ b/templates/web/fixamingata/about/privacy.html
@@ -41,9 +41,17 @@
 <p>Kakor används för att ge en besökare tillgång till olika funktioner. För att göra tjänsten lättare och mer användbara skickas små datafiler till din dator eller mobiltelefon. Dessa kallas för kakor och de flesta webbplatser använder dem. Informationen används för att, till exempel, komma ihåg tidigare inloggning, och för att mäta hur tjänsten används som underlag för förbättringar.</p>
 <p><a href="http://www.pts.se/sv/Bransch/Regler/Lagar/Lag-om-elektronisk-kommunikation/Cookies-kakor/">Om kakor och hur du kan hantera dem, Post- och telestyrelsen</a></p>
 <p>Nedan visas en lista med kakor som tjänsten använder.</p>
-<table cellpadding=5>
-<tr align="left"><th scope="col">Namn</th><th scope="col">Innehåll</th><th scope="col">Giltighet</th></tr>
-<tr><td>fixmystreet_app_session</td><td nowrap>A slumpvis sträng</td><td>Raderas när webbläsaren stängs, eller efter fyra veckor om &ldquo;Håll mig inloggad&rdquo; är valt</td></tr>
+<table class="nicetable">
+    <tr>
+        <th scope="col">Namn</th>
+        <th scope="col">Innehåll</th>
+        <th scope="col">Giltighet</th>
+    </tr>
+    <tr>
+        <td>fixmystreet_app_session</td>
+        <td nowrap>A slumpvis sträng</td>
+        <td>Raderas när webbläsaren stängs, eller efter fyra veckor om &ldquo;Håll mig inloggad&rdquo; är valt</td>
+    </tr>
 </table>
 
 [% INCLUDE 'footer.html' pagefooter = 'yes' %]
diff --git a/templates/web/fixmystreet-uk-councils/about/privacy.html b/templates/web/fixmystreet-uk-councils/about/privacy.html
index 3b077d29e..45735f062 100644
--- a/templates/web/fixmystreet-uk-councils/about/privacy.html
+++ b/templates/web/fixmystreet-uk-councils/about/privacy.html
@@ -64,19 +64,17 @@ you don't need to do that on every page, or to measure how people use the
 website so we can improve it and make sure it works properly. Below, we list
 the cookies and services that this site can use.
 
-<table cellpadding=5>
-<tr align="left">
-    <th scope="col">Name</th>
-    <th scope="col">Typical Content</th>
-    <th scope="col">Expires</th>
-</tr>
-
-<tr>
-    <td>fixmystreet_app_session</td>
-    <td nowrap>A random unique identifier</td>
-    <td>When browser is closed, or four weeks if &ldquo;Keep me signed in&rdquo; is ticked</td>
-</tr>
-
+<table class="nicetable">
+    <tr>
+        <th scope="col">Name</th>
+        <th scope="col">Typical Content</th>
+        <th scope="col">Expires</th>
+    </tr>
+    <tr>
+        <td>fixmystreet_app_session</td>
+        <td nowrap>A random unique identifier</td>
+        <td>When browser is closed, or four weeks if &ldquo;Keep me signed in&rdquo; is ticked</td>
+    </tr>
 </table>
 
 <h3>Measuring website usage (Google Analytics)</h3>
@@ -97,11 +95,27 @@ plugin for blocking Google Analytics</a>.
 
 <p>The cookies set by Google Analytics are as follows:
 
-<table cellpadding=5>
-<tr align="left"><th scope="col">Name</th><th scope="col">Typical Content</th><th scope="col">Expires</th></tr>
-<tr><td>_ga</td><td>Used to distinguish users</td><td>2 years</td></tr>
-<tr><td>_gat</td><d>Used to throtle request rate</td><td>10 minutes</td></tr>
-<tr><td>__utmx / __utmxx</td><td>Which variation of a page you are seeing if we are testing different versions to see which is best</td><td>2&nbsp;years</td></tr>
+<table class="nicetable">
+    <tr>
+        <th scope="col">Name</th>
+        <th scope="col">Typical Content</th>
+        <th scope="col">Expires</th>
+    </tr>
+    <tr>
+        <td>_ga</td>
+        <td>Used to distinguish users</td>
+        <td>2 years</td>
+    </tr>
+    <tr>
+        <td>_gat</td>
+        <td>Used to throttle request rate</td>
+        <td>10 minutes</td>
+    </tr>
+    <tr>
+        <td>__utmx / __utmxx</td>
+        <td>Which variation of a page you are seeing if we are testing different versions to see which is best</td>
+        <td>2&nbsp;years</td>
+    </tr>
 </table>
 
 <h4>Google’s Official Statement about Analytics Data</h4>
diff --git a/templates/web/fixmystreet.com/about/privacy.html b/templates/web/fixmystreet.com/about/privacy.html
index 24bf47ec8..8ed953cc9 100755
--- a/templates/web/fixmystreet.com/about/privacy.html
+++ b/templates/web/fixmystreet.com/about/privacy.html
@@ -374,19 +374,17 @@ you don’t need to do that on every page, or to measure how people use the
 website so we can improve it and make sure it works properly. Below, we list
 the cookies and services that this site can use.
 
-<table cellpadding=5>
-<tr align="left">
-    <th scope="col">Name</th>
-    <th scope="col">Typical Content</th>
-    <th scope="col">Expires</th>
-</tr>
-
-<tr>
-    <td>fixmystreet_app_session</td>
-    <td nowrap>A random unique identifier</td>
-    <td>When browser is closed, or four weeks if &ldquo;Keep me signed in&rdquo; is ticked</td>
-</tr>
-
+<table class="nicetable">
+    <tr>
+        <th scope="col">Name</th>
+        <th scope="col">Typical Content</th>
+        <th scope="col">Expires</th>
+    </tr>
+    <tr>
+        <td>fixmystreet_app_session</td>
+        <td nowrap>A random unique identifier</td>
+        <td>When browser is closed, or four weeks if &ldquo;Keep me signed in&rdquo; is ticked</td>
+    </tr>
 </table>
 
 <h3>Measuring website usage (Google Analytics)</h3>
diff --git a/web/cobrands/fixmystreet.com/_colours.scss b/web/cobrands/fixmystreet.com/_colours.scss
index 523d7b95d..b43c96791 100644
--- a/web/cobrands/fixmystreet.com/_colours.scss
+++ b/web/cobrands/fixmystreet.com/_colours.scss
@@ -24,4 +24,6 @@ $itemlist_item_background_hover: mix(#fff, $primary, 70%);
 
 $layout_front_stats_color: #222;
 
+$nicetable-stripe-background: #f3f3f3;
+
 $high-dpi-screen: '-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi';
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index ac7210c74..b6a20517c 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -2392,6 +2392,58 @@ a#geolocate_link.loading, .btn--geolocate.loading {
     vertical-align: -2px;
 }
 
+$nicetable-cell-padding: 0.6em 1.5em !default;
+$nicetable-border-color: #ccc !default;
+$nicetable-stripe-background: rgba($primary, 0.05) !default;
+$nicetable-hover-background: rgba($primary, 0.15) !default;
+
+.nicetable {
+    width: 100%;
+    margin-bottom: 1.5em;
+
+    td, th {
+        padding: $nicetable-cell-padding;
+        padding-#{$left}: 0;
+        border-bottom: 1px solid $nicetable-border-color;
+        text-align: $left;
+
+        &:last-child {
+            padding-#{$right}: 0;
+        }
+    }
+
+    // Give your .nicetable an extra .stripe class to stripe alternate rows.
+    &.stripe {
+        td, th {
+            padding: $nicetable-cell-padding;
+        }
+
+        tr:nth-child(even) {
+            background: $nicetable-stripe-background;
+        }
+    }
+
+    // Give your .nicetable an extra .hover class to enable row hover effect.
+    &.hover {
+        td, th {
+            padding: $nicetable-cell-padding;
+        }
+
+        tr:hover {
+            background: $nicetable-hover-background;
+        }
+
+        thead tr {
+            background: transparent;
+        }
+    }
+
+    // For table cells containing numbers (and their associated header cells).
+    .data {
+        text-align: $right;
+    }
+}
+
 @import "_admin";
 @import "_dropzone";
 @import "_multiselect";