fixes Tasks UI (#11036)

* show grabbing cursor while dragging

* 40px height search + tags button

* remove margin of task-title markdown-p-tag

* remove pointer on disabled task-controls

* show `Options` instead of  `Show More`

* remove margin of checklist items

* remove space between notes and checklist

website/client/components/tasks/column.vue

@@ -37,8 +37,9 @@
     draggable.sortable-tasks(
       ref="tasksList",
       @update='taskSorted',
+      @start="isDragging(true)",
+      @end="isDragging(false)",
       :options='{disabled: activeFilter.label === "scheduled", scrollSensitivity: 64}',
-      class="sortable-tasks"
     )
       task(
         v-for="task in taskList",
@@ -49,12 +50,11 @@
         :group='group',
       )
     template(v-if="hasRewardsList")
-      draggable(
+      draggable.reward-items(
         ref="rewardsList",
         @update="rewardSorted",
         @start="rewardDragStart",
         @end="rewardDragEnd",
-        class="reward-items",
       )
         shopItem(
           v-for="reward in inAppRewards",
@@ -76,6 +76,9 @@
 <style lang="scss" scoped>
   @import '~client/assets/scss/colors.scss';
 
+  /deep/ .draggable-cursor {
+    cursor: grabbing;
+  }
 
   .tasks-column {
     min-height: 556px;
@@ -89,7 +92,6 @@
     margin-top: 16px;
   }
 
-
   .reward-items {
     @supports (display: grid) {
       display: grid;
@@ -335,6 +337,7 @@ export default {
       showPopovers: true,
 
       selectedItemToBuy: {},
+      dragging: false,
     };
   },
   created () {
@@ -521,9 +524,11 @@ export default {
     rewardDragStart () {
       // We need to stop popovers from interfering with our dragging
       this.showPopovers = false;
+      this.isDragging(true);
     },
     rewardDragEnd () {
       this.showPopovers = true;
+      this.isDragging(false);
     },
     quickAdd (ev) {
       // Add a new line if Shift+Enter Pressed
@@ -678,6 +683,14 @@ export default {
         this.error(e.message);
       }
     },
+    isDragging (dragging) {
+      this.dragging = dragging;
+      if (dragging) {
+        document.documentElement.classList.add('draggable-cursor');
+      } else {
+        document.documentElement.classList.remove('draggable-cursor');
+      }
+    },
   },
 };
 </script>

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")
@@ -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;
     }
@@ -229,7 +234,7 @@
     overflow-wrap: break-word;
 
     &.has-checklist {
-      padding-bottom: 8px;
+      padding-bottom: 2px;
     }
   }
 
@@ -285,7 +290,7 @@
     margin-bottom: -3px;
     min-height: 0px;
     width: 100%;
-    margin-left: 8px;
+    margin-left: 0;
     padding-right: 20px;
     overflow-wrap: break-word;
 
@@ -427,7 +432,7 @@
     border-left: none;
   }
 
-  .task-control, .reward-control {
+  .task-control:not(.task-disabled-habit-control-inner), .reward-control {
     cursor: pointer;
   }
 

website/client/components/tasks/user.vue

@@ -12,7 +12,7 @@
       .col-12.col-md-4.offset-md-4
         .d-flex
           input.form-control.input-search(type="text", :placeholder="$t('search')", v-model="searchText")
-          button.btn.btn-secondary.dropdown-toggle.ml-2.d-flex.align-items-center(
+          button.btn.btn-secondary.dropdown-toggle.ml-2.d-flex.align-items-center.search-button(
             type="button",
             @click="toggleFilterPanel()",
             :class="{active: selectedTags.length > 0}",
@@ -110,6 +110,10 @@
     padding-top: 16px;
   }
 
+  .input-search, .search-button {
+    height: 40px;
+  }
+
   .tasks-navigation {
     margin-bottom: 20px;
   }

website/common/locales/en/generic.json

@@ -34,6 +34,7 @@
   "saveEdits": "Save Edits",
   "showMore": "Show More",
   "showLess": "Show Less",
+  "options": "Options",
 
   "expandToolbar": "Expand Toolbar",
   "collapseToolbar": "Collapse Toolbar",