Merge branch 'develop' into 9796-keyboard-a11y

website/client/components/tasks/task.vue

@@ -20,7 +20,7 @@
               v-if="isUser && !isRunningYesterdailies",
               :right="task.type === 'reward'",
               ref="taskDropdown",
-              v-b-tooltip.hover.top="$t('showMore')"
+              v-b-tooltip.hover.top="$t('options')"
             )
               div(slot="dropdown-toggle", draggable=false)
                 .svg-icon.dropdown-icon(v-html="icons.menu")
@@ -46,7 +46,7 @@
             v-markdown="task.notes",
             :class="{'has-checklist': task.notes && hasChecklist}",
           )
-        .checklist(v-if="canViewchecklist")
+        .checklist(v-if="canViewchecklist", :class="{isOpen: !task.collapseChecklist}")
           .d-inline-flex
             .collapse-checklist.d-flex.align-items-center.expand-toggle(
               v-if="isUser",
@@ -94,7 +94,7 @@
               .tags-popover
                 .d-flex.align-items-center.tags-container
                   .tags-popover-title(v-once) {{ `${$t('tags')}:` }}
-                  .tag-label(v-for="tag in getTagsFor(task)") {{tag}}
+                  .tag-label(v-for="tag in getTagsFor(task)", v-markdown="tag")
 
       // Habits right side control
       .right-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.down.bg")
@@ -141,6 +141,11 @@
     min-width: 0px;
     overflow-wrap: break-word;
 
+    // markdown p-tag, can't find without /deep/
+    /deep/ p {
+      margin-bottom: 0;
+    }
+
     &.has-notes {
       padding-bottom: 4px;
     }
@@ -234,7 +239,7 @@
     overflow-wrap: break-word;
 
     &.has-checklist {
-      padding-bottom: 8px;
+      padding-bottom: 2px;
     }
   }
 
@@ -259,19 +264,25 @@
   }
 
   .checklist {
-    margin-bottom: 2px;
+    &.isOpen {
+      margin-bottom: 2px;
+    }
+
     margin-top: -3px;
   }
 
   .collapse-checklist {
     padding: 2px 6px;
-    margin-bottom: 9px;
     border-radius: 1px;
     background-color: $gray-600;
     font-size: 10px;
     line-height: 1.2;
     text-align: center;
     color: $gray-200;
+    margin-bottom: 9px;
+
+    &.open {
+    }
 
     span {
       margin: 0px 4px;
@@ -290,7 +301,7 @@
     margin-bottom: -3px;
     min-height: 0px;
     width: 100%;
-    margin-left: 8px;
+    margin-left: 0;
     padding-right: 20px;
     overflow-wrap: break-word;
 
@@ -307,6 +318,7 @@
       margin-left: 6px;
       padding-top: 0px;
       min-width: 0px;
+      width: 100%;
     }
   }
 
@@ -431,7 +443,7 @@
     border-left: none;
   }
 
-  .task-control, .reward-control {
+  .task-control:not(.task-disabled-habit-control-inner), .reward-control {
     align-items: center;
     cursor: pointer;
     margin: 0;
@@ -501,6 +513,11 @@
       white-space: nowrap;
       margin-top: 3px;
       margin-bottom: 3px;
+
+      // Applies to v-markdown generated p tag.
+      p {
+        margin-bottom: 0px;
+      }
     }
   }
 </style>