merge negue-ui-fixes into develop

Squashed commit of the following:

commit d0628da7557e718b4d144283949f6572718d9b45
Author: negue <eugen.bolz@gmail.com>
Date:   Fri Mar 15 19:34:39 2019 +0100

    fix quest-tooltip padding/sizes

commit c16bc0fe4521e01520628ddc84af54930b15e066
Merge: 24e3fe2a6 163f31688
Author: negue <eugen.bolz@gmail.com>
Date:   Fri Mar 15 18:58:51 2019 +0100

    Merge branch 'fix/quest-tooltip-cells' into negue-ui-fixes

commit 24e3fe2a6c8e384722d95f7edd9ce9e4ce16960c
Author: negue <eugen.bolz@gmail.com>
Date:   Fri Mar 15 18:49:47 2019 +0100

    use item margin instead of container padding

commit 03ab975193b2007e24fcbb971fc7d4169bfb3ac7
Author: negue <eugen.bolz@gmail.com>
Date:   Thu Mar 14 21:41:43 2019 +0100

    fix input heights

commit 3aa18f1105a02655066e10a82cf53be9340a6bf1
Author: negue <eugen.bolz@gmail.com>
Date:   Thu Mar 14 20:58:22 2019 +0100

    revert margin-bottom on checklist

commit d8f533fda1d3833ab2f4aeb3bd8001d4a7881e8b
Merge: fbd01ab79 7d45dcfee
Author: Sabe Jones <sabrecat@gmail.com>
Date:   Thu Mar 14 11:10:34 2019 -0500

    Merge branch 'fix/shops-ui' into negue-ui-fixes

commit fbd01ab79d5ea8144c191cd51a9c11216418493a
Merge: 65517d259 546e260e3
Author: Sabe Jones <sabrecat@gmail.com>
Date:   Thu Mar 14 11:09:03 2019 -0500

    Merge branch 'fix/more-ui' into negue-ui-fixes

commit 65517d25947144f57b84fad84ce709ac7d008119
Merge: 5e935230a 2dcec78a4
Author: Sabe Jones <sabrecat@gmail.com>
Date:   Thu Mar 14 11:08:20 2019 -0500

    Merge branch 'fix/tasks-ui' into negue-ui-fixes

commit 546e260e36
Author: negue <eugen.bolz@gmail.com>
Date:   Sat Mar 9 23:13:54 2019 +0100

    fix checkbox check mark

commit 46ea2010f8
Author: negue <eugen.bolz@gmail.com>
Date:   Sat Mar 9 22:48:20 2019 +0100

    remove bottom margin on a collapsed checklist

commit 7d45dcfee5
Author: negue <eugen.bolz@gmail.com>
Date:   Wed Mar 6 22:45:09 2019 +0100

    fix star/empty colors - fix quest layout - countBadge z-index

commit f9b9e75c18
Author: negue <eugen.bolz@gmail.com>
Date:   Mon Mar 4 20:14:49 2019 +0100

    shops - timeTravelers: refactor filter logic

commit 6d3e9e0de0
Author: negue <eugen.bolz@gmail.com>
Date:   Mon Mar 4 20:06:02 2019 +0100

    shops-seasonal: refactor filter logic

commit aa2949e9d1
Author: negue <eugen.bolz@gmail.com>
Date:   Mon Mar 4 19:54:23 2019 +0100

    shops - quest: refactor filter logic + quest items margins

commit ad62b7a358
Author: negue <eugen.bolz@gmail.com>
Date:   Mon Mar 4 19:50:51 2019 +0100

    shop: equipment-cards background + market filter logic (as other pages)

commit 2dcec78a4a
Author: negue <eugen.bolz@gmail.com>
Date:   Wed Feb 27 21:02:10 2019 +0100

    remove space between notes and checklist

commit 31fab9b66d
Author: negue <eugen.bolz@gmail.com>
Date:   Wed Feb 27 20:45:59 2019 +0100

    remove margin of checklist items

commit 28b134a19b
Author: negue <eugen.bolz@gmail.com>
Date:   Wed Feb 27 20:33:43 2019 +0100

    show `Options` instead of  `Show More`

commit cafcfb6112
Author: negue <eugen.bolz@gmail.com>
Date:   Wed Feb 27 20:30:22 2019 +0100

    remove pointer on disabled task-controls

commit 7acbcc424b
Author: negue <eugen.bolz@gmail.com>
Date:   Wed Feb 27 20:25:36 2019 +0100

    remove margin of task-title markdown-p-tag

commit f667ab957b
Author: negue <eugen.bolz@gmail.com>
Date:   Wed Feb 27 20:25:16 2019 +0100

    40px height search + tags button

