diff --git a/public/css/global-modules.styl b/public/css/global-modules.styl index cdac07da4b..0629a881df 100644 --- a/public/css/global-modules.styl +++ b/public/css/global-modules.styl @@ -71,7 +71,7 @@ hrpg-button-color-mixin($hrpg-button-color) color: #fff !important; $hrpg-button-master list-style: none - > a, > button, > input + > a, > button, > input, label::after display: inline-block !important padding: 0.25em 0.5em !important text-decoration:none @@ -86,7 +86,7 @@ $hrpg-button-master background-color: #aaa !important $hrpg-button @extend $hrpg-button-master - > a, > button, > input + > a, > button, > input, label::after border: 1px solid #ccc !important border-radius: 0.382em !important $hrpg-button-call-to-action @@ -111,7 +111,7 @@ $hrpg-button-with-input height: 2em input border: 1px solid #ccc - border-radius: 0.382em 0em 0em 0.382em + border-radius: 0.382em 0em 0em 0.382em !important padding-left: 0.618em background-color: #fff !important -webkit-appearance: none @@ -150,15 +150,17 @@ $hrpg-button-bar border-right: 1px solid darken(#fff,3.82%) float:left word-wrap: break-word + button + border: none li:nth-of-type(2) border-radius: 0.382em 0em 0em 0.382em li:first-of-type border-radius: 0.382em 0em 0em 0.382em - a + a, button border-radius: 0.382em 0em 0em 0.382em li:last-of-type border-right: none - a + a, button border-radius: 0em 0.382em 0.382em 0em $hrpg-button-bar-with-heading diff --git a/public/css/tasks.styl b/public/css/tasks.styl index 2f54c9365f..7e50dfbcf3 100644 --- a/public/css/tasks.styl +++ b/public/css/tasks.styl @@ -8,29 +8,99 @@ $stages = (worst $worst) (worse $worse) (bad $bad) (neutral $neutral) (good $goo // for each color stage, generate a named class w/ the appropriate color for $stage in $stages - .color-{$stage[0]} - background-color: $stage[1] - .action-yesno label, - .task-action-btn - background-color: darken($stage[1], 30%) - &:hover, &:focus - background-color: darken($stage[1], 40%) - .task-options + .task-column:not(.rewards) + .color-{$stage[0]}:not(.completed) background-color: $stage[1] - + border: 1px solid shade($stage[1],10%) + .priority-multiplier, .task-attributes, .repeat-days + li + hrpg-button-color-mixin($stage[1]) + button + &.active + box-shadow: inset 0 0 0 1px darken($stage[1],40%) !important + background-color: darken($stage[1],5%) !important + &:focus + border: 1px solid darken($stage[1],30%) + outline: 0 + .plusminus + .task-checker + label:after + border: 1px solid darken($stage[1], 30%) !important + input[type=checkbox]:checked + label:after + //border: 1px solid darken($stage[1], 50%) !important + box-shadow: inset 0 0 0 1px darken($stage[1],40%) !important + background-color: darken($stage[1],5%) !important + .save-close, .task-checklist-edit li + hrpg-button-color-mixin(darken($stage[1],5%)) + button + &:focus + border: 1px solid darken($stage[1],30%) + outline: 0 + .action-yesno label, + .task-action-btn + background-color: darken($stage[1], 30%) + &:hover, &:focus + background-color: darken($stage[1], 40%) + .task-options + background-color: $stage[1] + .option-group:not(.task-checklist) + border-bottom: 1px solid darken($stage[1], 15%) + .option-content + border-color: darken($stage[1], 16.18%) !important + &:hover + border-color: darken($stage[1], 32.8%) !important + &: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%) background-color: $completed - color: #999 - .glyphicon - color: #333 - .task-checker label - background-color: darken($completed, 30%) + border: 1px solid shade($completed,10%) + .priority-multiplier, .task-attributes, .repeat-days + li + hrpg-button-color-mixin($completed) + button + &.active + box-shadow: inset 0 0 0 1px darken($completed,40%) !important + background-color: darken($completed,5%) !important + &:focus + border: 1px solid darken($completed,30%) + outline: 0 + .plusminus + .task-checker + label:after + border: 1px solid darken($completed, 30%) !important + input[type=checkbox]:checked + label:after + box-shadow: inset 0 0 0 1px darken($completed,40%) !important + background-color: darken($completed,5%) !important + .save-close, .task-checklist-edit li + hrpg-button-color-mixin(darken($completed,5%)) + button + &:focus + border: 1px solid darken($completed,30%) + outline: 0 + .action-yesno label, .task-action-btn background-color: darken($completed, 30%) + &:hover, &:focus + background-color: darken($completed, 40%) + .task-options + background-color: $completed + .option-group:not(.task-checklist) + border-bottom: 1px solid darken($completed, 15%) + .option-content + border-color: darken($completed, 16.18%) !important + &:hover + border-color: darken($completed, 32.8%) !important + &:focus + border-color: darken($completed, 61.8%) !important + outline: 0; -.reward +.reward, .reward-item background-color: white + border: 1px solid $completed !important // 2. Columns & Tasks // =================== @@ -70,7 +140,7 @@ for $stage in $stages // "Add new task" form // ----------------- .task-add - margin-top: 1.618em + margin-top: 1.5em @extend $hrpg-button-with-input hrpg-button-color-mixin($color-options-submenu) input, button @@ -90,7 +160,7 @@ for $stage in $stages padding: 0 min-height: 3em margin-bottom: 0.75em - box-shadow: inset 0 0 1px rgba(0,0,0,0.5) + // box-shadow: inset 0 0 1px rgba(0,0,0,0.5) position: relative &:hover cursor: move @@ -99,6 +169,16 @@ 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 + padding-left: 0.618em + background-color: #fff !important + -webkit-appearance: none + -moz-appearance: none + appearance: none + box-shadow: none //remove red glow in Firefox // task content .task-text @@ -107,7 +187,7 @@ for $stage in $stages line-height: 1.4 word-wrap: break-word - markdown > ul > li // Otherwise, + gets turned into a bullet and gets maksed by buttons + markdown > ul > li // Otherwise, + gets turned into a bullet and gets masked by buttons margin-left:20px span.emoji @@ -176,28 +256,21 @@ for $stage in $stages cursor: pointer // plus/minus checkbox -.action-plusminus - label - margin-right: 1.5em - label:after - font-size: 1.41em - width: 2.12765em - height: 2.12765em - line-height: 2.12765 - text-align: center - display: inline-block - vertical-align top - opacity: 0.3 - background-color: #ddd - outline: 1px solid rgba(0,0,0,0.5) - color: #222 - label[for$="plus"]:after - content: '＋' - label[for$="minus"]:after - content: '−' - - &.select-toggle input[type=checkbox]:checked + label:after - opacity: 1 +.plusminus + text-align: center + .task-checker + font-size: 1.5em // 1.41em + @extend $hrpg-button + margin-bottom: 0.5em + &:first-of-type + margin-right: 0.5em + label:after + width: 2em + line-height: 1.5 + label[for$="plus"]:after + content: '＋' + label[for$="minus"]:after + content: '−' // yes/no checkbox .action-yesno @@ -229,9 +302,9 @@ for $stage in $stages label:hover:after, label:focus:after content: "\E013" - font-family 'Glyphicons Halflings' - border none - margin 0 + font-family: "Glyphicons Halflings" + border: none + margin: 0 line-height: 1.714285714em height: 1.714285714em width: 1.714285714em @@ -243,9 +316,9 @@ for $stage in $stages // completed icon input[type=checkbox]:checked + label:after content: "\E013" - font-family 'Glyphicons Halflings' - border none - margin 0 + font-family: "Glyphicons Halflings" + border: none + margin: 0 line-height: 1.714285714em height: 1.714285714em width: 1.714285714em @@ -297,36 +370,36 @@ form //background-color: .option-group - border-bottom: 1px solid rgba(0,0,0,0.1) + //border-bottom: 1px solid rgba(0,0,0,0.1) padding: 0 0 1em margin-bottom: 1em .option-title font-size: 1em margin: 0 0 0.5em - line-height: 1.5 + line-height: 2.5 border: 0 padding: 0 - color: #333 - font-style: italic - &:not(.mega):after - content: ':' + //color: #333 + //font-style: italic + font-weight: bold + text-align: center &.mega cursor: pointer - font-style: normal - font-weight: bold - text-decoration: underline + //font-style: normal + &:after + font-family: "Glyphicons Halflings" + font-size: 0.75em + content: "\E114" + padding-left: 0.75em + //&:not(.mega):after + //content: ':' .option-content height: 2.5em width: 100% margin: 0 0 1em padding: 0 0 0 0.5em - outline: 0 - border: 1px solid rgba(0,0,0,0.2) - box-shadow: none - border-radius: 0 - font-family: 'Lato', sans-serif //bootstrap override textarea.option-content height: 5em @@ -395,47 +468,66 @@ form .task-options .task-action-btn.tile margin: 3px - + + form + padding-bottom: 1em + .priority-multiplier, .task-attributes, .repeat-days + text-align: center + li + @extend $hrpg-button + margin-bottom: 1em + margin-right: 0.75em + display: inline-block + &:last-of-type + margin-right: 0 + .repeat-days + li + button + min-width: 2.5em + .save-close + text-align: center + @extend $hrpg-button // todos ui // -------- // Checklists // -------- -.checklist-form - /* Make an input blend into its parent */ - input.inline-edit - reset-box-model() - reset-font() - line-height: inherit - text-align: inherit - background-color:inherit - box-shadow: none - width: 80% +.task-checklist-edit + > ul + text-align: center + li + @extend $hrpg-button + button + span + margin-right: 0.5em + > form + li + @extend $hrpg-button-with-input + @extend $clearfix + input + width: 70% - /* Add interaction cues on hover and focus */ - input.inline-edit:hover,input.inline-edit:focus - background-color: #FFD - transition: background-color 0.5s + /* Add interaction cues on hover and focus */ + &:hover,&:focus + background-color: #FFD + transition: background-color 0.5s - .checklist-icons - opacity:0 - width: 5% - - li - min-height: 20px - padding-left: 10px - margin-bottom: 5px - - [type="checkbox"] - margin: 0px 10px 3px 0px - width: 4% - li:hover .checklist-icons - opacity:1 + .checklist-icon + opacity:0.25 + text-align: center + 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.618em 0 1em 0 + margin: 1.5em 0 1em 0 hrpg-button-bar-mixin($color-tasks) @extend $hrpg-button-bar width: 100% @@ -451,16 +543,18 @@ form width: 100% height: 100% .rewards + .task + 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% li:nth-child(3n + 1):nth-last-child(2) + li width: 66.666% - .btn-buy word-wrap: break-word padding-left: 0.2em text-align: left + border:none span position: relative left: -2px @@ -476,9 +570,4 @@ form margin: auto .shop_gold + .reward-cost line-height: 1 - top: -0.1em - -.repeat-days - a - border-radius: 0.382em - + top: -0.1em diff --git a/views/shared/tasks/task.jade b/views/shared/tasks/task.jade index 0466ff91e1..96f792ebcd 100644 --- a/views/shared/tasks/task.jade +++ b/views/shared/tasks/task.jade @@ -82,7 +82,7 @@ li(bindonce='list', id='task-{{::task.id}}', ng-repeat='task in obj[list.type+"s //-| {{task.text}} div(ng-if='task.checklist && !$state.includes("options.social.challenges") && !task.collapseChecklist && !task._editing') - fieldset.option-group + fieldset.option-group.task-checklist label.checkbox(ng-repeat='item in task.checklist') input(type='checkbox',ng-model='item.completed',ng-change='saveTask(task,true)') markdown(ng-model='item.text',target='_blank') @@ -122,25 +122,24 @@ li(bindonce='list', id='task-{{::task.id}}', ng-repeat='task in obj[list.type+"s a(ng-click="unlink(task, 'remove-all')")=env.t('removeThem') // Checklists - div(ng-if='!$state.includes("options.social.challenges")') - button.btn.btn-default.btn-sm(ng-if='!task.checklist[0] && (task.type=="daily" || task.type=="todo")',ng-click='addChecklist(task)') - span.glyphicon.glyphicon-tasks - |     - =env.t('addChecklist') - form.checklist-form(ng-if='task.checklist') - fieldset.option-group.task-checklist(ng-if='!$state.includes("options.social.challenges")') + .task-checklist-edit(ng-if='!$state.includes("options.social.challenges")') + ul + li + button(type='button', ng-if='!task.checklist[0] && (task.type=="daily" || task.type=="todo")',ng-click='addChecklist(task)') + span.glyphicon.glyphicon-tasks + span=env.t('addChecklist') + form(ng-if='task.checklist') + fieldset.option-group(ng-if='!$state.includes("options.social.challenges")') legend.option-title span.hint(popover=env.t('checklistText'),popover-trigger='mouseenter',popover-placement='bottom')=env.t('checklist') - ul(hrpg-sort-checklist).list-unstyled + ul(hrpg-sort-checklist) li(ng-repeat='item in task.checklist') - a.pull-right.checklist-icons(ng-click='removeChecklistItem(task,$event,$index,true)') - span.glyphicon.glyphicon-trash(tooltip=env.t('delete')) - span.checklist-icons.glyphicon.glyphicon-resize-vertical() - |   - input(type='checkbox',ng-model='item.completed',ng-change='saveTask(task,true)') + //input(type='checkbox',ng-model='item.completed',ng-change='saveTask(task,true)') //-,ng-blur='saveTask(task,true)') - input.inline-edit(type='text',ng-model='item.text',ui-keydown="{'8 46':'removeChecklistItem(task,$event,$index)'}",ui-keyup="{'13':'addChecklistItem(task,$event,$index)','38 40':'navigateChecklist(task,$index,$event)'}") - + span.checklist-icon.glyphicon.glyphicon-resize-vertical() + input(type='text',ng-model='item.text',ui-keydown="{'8 46':'removeChecklistItem(task,$event,$index)'}",ui-keyup="{'13':'addChecklistItem(task,$event,$index)','38 40':'navigateChecklist(task,$index,$event)'}") + button(ng-click='removeChecklistItem(task,$event,$index,true)') + span.glyphicon.glyphicon-trash(tooltip=env.t('delete')) form(ng-submit='saveTask(task,false,true)') // text & notes @@ -152,27 +151,34 @@ li(bindonce='list', id='task-{{::task.id}}', ng-repeat='task in obj[list.type+"s textarea.option-content(rows='3', ng-model='task.notes', ng-model-options="{debounce: 1000}") // if Habit, plus/minus command options - fieldset.option-group(ng-if='task.type=="habit" && !task.challenge.id') + fieldset.option-group.plusminus(ng-if='task.type=="habit" && !task.challenge.id') legend.option-title=env.t('direction/Actions') - span.task-checker.action-plusminus.select-toggle + span.task-checker input.visuallyhidden.focusable(id='{{obj._id}}_{{task.id}}-option-plus', type='checkbox', ng-model='task.up') label(for='{{obj._id}}_{{task.id}}-option-plus') - span.task-checker.action-plusminus.select-toggle + span.task-checker input.visuallyhidden.focusable(id='{{obj._id}}_{{task.id}}-option-minus', type='checkbox', ng-model='task.down') label(for='{{obj._id}}_{{task.id}}-option-minus') // if Daily, calendar fieldset(ng-if='::task.type=="daily"', class="option-group") legend.option-title=env.t('repeat') - .task-controls.tile-group.repeat-days(bindonce) + ul.repeat-days(bindonce) // note, does not use data-toggle="buttons-checkbox" - it would interfere with our own click binding - button.task-action-btn.tile(ng-class='{active: task.repeat.su}', type='button', ng-click='task.challenge.id || (task.repeat.su = !task.repeat.su)') {{::moment.weekdaysMin(0)}} - button.task-action-btn.tile(ng-class='{active: task.repeat.m}', type='button', ng-click='task.challenge.id || (task.repeat.m = !task.repeat.m)') {{::moment.weekdaysMin(1)}} - button.task-action-btn.tile(ng-class='{active: task.repeat.t}', type='button', ng-click='task.challenge.id || (task.repeat.t = !task.repeat.t)') {{::moment.weekdaysMin(2)}} - button.task-action-btn.tile(ng-class='{active: task.repeat.w}', type='button', ng-click='task.challenge.id || (task.repeat.w = !task.repeat.w)') {{::moment.weekdaysMin(3)}} - button.task-action-btn.tile(ng-class='{active: task.repeat.th}', type='button', ng-click='task.challenge.id || (task.repeat.th = !task.repeat.th)') {{::moment.weekdaysMin(4)}} - button.task-action-btn.tile(ng-class='{active: task.repeat.f}', type='button', ng-click='task.challenge.id || (task.repeat.f= !task.repeat.f)') {{::moment.weekdaysMin(5)}} - button.task-action-btn.tile(ng-class='{active: task.repeat.s}', type='button', ng-click='task.challenge.id || (task.repeat.s = !task.repeat.s)') {{::moment.weekdaysMin(6)}} + li + button(ng-class='{active: task.repeat.su}', type='button', ng-click='task.challenge.id || (task.repeat.su = !task.repeat.su)') {{::moment.weekdaysMin(0)}} + li + button(ng-class='{active: task.repeat.m}', type='button', ng-click='task.challenge.id || (task.repeat.m = !task.repeat.m)') {{::moment.weekdaysMin(1)}} + li + button(ng-class='{active: task.repeat.t}', type='button', ng-click='task.challenge.id || (task.repeat.t = !task.repeat.t)') {{::moment.weekdaysMin(2)}} + li + button(ng-class='{active: task.repeat.w}', type='button', ng-click='task.challenge.id || (task.repeat.w = !task.repeat.w)') {{::moment.weekdaysMin(3)}} + li + button(ng-class='{active: task.repeat.th}', type='button', ng-click='task.challenge.id || (task.repeat.th = !task.repeat.th)') {{::moment.weekdaysMin(4)}} + li + button(ng-class='{active: task.repeat.f}', type='button', ng-click='task.challenge.id || (task.repeat.f= !task.repeat.f)') {{::moment.weekdaysMin(5)}} + li + button(ng-class='{active: task.repeat.s}', type='button', ng-click='task.challenge.id || (task.repeat.s = !task.repeat.s)') {{::moment.weekdaysMin(6)}} // if Reward, pricing fieldset.option-group.option-short(ng-if='task.type=="reward" && !task.challenge.id') @@ -199,10 +205,13 @@ li(bindonce='list', id='task-{{::task.id}}', ng-repeat='task in obj[list.type+"s fieldset.option-group.advanced-option(ng-class="{visuallyhidden: task._advanced}") legend.option-title a.hint.priority-multiplier-help(href='https://trello.com/card/priority-multiplier/50e5d3684fe3a7266b0036d6/17', target='_blank', popover-title=env.t('difficultyHelpTitle'), popover-trigger='mouseenter', popover=env.t('difficultyHelpContent'))=env.t('difficulty') - .task-controls.tile-group.priority-multiplier - button.task-action-btn.tile(type='button', ng-class='{active: task.priority==1 || !task.priority}', ng-click='task.challenge.id || (task.priority=1)')=env.t('easy') - button.task-action-btn.tile(type='button', ng-class='{active: task.priority==1.5}', ng-click='task.challenge.id || (task.priority=1.5)')=env.t('medium') - button.task-action-btn.tile(type='button', ng-class='{active: task.priority==2}', ng-click='task.challenge.id || (task.priority=2)')=env.t('hard') + ul.priority-multiplier + li + button(type='button', ng-class='{active: task.priority==1 || !task.priority}', ng-click='task.challenge.id || (task.priority=1)')=env.t('easy') + li + button(type='button', ng-class='{active: task.priority==1.5}', ng-click='task.challenge.id || (task.priority=1.5)')=env.t('medium') + li + button(type='button', ng-class='{active: task.priority==2}', ng-click='task.challenge.id || (task.priority=2)')=env.t('hard') //span(ng-if='task.type=="daily" && !task.challenge.id') span(ng-if='task.type=="daily"') legend.option-title.pull-left=env.t('restoreStreak') @@ -210,12 +219,17 @@ li(bindonce='list', id='task-{{::task.id}}', ng-repeat='task in obj[list.type+"s div(ng-if='(user.preferences.allocationMode == "taskbased" && user.preferences.automaticAllocation) || $state.is("options.social.challenges")') legend.option-title.pull-left=env.t('attributes') - .task-controls.tile-group.task-attributes - button.task-action-btn.tile(type='button', ng-class='{active: task.attribute=="str"}', ng-click='task.attribute="str"')=env.t('physical') - button.task-action-btn.tile(type='button', ng-class='{active: task.attribute=="int"}', ng-click='task.attribute="int"')=env.t('mental') - button.task-action-btn.tile(type='button', ng-class='{active: task.attribute=="con"}', ng-click='task.attribute="con"')=env.t('social') - button.task-action-btn.tile(type='button', ng-class='{active: task.attribute=="per"}', ng-click='task.attribute="per"', popover=env.t('otherExamples'), popover-trigger='mouseenter', popover-placement='top')=env.t('other') + ul.task-attributes + li + button(type='button', ng-class='{active: task.attribute=="str"}', ng-click='task.attribute="str"')=env.t('physical') + li + button(type='button', ng-class='{active: task.attribute=="int"}', ng-click='task.attribute="int"')=env.t('mental') + li + button(type='button', ng-class='{active: task.attribute=="con"}', ng-click='task.attribute="con"')=env.t('social') + li + button(type='button', ng-class='{active: task.attribute=="per"}', ng-click='task.attribute="per"', popover=env.t('otherExamples'), popover-trigger='mouseenter', popover-placement='top')=env.t('other') - button.task-action-btn.tile.spacious(type='submit')=env.t('saveAndClose') + .save-close + button(type='submit')=env.t('saveAndClose') div(class='{{obj._id}}{{task.id}}-chart', ng-show='charts[obj._id+task.id]')