Reformat My Cards page

* make the page more visually pleasing
* user +viewer to display Markdown in titles
* modify `colorClass()` in Lists model to return 'list-header-{color}'
* modify `colorClass()` of Swimlanes model to return 'swimlane-{color}'

client/components/lists/listHeader.jade

@@ -1,7 +1,7 @@
 template(name="listHeader")
   .list-header.js-list-header(
     class="{{#if limitToShowCardsCount}}list-header-card-count{{/if}}"
-    class="{{#if colorClass}}list-header-{{colorClass}}{{/if}}")
+    class=colorClass)
     +inlinedForm
       +editListTitleForm
     else

client/components/main/myCards.jade

@@ -12,17 +12,19 @@ template(name="myCardsModalTitle")
 template(name="myCards")
   .wrapper
     each board in cardsFind
-      .board-title
+      .my-cards-board-wrapper
-        | {{_ 'board' }}:
+        .board-title
-        = board.title
+          +viewer
-      each swimlane in board.swimlanes
+            = board.title
-        .swimlane-title
+        each swimlane in board.swimlanes
-          | {{_ 'swimlane' }}:
+          .swimlane-title(class=swimlane.colorClass)
-          = swimlane.title
+            +viewer
-        each list in swimlane.lists
+              = swimlane.title
-          .list-title
+          each list in swimlane.lists
-            | {{_ 'list' }}:
+            .my-cards-list-wrapper
-            = list.title
+              .list-title(class=list.colorClass)
-          each card in list.cards
+                +viewer
-            a.minicard-wrapper.card-title(href="{{pathFor 'card' boardId=board.id slug=board.slug cardId=card._id }}")
+                  = list.title
-              +minicard(card)
+              each card in list.cards
+                a.minicard-wrapper.card-title(href=card.absoluteUrl)
+                  +minicard(card)

client/components/main/myCards.js

@@ -69,6 +69,7 @@ BlazeComponent.extendComponent({
           l = {
             _id: card.listId,
             title: 'undefined list',
+            colorClass: '',
           };
         }
         // eslint-disable-next-line no-console
@@ -76,6 +77,7 @@ BlazeComponent.extendComponent({
         list = {
           id: l._id,
           title: l.title,
+          colorClass: l.colorClass(),
           cards: [card],
         };
         newList = true;
@@ -87,6 +89,7 @@ BlazeComponent.extendComponent({
         if (!s) {
           s = {
             _id: card.swimlaneId,
+            colorClass: '',
             title: 'undefined swimlane',
           };
         }
@@ -94,6 +97,9 @@ BlazeComponent.extendComponent({
         // console.log('swimlane:', s);
         swimlane = {
           id: s._id,
+          colorClass: s.colorClass()
+            ? s.colorClass()
+            : 'swimlane-default-color',
           title: s.title,
           lists: [list],
         };
@@ -107,6 +113,7 @@ BlazeComponent.extendComponent({
         // console.log('board:', b, b._id, b.title);
         board = {
           id: b._id,
+          colorClass: b.colorClass(),
           title: b.title,
           slug: b.slug,
           swimlanes: [swimlane],

client/components/main/myCards.styl

@@ -19,22 +19,58 @@
       font-size: 1.4em
       margin: 5px
 
+.my-cards-board-wrapper
+  border-radius: 8px
+  //padding: 0.5rem
+  max-width: 400px
+  border-width: 8px
+  border-color: grey
+  border-style: solid
+  margin-bottom: 2rem
+  margin-right: auto
+  margin-left: auto
+
 .board-title
   font-size: 1.4rem
   font-weight: bold
+  padding: 0.5rem
+  background-color: grey
+  color: white
 
 .swimlane-title
-  font-size: 1.2rem
+  font-size: 1.1rem
   font-weight: bold
-  margin-left: 1em
+  padding: 0.5rem
-  margin-top: 10px
+  padding-bottom: 0.4rem
+  margin-top: 0
+  margin-bottom: 0.5rem
+  //border-top: black 1px solid
+  //border-bottom: black 1px solid
+  text-align: center
+
+.swimlane-default-color
+  background-color: lightgrey
 
 .list-title
-  margin-top: 5px
   font-weight: bold
-  margin-left: 1.6rem
+  font-size: 1.1rem
+  //padding-bottom: 0
+  //margin-bottom: 0
+  text-align: center
+  margin-bottom: 0.7rem
+
+.list-color-bar
+  //height: 0.3rem
+  margin-bottom: 0.3rem
+  margin-top: 0
+  padding-top: 0
+
+.my-cards-list-wrapper
+  margin: 1rem
+  margin-top: 1rem
+  border-radius: 5px
+  padding: 1.5rem
+  padding-top: 0.75rem
 
 .card-title
   margin-top: 5px
-  margin-left: 1.8rem
-  max-width: 350px;

models/lists.js

@@ -257,7 +257,7 @@ Lists.helpers({
   },
 
   colorClass() {
-    if (this.color) return this.color;
+    if (this.color) return `list-header-${this.color}`;
     return '';
   },
 

models/swimlanes.js

@@ -216,7 +216,7 @@ Swimlanes.helpers({
   },
 
   colorClass() {
-    if (this.color) return this.color;
+    if (this.color) return `swimlane-${this.color}`;
     return '';
   },
 

server/publications/boards.js

@@ -27,6 +27,7 @@ Meteor.publish('boards', function() {
     {
       fields: {
         _id: 1,
+        boardId: 1,
         archived: 1,
         slug: 1,
         title: 1,
@@ -62,7 +63,9 @@ Meteor.publish('mySwimlanes', function() {
       fields: {
         _id: 1,
         title: 1,
+        boardId: 1,
         type: 1,
+        color: 1,
         sort: 1,
       },
       // sort: {
@@ -91,7 +94,10 @@ Meteor.publish('myLists', function() {
     {
       fields: {
         _id: 1,
+        boardId: 1,
+        swimlaneId: 1,
         title: 1,
+        color: 1,
         type: 1,
         sort: 1,
       },