Merge pull request #603 from marcom-unimelb/fix-filtered-listing-para…

…m-encoding

Filtered Listing: fix styles + fix case of pre-select parameters

assets/targets/components/filtered-listings/00-overview.md

@@ -4,3 +4,5 @@ title: Filtered listings
 <div class="jumpnav"></div>
 
 This component provides a way to list and filter items. Two levels of categorisation are available: <strong>sections</strong> and <strong>tags</strong>. Every item must belong to exactly one section and one tag, and it is up to you to choose unique names for your sections and tags.
+
+<p class="alert-info">When <strong>naming sections and tags</strong>, we recommend that you use only <strong>lower-case letters</strong>, <strong>dashes</strong> and <strong>underscores</strong>. This will lead to more readable URLs if you end up using the <a href="#pre-select-filters">pre-selection feature</a> (e.g. <code>/page?section=example-section</code> instead of <code>/page?section=Example%20section</code>).</p>

assets/targets/components/filtered-listings/01-pre-select-filters.md

@@ -1,7 +1,9 @@
 <h2 id="pre-select-filters">Pre-select filters</h2>
 
-The <strong>tags</strong> filter can be pre-selected on page load by adding <code>?tags=&lt;tag-list&gt;</code> to the end of the URL, where <code>&lt;tag-list&gt;</code> is a coma-separated list of tags. For instance: <code><a href="?tags=nominavi,ludico">?tags=nominavi,ludico</a></code>.
+The <strong>tags</strong> filter can be pre-selected on page load by adding <code>?tags=&lt;tag-list&gt;</code> to the end of the URL, where <code>&lt;tag-list&gt;</code> is a coma-separated list of tags &mdash; e.g. <code><a href="?tags=nominavi,ludico">?tags=nominavi,ludico</a></code>.
 
-Similarly, the <strong>section</strong> filter can be pre-selected with <code>?section=&lt;section-name&gt;</code>. For instance: <code><a href="?section=section-3">?section=section-3</a></code>.
+The <strong>section</strong> filter can be pre-selected with <code>?section=&lt;section-name&gt;</code> &mdash; e.g. <code><a href="?section=section-3">?section=section-3</a></code>.
 
-You may combine both the <code>tags</code> and <code>section</code> parameters in the querystring: <code><a href="?tags=nominavi&section=section-3">?tags=nominavi&section=section-3</a></code>. If the name of a tag or section contains a <a href="https://en.wikipedia.org/wiki/Percent-encoding#Types_of_URI_characters">reserved character</a>, it must be encoded (e.g. <code>&amp;</code> must be replace with <code>%26</code>).
+You may of course use both parameters together: <code><a href="?tags=nominavi&section=section-3">?tags=nominavi&section=section-3</a></code>.
+
+<p class="alert-warning">Don't forget to encode any <a href="https://en.wikipedia.org/wiki/Percent-encoding#Types_of_URI_characters">reserved URI character</a> (e.g. replace <code>&amp;</code> with <code>%26</code>) &mdash; or better, <a href="https://en.wikipedia.org/wiki/Semantic_URL#Slug">slugify the name of your sections and tags</a>.</p>

assets/targets/components/filtered-listings/_filters.scss

@@ -21,7 +21,8 @@
   overflow: hidden;
 
   @include breakpoint(desktop) {
-    @include rem(padding-left, 15px);
+    padding-left: 0;
+    padding-right: 0;
   }
 
   strong {
@@ -57,16 +58,17 @@
       legend,
       label {
         @include rem(font-size, 15px);
-        @include rem(padding-bottom, 15px);
+        @include rem(padding, 0 0 15px);
         color: $white;
         display: block;
-        padding-top: 0;
       }
     }
 
     @include breakpoint(desktop) {
+      @include rem(padding-left, 30px);
+      @include rem(padding-right, 30px);
       float: left;
-      width: 75%;
+      width: 66.66%;
     }
   }
 
@@ -168,10 +170,11 @@
   }
 
   .right {
-    @include rem(padding-top, 15px);
+    @include rem(padding-top, 30px);
+    margin: 0;
 
-    div {
-      float: none;
+    & > div {
+      @include rem(padding-top, 3px);
 
       select {
         width: 100%;
@@ -185,15 +188,18 @@
 
     label {
       @include rem(font-size, 15px);
+      @include rem(line-height, 30px);
       @include rem(padding-bottom, 15px);
       display: block;
+      width: 100%;
     }
 
     @include breakpoint(desktop) {
+      @include rem(padding-right, 30px);
       float: right;
       margin: 0;
       padding-top: 0;
-      width: 25%;
+      width: 33.33%;
     }
   }
 }

assets/targets/components/filtered-listings/index.js

@@ -62,7 +62,7 @@ FilteredListing.prototype.parseQuery = function () {
   var i, query = window.location.search.substr(1).split('&');
   for (i = query.length - 1; i >= 0; i--) {
     var param = query[i].split("=");
-    var val = decodeURIComponent(param[1]).toLowerCase();
+    var val = decodeURIComponent(param[1]);
     switch (param[0]) {
       case 'section':
         params.section = val;