My Cards development

* Add cards due view
* Add input for selecting sort (not working)
* Add methods to `Utils` to save sort to local browser storage
*  CSS updates to make lists display horizontally within swimlanes

client/components/main/myCards.jade

@@ -1,9 +1,19 @@
 template(name="myCardsHeaderBar")
   h1
-    a.back-btn(href="{{pathFor 'home'}}")
-      i.fa.fa-chevron-left
+    //a.back-btn(href="{{pathFor 'home'}}")
+    //  i.fa.fa-chevron-left
     | {{_ 'my-cards'}}
 
+  .board-header-btns.left
+    a.board-header-btn.js-toggle-my-cards-choose-sort(title="{{_ 'my-cards-sort'}}")
+      i.fa.fa-caret-down
+      if $eq myCardsSort 'board'
+        i.fa.fa-th-large
+        | {{_ 'my-cards-sort-board'}}
+      if $eq myCardsSort 'dueAt'
+        i.fa.fa-calendar
+        | {{_ 'my-cards-sort-dueat'}}
+
 template(name="myCardsModalTitle")
   h2
     i.fa.fa-keyboard-o
@@ -11,20 +21,63 @@ template(name="myCardsModalTitle")
 
 template(name="myCards")
   .wrapper
-    each board in myBoards
-      .my-cards-board-wrapper
-        .board-title
-          +viewer
-            = board.title
-        each swimlane in board.mySwimlanes
-          .swimlane-title(class="{{#if swimlane.colorClass}}{{ swimlane.colorClass }}{{else}}swimlane-default-color{{/if}}")
+    if $eq myCardsSort 'board'
+      each board in myBoards
+        .my-cards-board-wrapper
+          .board-title
             +viewer
-              = swimlane.title
-          each list in swimlane.myLists
-            .my-cards-list-wrapper
-              .list-title(class=list.colorClass)
+              = board.title
+          each swimlane in board.mySwimlanes
+            .swimlane-title(class="{{#if swimlane.colorClass}}{{ swimlane.colorClass }}{{else}}swimlane-default-color{{/if}}")
+              +viewer
+                = swimlane.title
+            each list in swimlane.myLists
+              .my-cards-list-wrapper
+                .list-title(class=list.colorClass)
+                  +viewer
+                    = list.title
+                each card in list.myCards
+                  a.minicard-wrapper.card-title(href=card.absoluteUrl)
+                    +minicard(card)
+    else
+      .my-cards-dueat-list-wrapper
+        each card in myCardsList
+          .my-cards-card
+            a.minicard-wrapper.card-title(href=card.absoluteUrl)
+              +minicard(card)
+            ul.my-cards-context-list
+              li.my-cards-context(title="{{_ 'board'}}")
                 +viewer
-                  = list.title
-              each card in list.myCards
-                a.minicard-wrapper.card-title(href=card.absoluteUrl)
-                  +minicard(card)
+                  = card.board.title
+              li.my-cards-context
+                = ' '
+                | {{_ 'context-separator'}}
+                = ' '
+              li.my-cards-context(title="{{_ 'swimlane'}}")
+                +viewer
+                  = card.swimlane.title
+              li.my-cards-context
+                = ' '
+                | {{_ 'context-separator'}}
+                = ' '
+              li.my-cards-context(title="{{_ 'list'}}")
+                +viewer
+                  = card.list.title
+
+
+template(name="myCardsSortPopup")
+  ul.pop-over-list
+    li
+      //with "my-cards-sort-board"
+      a.js-my-cards-sort-board
+        i.fa.fa-th-large.colorful
+        | {{_ 'my-cards-sort-board'}}
+        if $eq Utils.myCardsSort "board"
+          i.fa.fa-check
+    li
+      //with "my-cards-sort-dueat"
+      a.js-my-cards-sort-dueat
+        i.fa.fa-calendar.colorful
+        | {{_ 'my-cards-sort-dueat'}}
+        if $eq Utils.myCardsSort "dueAt"
+          i.fa.fa-check