From 67b38f71f9d39f873655e81d88fd3901a05c49de Mon Sep 17 00:00:00 2001 From: kholliday Date: Wed, 18 Mar 2015 14:39:23 -0500 Subject: [PATCH] Removed styles and sorting ability for locked tasks (Challenge tasks) --- website/public/css/items.styl | 9 ++++- website/public/css/tasks.styl | 58 ++++++++++++++++++--------- website/views/shared/tasks/lists.jade | 5 ++- website/views/shared/tasks/task.jade | 22 +++++----- 4 files changed, 62 insertions(+), 32 deletions(-) diff --git a/website/public/css/items.styl b/website/public/css/items.styl index 166ab09321..b014ca3c62 100644 --- a/website/public/css/items.styl +++ b/website/public/css/items.styl @@ -22,6 +22,13 @@ background-color: $bad text-decoration: none +//Hide interativity if reward is locked (i.e. is a challenge reward) +.locked-task + .btn-buy + &:hover + background-color: $better + cursor:initial + .rewards margin-bottom: 1.5em padding-bottom: 1.5em @@ -66,4 +73,4 @@ margin-right: 0.5em // border: 1px solid rgba(0,0,0,0.1) border-top: 0 - border-bottom: 0 \ No newline at end of file + border-bottom: 0 diff --git a/website/public/css/tasks.styl b/website/public/css/tasks.styl index c715681af8..62666242f7 100644 --- a/website/public/css/tasks.styl +++ b/website/public/css/tasks.styl @@ -57,7 +57,7 @@ for $stage in $stages &:focus border-color: darken($stage[1], 61.8%) !important outline: none; - + // completed has to be outside the loop to override the color class .completed color: darken($completed,30%) @@ -105,18 +105,18 @@ for $stage in $stages .reward, .reward-item background-color: white - border: 1px solid $completed !important + border: 1px solid $completed !important // 2. Columns & Tasks // =================== .tasks-lists - + .row margin-left: -5px margin-right: -5px - .col-md-3 + .col-md-3 padding-left: 10px // Override Bootstrap 15px padding padding-right: 10px // Override Bootstrap 15px padding margin-bottom: 15px @@ -137,7 +137,7 @@ for $stage in $stages font-weight: 300 // 50% width columns with scrollbars for tablets -@media (min-width: 768px) and (max-width: 970px) +@media (min-width: 768px) and (max-width: 970px) .task-column max-height: 18.6em overflow-y: scroll @@ -189,7 +189,7 @@ for $stage in $stages label font-weight: 400 - + input[type="text"], input[type="number"], textarea.option-content border: 1px solid #aaa border-radius: 0.382em @@ -351,7 +351,7 @@ for $stage in $stages a text-decoration: none - + // improve alignment of task icons .glyphicon-signal margin-left: 0.25em @@ -483,7 +483,7 @@ form .task-options .task-action-btn.tile margin: 3px - + form padding-bottom: 1em .priority-multiplier, .task-attributes, .repeat-days @@ -498,24 +498,24 @@ form .repeat-days li button - min-width: 2.5em + min-width: 2.5em .save-close text-align: center @extend $hrpg-button - + // Habits – task button styles (+ -) .habits .task-actions width: 3em height: 100% - + a display: block width: 100% height: 100% position: relative font-size: 0.8em - + span position: absolute margin: auto @@ -526,7 +526,7 @@ form left: 0 bottom: 0 right: 0 - + &:hover, &:focus color: #222 text-decoration: none @@ -576,14 +576,14 @@ form line-height: 1.5 float: left padding: 0.25em 0.5em - + li margin-bottom: 1em &:hover .checklist-icon opacity:1 // Task filters -// -------- +// -------- .task-filter margin: 1.5em 0 1em 0 hrpg-button-bar-mixin($color-tasks) @@ -594,7 +594,7 @@ form hrpg-button-color-mixin($color-tasks) width: 33.333% text-align: center - &:nth-child(3n + 1):nth-last-child(2), + &:nth-child(3n + 1):nth-last-child(2), &:nth-child(3n + 1):nth-last-child(2) + li width: 50%; a @@ -605,7 +605,7 @@ form min-height: 3.07em // Temp fix for slight misalignment of btn-buy .task-filter li:nth-child(3n + 1):nth-last-child(2) - width: 33.333% + width: 33.333% li:nth-child(3n + 1):nth-last-child(2) + li width: 66.666% .btn-buy @@ -619,7 +619,7 @@ form &:only-child position: static padding-left: 0.75em - + &.highValue // If reward value exceeds three digits, drop the number below the coin icon padding: 0.3em text-align: center @@ -628,4 +628,24 @@ form margin: auto .shop_gold + .reward-cost line-height: 1 - top: -0.1em + top: -0.1em + +//Hide interativity if task is locked (i.e. is a challenge reward) +.locked-task + .action-yesno label:hover:after + height: 10px + width: 10px + margin: 15px auto + border: 1px solid #222 + opacity: 0.2 !important + .action-yesno label:focus, + .action-yesno label:hover + background-color: #ffcf42 !important + .task-actions a, + .task-checker label, + .task-text + cursor: initial + .task-actions a:hover + background-color:inherit !important + .task-checker label:hover:after + content: '' diff --git a/website/views/shared/tasks/lists.jade b/website/views/shared/tasks/lists.jade index 6925c1da03..70a5c728aa 100644 --- a/website/views/shared/tasks/lists.jade +++ b/website/views/shared/tasks/lists.jade @@ -121,7 +121,10 @@ script(id='templates/habitrpg-tasks.html', type="text/ng-template") +specialSpell('opaquePotion','spookDust') // Actual List - ul(class='{{list.type}}s main-list', ng-show='obj[list.type + "s"].length > 0', hrpg-sort-tasks) + ul(class='{{list.type}}s main-list', ng-show='obj[list.type + "s"].length > 0', hrpg-sort-tasks, ng-if='!$state.includes("options.social.challenges")') + include ./task + //Loads the non-sortable lists for challenges + ul(class='{{list.type}}s main-list', ng-show='obj[list.type + "s"].length > 0', ng-if='$state.includes("options.social.challenges")') include ./task // Spells diff --git a/website/views/shared/tasks/task.jade b/website/views/shared/tasks/task.jade index 9350697474..fba0e41f3b 100644 --- a/website/views/shared/tasks/task.jade +++ b/website/views/shared/tasks/task.jade @@ -1,11 +1,11 @@ -li(bindonce='list', bo-id='"task-"+task.id', ng-repeat='task in obj[list.type+"s"]', class='task {{Shared.taskClasses(task, user.filters, user.preferences.dayStart, user.lastCron, list.showCompleted, main)}}', ng-click='spell && (list.type != "reward") && castEnd(task, "task", $event)', ng-class='{"cast-target":spell && (list.type != "reward")}', popover-trigger='mouseenter', data-popover-html="{{task.notes | markdown}}", popover-placement="top", popover-append-to-body='{{::modal ? "false":"true"}}', ng-show='shouldShow(task, list, user.preferences)') +li(bindonce='list', bo-id='"task-"+task.id', ng-repeat='task in obj[list.type+"s"]', class='task {{Shared.taskClasses(task, user.filters, user.preferences.dayStart, user.lastCron, list.showCompleted, main)}}', ng-click='spell && (list.type != "reward") && castEnd(task, "task", $event)', ng-class='{"cast-target":spell && (list.type != "reward"), "locked-task":obj._locked === true}', popover-trigger='mouseenter', data-popover-html="{{task.notes | markdown}}", popover-placement="top", popover-append-to-body='{{::modal ? "false":"true"}}', ng-show='shouldShow(task, list, user.preferences)') // right-hand side control buttons .task-meta-controls // Due Date span(ng-if='task.type=="todo" && task.date') span(ng-class='{"label label-danger":(moment(task.date).isBefore(_today, "days") && !task.completed)}') {{task.date | date:(user.preferences.dateFormat.indexOf('yyyy') == 0 ? user.preferences.dateFormat.substr(5) : user.preferences.dateFormat.substr(0,5))}} - + // Streak |   span(ng-show='task.streak') {{task.streak}}  @@ -48,14 +48,14 @@ li(bindonce='list', bo-id='"task-"+task.id', ng-repeat='task in obj[list.type+"s span.glyphicon.glyphicon-trash |   - // chart - a(ng-show='task.history', ng-click='toggleChart(obj._id+task.id, task)', tooltip=env.t('progress')) - span.glyphicon.glyphicon-signal - |   - // notes - span.task-notes(ng-show='task.notes && !task._editing') - span.glyphicon.glyphicon-comment - |   + // chart + a(ng-show='task.history', ng-click='toggleChart(obj._id+task.id, task)', tooltip=env.t('progress')) + span.glyphicon.glyphicon-signal + |   + // notes + span.task-notes(ng-show='task.notes && !task._editing') + span.glyphicon.glyphicon-comment + |   // left-hand side checkbox .task-controls.task-primary(ng-if='!task._editing') @@ -136,7 +136,7 @@ li(bindonce='list', bo-id='"task-"+task.id', ng-repeat='task in obj[list.type+"s legend.option-title span.hint(popover=env.t('checklistText'),popover-trigger='mouseenter',popover-placement='bottom')=env.t('checklist') ul(hrpg-sort-checklist) - li(ng-repeat='item in task.checklist') + li(ng-repeat='item in task.checklist') //input(type='checkbox',ng-model='item.completed',ng-change='saveTask(task,true)') //-,ng-blur='saveTask(task,true)') span.checklist-icon.glyphicon.glyphicon-resize-vertical()