commit 2080ecb7e8
Author: negue <eugen.bolz@gmail.com>
Date:   Wed Feb 27 20:24:35 2019 +0100

    show grabbing cursor while dragging

commit 163f316889
Author: negue <eugen.bolz@gmail.com>
Date:   Fri Feb 15 23:26:40 2019 +0100

    replace the questInfo to use table-like behavior, expands to the content

website/client/assets/scss/form.scss

@@ -159,7 +159,7 @@ $bg-disabled-control: #34303a;
       width: 18px;
       height: 18px;
       background-image: url(~client/assets/svg/for-css/checkbox-white.svg);
-      background-size: 75% 75%;
+      background-size: 13px 10px;
     }
 
     &:active~.custom-control-label::before {

website/client/components/shops/quests/index.vue

@@ -52,11 +52,6 @@
                 :popoverPosition="'top'",
                 @click="selectItem(item)"
               )
-                template(slot="popoverContent", slot-scope="ctx")
-                  div.questPopover
-                    h4.popover-content-title {{ item.text }}
-                    questInfo(:quest="item")
-
                 template(slot="itemBadge", slot-scope="ctx")
                   span.badge.badge-pill.badge-item.badge-svg(
                     :class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.item.pinned}",
@@ -250,7 +245,7 @@
       border-radius: 2px;
       background-color: #edecee;
       display: inline-block;
-      padding: 8px;
+      padding: 0;
       margin-right: 12px;
     }
 
@@ -258,9 +253,8 @@
       margin-bottom: 0;
     }
 
-    .items > div:not(:last-of-type) {
+    .items > div {
-      margin-right: 16px;
+      margin: 8px;
-      margin-bottom: 16px;
     }
   }
 

website/client/components/shops/quests/questInfo.vue

@@ -1,41 +1,60 @@
 <template lang="pug">
 .row(:class="{'small-version': smallVersion}")
-  dl
+  .table-row(v-if="quest.collect")
-  template(v-if="quest.collect")
+    dt {{ $t('collect') + ':' }}
-    dt(:class="smallVersion ? 'col-3' : 'col-4'") {{ $t('collect') + ':' }}
+    dd
-    dd.col-8
       div(v-for="(collect, key) of quest.collect")
         span {{ collect.count }} {{ getCollectText(collect) }}
 
-  template(v-if="quest.boss")
+  .table-row(v-if="quest.boss")
-    dt(:class="smallVersion ? 'col-3' : 'col-4'") {{ $t('bossHP') + ':' }}
+    dt {{ $t('bossHP') + ':' }}
-    dd.col-8 {{ quest.boss.hp }}
+    dd {{ quest.boss.hp }}
 
-  dt(:class="smallVersion ? 'col-3' : 'col-4'") {{ $t('difficulty') + ':' }}
+  .table-row
-  dd.col-8
+    dt {{ $t('difficulty') + ':' }}
-    .svg-icon.inline(
+    dd
-      v-for="star of stars()", v-html="icons[star]",
+      .svg-icon.inline(
-      :class="smallVersion ? 'icon-12' : 'icon-16'",
+        v-for="star of stars()", v-html="icons[star]",
-    )
+        :class="smallVersion ? 'icon-12' : 'icon-16'",
+      )
 </template>
 
 <style lang="scss" scoped>
 @import '~client/assets/scss/colors.scss';
 
+.row {
+  display: table;
+  color: #E1E0E3;
+  margin: 0;
+}
+
+.table-row {
+  display: table-row;
+  margin-bottom: 4px;
+}
+
+dd {
+  height: 24px;
+  padding-left: 1em;
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+
+dt, dd {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+dt, dd, dd > * {
+  text-align: left;
+}
+
 dt {
   font-size: 1.3em;
   line-height: 1.2;
   color: $gray-50;
 }
 
-.col-8 {
-  text-align: left;
-}
-
-.col-8:not(:last-child) {
-  margin-bottom: 4px;
-}
-
 .svg-icon {
   margin-right: 4px;
 }

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")
@@ -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",
@@ -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;
     }
   }
 
@@ -254,19 +259,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;
@@ -285,7 +296,7 @@
     margin-bottom: -3px;
     min-height: 0px;
     width: 100%;
-    margin-left: 8px;
+    margin-left: 0;
     padding-right: 20px;
     overflow-wrap: break-word;
 
@@ -427,7 +438,7 @@
     border-left: none;
   }
 
-  .task-control, .reward-control {
+  .task-control:not(.task-disabled-habit-control-inner), .reward-control {
     cursor: pointer;
   }
 

website/client/components/tasks/taskModal.vue

@@ -259,6 +259,10 @@
       font-weight: bold;
     }
 
+    .input-group > * {
+      height: 40px;
+    }
+
     input, textarea {
       border: none;
       background: rgba(0, 0, 0, 0.24);

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",