Make Due Date layout nicer on minicard. Thanks to whittssg2!

2 files changed, 20 insertions, 21 deletions

diff --git a/client/components/cards/minicard.jade b/client/components/cards/minicard.jade
index 8b46ee74..5409ec62 100644
--- a/client/components/cards/minicard.jade
+++ b/client/components/cards/minicard.jade
@@ -7,6 +7,13 @@ template(name="minicard")
         each labels
           .minicard-label(class="card-label-{{color}}" title="{{name}}")
     .minicard-title= title
+    .dates
+      if startAt
+          .date
+            +minicardStartDate
+      if dueAt
+          .date
+            +minicardDueDate
     if members
       .minicard-members.js-minicard-members
         each members
@@ -23,14 +30,7 @@ template(name="minicard")
         .badge
           span.badge-icon.fa.fa-paperclip
           span.badge-text= attachments.count
-      if startAt
-        .badge
-          +minicardStartDate
-      if dueAt
-        .badge
-          +minicardDueDate
       if checklists.count
         .badge(class="{{#if checklistFinished}}is-finished{{/if}}")
           span.badge-icon.fa.fa-check-square-o
           span.badge-text.check-list-text {{checklistFinishedCount}}/{{checklistItemCount}}
-
diff --git a/client/components/cards/minicard.styl b/client/components/cards/minicard.styl
index 12a89785..a6aad896 100644
--- a/client/components/cards/minicard.styl
+++ b/client/components/cards/minicard.styl
@@ -77,7 +77,12 @@
       height: @width
       border-radius: 2px
       margin-left: 3px
-
+  .dates
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+  .date
+    margin-right: 3px
   .badges
     float: left
     margin-top: 7px
@@ -91,25 +96,20 @@
       margin-right: 11px
       margin-bottom: 3px
       font-size: 0.9em
-      
+      &.is-finished
+         background: #3cb500
+         padding: 0px 3px
+         border-radius: 3px
+         color: white
+
       &:last-of-type
         margin-right: 0
 
       .badge-icon,
       .badge-text
         vertical-align: middle
-
-      &.is-finished
-        background: #3cb500
-        padding: 0px 3px
-        border-radius: 3px
-        color: white
-
-      .badge-icon,
-      .badge-text
-        vertical-align: middle//didn't figure why use top, it'd be easier to fill bg if it's middle. This was introduced in commit "91cfcf7b12b5e7c137c2e765b2c378dde6b82966" & "* Improve the design of the minicards badges" was mentioned.
         &.badge-comment
-          margin-bottom: 0.1rem
+           margin-bottom: 0.1rem
 
       .badge-text
         font-size: 0.9em
@@ -119,7 +119,6 @@
         padding-left: 0px
         line-height: 12px
 
-
   .minicard-members
     float: right
     margin: 2px -8px -2px 0