From 89ee8b164824a140025f3674323e93bedf8c05e7 Mon Sep 17 00:00:00 2001 From: Matteo Pagliazzi Date: Wed, 19 Jul 2017 21:02:40 +0200 Subject: [PATCH] Client Tasks (#8883) * client tasks: fix styles and add markdown rendering * more style fixes * client: tasks fixes --- website/client/app.vue | 4 ++-- website/client/assets/scss/page.scss | 3 +++ website/client/assets/scss/task.scss | 4 ++-- website/client/components/tasks/column.vue | 4 +++- website/client/components/tasks/task.vue | 12 ++++++++---- website/client/components/tasks/user.vue | 1 + website/client/filters/markdown.js | 5 +++++ website/client/filters/registerGlobals.js | 4 +++- 8 files changed, 27 insertions(+), 10 deletions(-) create mode 100644 website/client/filters/markdown.js diff --git a/website/client/app.vue b/website/client/app.vue index 2d0feaaf89..eb1b414414 100644 --- a/website/client/app.vue +++ b/website/client/app.vue @@ -1,12 +1,12 @@ diff --git a/website/client/assets/scss/page.scss b/website/client/assets/scss/page.scss index ea33ee8e83..7f3bf56847 100644 --- a/website/client/assets/scss/page.scss +++ b/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; } diff --git a/website/client/assets/scss/task.scss b/website/client/assets/scss/task.scss index 805cdec48d..d780f37df5 100644 --- a/website/client/assets/scss/task.scss +++ b/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); } diff --git a/website/client/components/tasks/column.vue b/website/client/components/tasks/column.vue index e26edd8455..edec01236e 100644 --- a/website/client/components/tasks/column.vue +++ b/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 { diff --git a/website/client/components/tasks/task.vue b/website/client/components/tasks/task.vue index f0348269c7..f9ef137fd4 100644 --- a/website/client/components/tasks/task.vue +++ b/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; } diff --git a/website/client/components/tasks/user.vue b/website/client/components/tasks/user.vue index 41535f70a2..959567aa39 100644 --- a/website/client/components/tasks/user.vue +++ b/website/client/components/tasks/user.vue @@ -17,6 +17,7 @@ .user-tasks-page { padding-top: 31px; + height: calc(100% - 235px); // header + padding } .tasks-navigation { diff --git a/website/client/filters/markdown.js b/website/client/filters/markdown.js new file mode 100644 index 0000000000..0e385c53bc --- /dev/null +++ b/website/client/filters/markdown.js @@ -0,0 +1,5 @@ +import habiticaMarkdown from 'habitica-markdown'; + +export default function markdown (text) { + return habiticaMarkdown.render(text); +} \ No newline at end of file diff --git a/website/client/filters/registerGlobals.js b/website/client/filters/registerGlobals.js index 25604dac1a..652b786280 100644 --- a/website/client/filters/registerGlobals.js +++ b/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); \ No newline at end of file +Vue.filter('roundBigNumber', roundBigNumber); +Vue.filter('markdown', markdown); \ No newline at end of file