Client Tasks (#8883)

* client tasks: fix styles and add markdown rendering

* more style fixes

* client: tasks fixes

website/client/app.vue

@@ -1,12 +1,12 @@
 <template lang="pug">
-#app
+#app.h-100
   router-view(v-if="!isUserLoggedIn || isStaticPage")
   template(v-else)
     #loading-screen.h-100.w-100.d-flex.justify-content-center.align-items-center(v-if="!isUserLoaded")
       p Loading...
     template(v-else)
       app-menu
-      .container-fluid
+      .container-fluid.h-100
         app-header
         router-view
 </template>

website/client/assets/scss/page.scss

@@ -4,6 +4,9 @@ html {
 
 html, body {
   height: calc(100% - 56px); // 56px is the menu
+}
+
+body {
   background: $gray-700;
 }
 

website/client/assets/scss/task.scss

@@ -88,7 +88,7 @@
   &-daily-todo-disabled {
     background: $gray-500;
 
-    &-control {
+    &-control-daily-todo {
       background: $gray-400;
       color: $gray-200;
     }
@@ -106,7 +106,7 @@
     background: $gray-700;
     color: rgba(0, 0, 0, 0.12);
 
-    &-control {
+    &-control-habit {
       color: rgba(0, 0, 0, 0.12) !important;
       border: 1px solid rgba(0, 0, 0, 0.12);
     }

website/client/components/tasks/column.vue

@@ -32,15 +32,17 @@
   padding-bottom: 0.1px;
   position: relative;
   height: calc(100% - 64px);
+  overflow: auto;
 }
 
 .bottom-gradient {
   position: absolute;
   bottom: 0px;
-  left: -0px;
+  left: 0px;
   height: 42px;
   background-image: linear-gradient(to bottom, rgba($gray-10, 0), rgba($gray-10, 0.24));
   width: 100%;
+  z-index: 99;
 }
 
 .tasks-column-title {

website/client/components/tasks/task.vue

@@ -5,13 +5,16 @@
     .task-control.habit-control(:class="controlClass.up + '-control-habit'")
       .svg-icon.positive(v-html="icons.positive")
   // Dailies and todos left side control
-  .left-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'daily' || task.type === 'todo'", :class="controlClass")
+  .left-control.d-flex.justify-content-center(v-if="task.type === 'daily' || task.type === 'todo'", :class="controlClass")
     .task-control.daily-todo-control(:class="controlClass + '-control-daily-todo'")
       .svg-icon.check(v-html="icons.check", v-if="task.completed")
   // Task title, description and icons
   .task-content(:class="contentClass")
-    h3.task-title(:class="{ 'has-notes': task.notes }") {{task.text}}
-    .task-notes.small-text {{task.notes}}
+    h3.task-title(
+      :class="{ 'has-notes': task.notes }", 
+      v-html="$options.filters.markdown(task.text)"
+    )
+    .task-notes.small-text(v-html="$options.filters.markdown(task.notes)")
     .icons.small-text.d-flex.align-items-center
       .d-flex.align-items-center(v-if="task.type === 'todo' && task.date", :class="{'due-overdue': isDueOverdue}")
         .svg-icon.calendar(v-html="icons.calendar")
@@ -132,7 +135,7 @@
 .check.svg-icon {
   width: 12.3px;
   height: 9.8px;
-  margin: 8px;
+  margin: 9px 8px;
 }
 
 .left-control, .right-control {
@@ -174,6 +177,7 @@
 }
 
 .daily-todo-control {
+  margin-top: 16px;
   border-radius: 2px;
 }
 

website/client/components/tasks/user.vue

@@ -17,6 +17,7 @@
 
 .user-tasks-page {
   padding-top: 31px;
+  height: calc(100% - 235px); // header + padding
 }
 
 .tasks-navigation {

website/client/filters/markdown.js

@@ -0,0 +1,5 @@
+import habiticaMarkdown from 'habitica-markdown';
+
+export default function markdown (text) {
+  return habiticaMarkdown.render(text);
+}

website/client/filters/registerGlobals.js

@@ -2,7 +2,9 @@ import Vue from 'vue';
 import round from './round';
 import floor from './floor';
 import roundBigNumber from './roundBigNumber';
+import markdown from './markdown';
 
 Vue.filter('round', round);
 Vue.filter('floor', floor);
 Vue.filter('roundBigNumber', roundBigNumber);
+Vue.filter('markdown', markdown);