diff --git a/package.json b/package.json index d4a96c9dbe..a185c5fd20 100644 --- a/package.json +++ b/package.json @@ -26,8 +26,7 @@ "superagent": "~0.12.4", "resolve": "~0.2.3", "browserify": "1.17.3", - "expect.js": "~0.2.0", - "webkit-devtools-agent": "*" + "expect.js": "~0.2.0" }, "private": true, "subdomain": "habitrpg", diff --git a/src/app/browser.coffee b/src/app/browser.coffee index 55a6c9229f..ead5f06f33 100644 --- a/src/app/browser.coffee +++ b/src/app/browser.coffee @@ -71,7 +71,6 @@ setupSortable = (model) -> dropOnEmpty: false cursor: "move" items: "li" - opacity: 0.4 scroll: true axis: 'y' update: (e, ui) -> diff --git a/src/app/index.coffee b/src/app/index.coffee index eabdfbde0e..d7445536a0 100644 --- a/src/app/index.coffee +++ b/src/app/index.coffee @@ -1,7 +1,7 @@ derby = require 'derby' app = derby.createApp module {get, view, ready} = app -derby.use require('derby-ui-boot'), {styles: ['bootstrap', 'responsive']} +derby.use require('derby-ui-boot'), {styles: ['bootstrap']} derby.use require '../../ui' derby.use require 'derby-auth/components' diff --git a/src/app/tasks.coffee b/src/app/tasks.coffee index 2d3aa66b94..9ce05e1c89 100644 --- a/src/app/tasks.coffee +++ b/src/app/tasks.coffee @@ -123,8 +123,8 @@ module.exports.app = (appExports, model) -> appExports.toggleTaskEdit = (e, el) -> hideId = $(el).attr('data-hide-id') toggleId = $(el).attr('data-toggle-id') - $(document.getElementById(hideId)).hide() - $(document.getElementById(toggleId)).toggle() + $(document.getElementById(hideId)).addClass('visuallyhidden') + $(document.getElementById(toggleId)).toggleClass('visuallyhidden') appExports.toggleChart = (e, el) -> hideSelector = $(el).attr('data-hide-id') @@ -180,7 +180,7 @@ module.exports.app = (appExports, model) -> scoring.score(model, task.get('id'), direction) appExports.tasksToggleAdvanced = (e, el) -> - $(el).next('.advanced').toggle() + $(el).next('.advanced-option').toggleClass('visuallyhidden') appExports.tasksSaveAndClose = -> # When they update their notes, re-establish tooltip & popover diff --git a/styles/app/helpers.styl b/styles/app/helpers.styl new file mode 100644 index 0000000000..e827803593 --- /dev/null +++ b/styles/app/helpers.styl @@ -0,0 +1,32 @@ +// Hide from both screenreaders and browsers: h5bp.com/u +.hidden + display: none !important + visibility: hidden + + +// Hide only visually, but have it available for screenreaders: h5bp.com/v +.visuallyhidden + border: 0 + clip: rect(0 0 0 0) + height: 1px + margin: -1px + overflow: hidden + padding: 0 + position: absolute + width: 1px + + +// Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p +.visuallyhidden.focusable:active, +.visuallyhidden.focusable:focus + clip: auto + height: auto + margin: 0 + overflow: visible + position: static + width: auto + + +// Hide visually and from screenreaders, but maintain layout +.invisible + visibility: hidden \ No newline at end of file diff --git a/styles/app/index.styl b/styles/app/index.styl index 406f26d74e..24a8261cce 100644 --- a/styles/app/index.styl +++ b/styles/app/index.styl @@ -7,13 +7,32 @@ @import "./customizer.styl"; @import "./items.styl"; @import "./alerts.styl"; +@import "./helpers.styl"; +@import "./responsive.styl"; + +@import "./scrollbars.styl"; @import "../../public/vendor/bootstrap-datepicker/css/datepicker.css"; +// fix exploding to very wide for some reason +.datepicker + width: 210px + html,body,p,h1,ul,li,table,tr,th,td margin: 0 padding: 0 +* + -webkit-box-sizing: border-box + -moz-box-sizing: border-box + box-sizing: border-box + +hr + border-top: 0 + border-bottom: 1px solid #ddd + border-color: rgba(0,0,0,0.1) + + /* Header -------------------------------------------------- */ @@ -34,7 +53,7 @@ html,body,p,h1,ul,li,table,tr,th,td box-sizing: border-box z-index: 1000 -@media (max-width: 480px) { +@media (max-width: 600px) { #head { position: static; } @@ -131,7 +150,7 @@ html,body,p,h1,ul,li,table,tr,th,td /*overflow:auto;*/ padding-bottom: 250px; /* don't know why this works, sticky footers are weird */ -@media (max-width: 480px) { +@media (max-width: 600px) { #wrap { margin-top: 0 } diff --git a/styles/app/items.styl b/styles/app/items.styl index eaf078a71b..b90d2ea53a 100644 --- a/styles/app/items.styl +++ b/styles/app/items.styl @@ -1,42 +1,83 @@ -/* ----- Items, Weapons, Armor -----*/ -.item-store-popover img - float:left - padding-right:7px; +// money styles +.money + display: inline-block + line-height: 1.5em + padding-left: 0.75em -.item .task-text img - max-height: 16px + [class^="shop_"] + vertical-align: top + display: inline-block -.buy-link, .item-buy-link - background-color: #DEE5F2 - padding: 2px - margin-right: 10px - border-radius: 5px +.btn-buy + width: 4.5em + height: 3em + padding: 0.75em 0 0 + text-align: center + vertical-align: top + background-color: $better - img - height:20px + color: #555 + &:hover, &:focus + background-color: $bad + text-decoration: none - .item-buy-link - background-color: #ccffcc +.rewards + margin-bottom: 1.5em + padding-bottom: 1.5em + border-bottom: 1px solid rgba(0,0,0,0.1) -.item - position:relative +.reward-item + background: white -.shop-table - position:absolute - top: 0 - left: 50px +.reward-cost + display: inline -#money - position:relative -.shop_gold, .shop_silver, .shop_copper - float:right -.money-table - position:absolute - top: 0 -.shop-pet - mouse: pointer -.shop-pet-owned-check - position:absolute - right:0px - bottom:0px +// store items +.btn-reroll + background-color: $better + cursor: pointer + box-shadow: inset -1px -1px 0 rgba(0,0,0,0.1) + &:hover, &:focus + background-color: $bad + +.item-img + display: inline-block + vertical-align: top + // background-color: $bad + height: 3em + margin-left: -0.5em + margin-right: 0.5em + // border: 1px solid rgba(0,0,0,0.1) + border-top: 0 + border-bottom: 0 + +.token-wallet + cursor: pointer + .tile + background-color: darken($neutral, 10%) + .add-token-btn + opacity: 0 + &:hover, &:focus + .add-token-btn + opacity: 1 + background-color: $good + .tile + opacity: 1 + + +// pets (this will all change when pet system is overhauled) +.pet-grid + padding-top: 1.5em + border-top: rgba(0,0,0,0.1) + table + width: 100% + td + padding: 0.5em + width: 25% + &.active-pet + background-color: $bad + outline: 1px solid rgba(0,0,0,0.1) + outline-offset: -1px + &:hover, &:focus + background-color: darken($better, 10%) \ No newline at end of file diff --git a/styles/app/responsive.styl b/styles/app/responsive.styl new file mode 100644 index 0000000000..d79c8dc14e --- /dev/null +++ b/styles/app/responsive.styl @@ -0,0 +1,31 @@ +.grid + padding: 0 1.5em 1.5em 0 + letter-spacing: -4px + +.module + display: inline-block + letter-spacing: normal + vertical-align: top + width: 25% + padding: 0 0 1.5em 1.5em + -moz-box-sizing: border-box + box-sizing: border-box + +// at 960px when 4 columns really starts to break +@media (max-width: 60em) + .module + width: 50% + .task-column + max-height: 18em + overflow-y: scroll + +// at 600px when 2col starts breaking +@media (max-width: 37.5em) + .grid + padding-right: 0 + .module + width: 100% + padding-left: 0 + .task-column + max-height: none + overflow: visible \ No newline at end of file diff --git a/styles/app/scrollbars.styl b/styles/app/scrollbars.styl new file mode 100644 index 0000000000..8b366133bf --- /dev/null +++ b/styles/app/scrollbars.styl @@ -0,0 +1,82 @@ +/* Gmail style scrollbar */ +.task-column::-webkit-scrollbar { + width: 12px +} +.task-column::-webkit-scrollbar-thumb { + border-width: 1px 1px 1px 2px +} +.task-column::-webkit-scrollbar-track { + border-width: 0 +} +.task-column::-webkit-scrollbar { + height: 16px; + overflow: visible; + width: 16px; +} +.task-column::-webkit-scrollbar-button { + height: 0; + width: 0; +} +.task-column::-webkit-scrollbar-track { + background-clip: padding-box; + border: solid transparent; + border-width: 0 0 0 4px; +} +.task-column::-webkit-scrollbar-track:horizontal { + border-width: 4px 0 0 +} +.task-column::-webkit-scrollbar-track:hover { + background-color: rgba(150,150,150,.05); + box-shadow: inset 1px 0 0 rgba(150,150,150,.1); +} +.task-column::-webkit-scrollbar-track:horizontal:hover { + box-shadow: inset 0 1px 0 rgba(150,150,150,.1) +} +.task-column::-webkit-scrollbar-track:active { + background-color: rgba(150,150,150,.05); + box-shadow: inset 1px 0 0 rgba(150,150,150,.14),inset -1px 0 0 rgba(150,150,150,.07); +} +.task-column::-webkit-scrollbar-track:horizontal:active { + box-shadow: inset 0 1px 0 rgba(150,150,150,.14),inset 0 -1px 0 rgba(150,150,150,.07) +} +.task-column::-webkit-scrollbar-thumb { + background-color: rgba(150,150,150,.2); + background-clip: padding-box; + border: solid transparent; + border-width: 1px 1px 1px 6px; + min-height: 28px; + padding: 100px 0 0; + box-shadow: inset 1px 1px 0 rgba(150,150,150,.1),inset 0 -1px 0 rgba(150,150,150,.07); +} +.task-column::-webkit-scrollbar-thumb:horizontal { + border-width: 6px 1px 1px; + padding: 0 0 0 100px; + box-shadow: inset 1px 1px 0 rgba(150,150,150,.1),inset -1px 0 0 rgba(150,150,150,.07); +} +.task-column::-webkit-scrollbar-thumb:hover { + background-color: rgba(150,150,150,.4); + box-shadow: inset 1px 1px 1px rgba(150,150,150,.25); +} +.task-column::-webkit-scrollbar-thumb:active { + background-color: rgba(150,150,150,0.5); + box-shadow: inset 1px 1px 3px rgba(150,150,150,0.35); +} +.task-column::-webkit-scrollbar-track { + border-width: 0 1px 0 6px +} +.task-column::-webkit-scrollbar-track:horizontal { + border-width: 6px 0 1px +} +.task-column::-webkit-scrollbar-track:hover { + background-color: rgba(150,150,150,.035); + box-shadow: inset 1px 1px 0 rgba(150,150,150,.14),inset -1px -1px 0 rgba(150,150,150,.07); +} +.task-column::-webkit-scrollbar-thumb { + border-width: 0 1px 0 6px +} +.task-column::-webkit-scrollbar-thumb:horizontal { + border-width: 6px 0 1px +} +.task-column::-webkit-scrollbar-corner { + background: transparent +} \ No newline at end of file diff --git a/styles/app/shop_sprites.styl b/styles/app/shop_sprites.styl index b3abb056c5..b609105fa1 100644 --- a/styles/app/shop_sprites.styl +++ b/styles/app/shop_sprites.styl @@ -49,6 +49,6 @@ .shop_armor_1 {background-position: -800px 0; width: 40px; height: 40px} .shop_reroll {background-position: -840px 0; width: 40px; height: 40px} .shop_potion {background-position: -880px 0; width: 40px; height: 40px} -.shop_copper {background-position: -920px 0; width: 40px; height: 40px} -.shop_silver {background-position: -960px 0; width: 40px; height: 40px} -.shop_gold {background-position: -1000px 0; width: 40px; height: 40px} +.shop_copper {background-position: -923px -8px; width: 32px; height: 22px} +.shop_silver {background-position: -963px -8px; width: 32px; height: 22px} +.shop_gold {background-position: -1003px -8px; width: 32px; height: 22px} diff --git a/styles/app/tasks.styl b/styles/app/tasks.styl index 70d54c189d..b8dd2d11e7 100644 --- a/styles/app/tasks.styl +++ b/styles/app/tasks.styl @@ -1,42 +1,348 @@ -.color-worst pre - background-color: rgb(230, 184, 175) -.color-worse pre - background-color: rgb(244, 204, 204) -.color-bad pre - background-color: rgb(252, 229, 205) -.color-neutral pre - background-color: rgb(255, 242, 204) -.color-good pre - background-color: rgb(217, 234, 211) -.color-better pre - background-color: rgb(208, 224, 227) -.color-best pre - background-color: rgb(201, 218, 248) -.completed pre - background-color: rgb(217, 217, 217) - color: rgb(153, 153, 153) -.reward pre +// 1. Set up color classes +// ======================== + +// color variables +$worst = rgb(230, 184, 175) +$worse = rgb(244, 204, 204) +$bad = rgb(252, 229, 205) +$neutral = rgb(255, 242, 204) +$good = rgb(217, 234, 211) +$better = rgb(208, 224, 227) +$best = rgb(201, 218, 248) +$completed = rgb(217, 217, 217) + +// array of keywords and their associated color vars +$stages = (worst $worst) (worse $worse) (bad $bad) (neutral $neutral) (good $good) (better $better) (best $best) + +// 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%) + +// completed has to be outside the loop to override the color class +.completed + background-color: $completed + color: #999 + .task-checker label + background-color: darken($completed, 30%) + .task-action-btn + background-color: darken($completed, 30%) + +.reward background-color: white -label.checkbox.inline{ - width: 40px + + +// 2. Columns & Tasks +// =================== + +// main columns +// ------------ +.task-column + padding: 1.5em + background: #f5f5f5 + border: 1px solid #ccc + font-family: 'Lato', sans-serif + + .task-column_title + margin: 0 0 0.5em + padding: 0 + + +// add new task form +// ----------------- +.addtask-form + margin-bottom: 0.75em + outline: 1px solid rgba(0,0,0,0.15) + outline-offset: -1px + background-color: white + // box-shadow: 0 0 3px rgba(0,0,0,0.15) + position: relative + +// the input field +.addtask-field + display: block + width: 100% + input + font-family: 'Lato', sans-serif + border: 0 + outline: 0 + border-radius: 0 + box-shadow: none + background-color: white + height: 3em + padding: 0 0 0 0.5em + width: 100% + &:focus + box-shadow: inset 0 0 3px darken($best, 20%),inset -1px 0 1px darken($best, 30%) + +// the button +.addtask-btn + position: absolute + right: 0 + top: 0 + // important for overriding bootstrap, remove later + width: 1.81818em !important + height: 1.88em + padding: 0 + font-size: 1.61em + line-height: 1.7 + outline: 0 + border: 0 + border-radius: 0 //required to nuke BB-playbook user agent styles + background-color: darken($best, 20%) + opacity: 0.75 + &:hover, + &:focus + opacity: 1 + background-color: darken($best, 20%) + &:active + background-color: darken($best, 30%) + opacity: 1 + + +// an individual task entry +// ------------------------ +.task + list-style: none + clear: both + padding: 0 0.5em 0 0.5em + min-height: 3em + line-height: 3 + margin-bottom: 0.75em + outline: 1px solid rgba(0,0,0,0.1) + outline-offset: -1px + &:hover + cursor: move + &:last-child + margin-bottom: 0 + +// task content +.task-text + display: inline + +// when a task is being dragged +.task.ui-sortable-helper { + box-shadow: 0 0 3px rgba(0,0,0,0.15), 0 0 5px rgba(0,0,0,0.1) + transform: scale(1.05) + outline: 1px solid rgba(0,0,0,0.2) } -.todos - .nav-pills > .active > a, .nav-pills > .active > a:hover - color: #005580 - background-color: #DEE5F2 +// primary task commands +// ---------------------- +.task-controls + display: inline + margin-left: -0.5em + margin-right: 0.5em -.dailys - .repeat-days > .btn:not(.active) - background-color: #aaa; - background-image: -moz-linear-gradient(top, #eee, #aaa); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#aaa)); - background-image: -webkit-linear-gradient(top, #eee, #aaa); - background-image: -o-linear-gradient(top, #eee, #aaa); - background-image: linear-gradient(to bottom, #eee, #aaa); - background-repeat: repeat-x; +// plus/minus commands +.task-action-btn + display: inline-block + width: 2.12765em + height: 2.12765em + padding: 0 + font-size: 1.41em + line-height: 2.12765 + text-align: center + color: #222 + vertical-align: top + border-right: 1px solid rgba(0,0,0,0.25) + &:last-child + border: 0 + &:hover, &:focus + color: #222 + text-decoration: none +// checkbox +.task-checker input[type=checkbox] + margin: 0 + padding: 0 + visibility: hidden + +.task-checker label + display: inline-block + width: 3em + height: 3em + margin: 0 + vertical-align: top + 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 + +// yes/no checkbox +.action-yesno + position: relative + // uncompleted icon + label:after, label:before + content: '▨' + // content: '◯' + display: block + height: 1.714285714em + width: 1.714285714em + font-size: 1.75em + line-height: 1.714285714em + text-align: center + color: black + opacity: 0.2 + + label:before + position: absolute + left: 0 + // hint at completed icon + label:hover:after, + label:focus:after + content: '¬' + font-size: 3.2em + line-height: 0.9375em + height: 0.9375em + width: 1.15em + text-align: center + transform: rotate(135deg) + opacity: 0.5 !important + label:active:after + opacity: 0.75 !important + + // completed icon + input[type=checkbox]:checked + label:after + content: '¬' + font-size: 3.2em + line-height: 0.9375em + height: 0.9375em + width: 1.15em + text-align: center + transform: rotate(135deg) + opacity: 0.75 + + +// secondary task commands +// ----------------------- +.task-meta-controls + float: right + margin-left: 0.25em + opacity: 0.25 + a > i + margin-left: 0.125em + .task-notes + margin-left: 0.125em + +.task:hover .task-meta-controls + opacity: 1 + + +// task editing +// ------------ +.task-options + padding: 0 0.5em + margin-top: 1.25em + color: #333 + + .option-group + 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 + border: 0 + padding: 0 + color: #333 + font-style: italic + &:not(.mega):after + content: ':' + &.mega + cursor: pointer + font-style: normal + font-weight: bold + text-decoration: underline + + .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 + padding-top: 0.25em + resize: none + margin-bottom: 0 + +// button-group +.task-controls.tile-group + display: block + text-align: center + margin: 0 + +.task-action-btn.tile + border: 0 + font-size: 1.15em + font-weight: 300 + outline: 1px solid rgba(0,0,0,0.2) + outline-offset: -1px + margin: 0 0 0 3px + font-family: 'Lato', sans-serif + text-align: inherit + opacity: 0.5 + width: auto + padding: 0 0.5em + &.active + opacity: 1 + +.tile.spacious + margin: 0.75em 0 + font-size: 1.5em + opacity: 1 +.tile.bright + background-color: lighten($best, 20%) + &:hover, &:focus + background-color: lighten($best, 40%) +.tile.flush + margin-left: 0 + border: 1px solid rgba(0,0,0,0.2) + outline: 0 + line-height: 2em + &:first-child + border-right: 0 + + +// todos ui +// -------- + +// context switching .context-enabled .display-context-dependant, .task-list li @@ -50,39 +356,19 @@ label.checkbox.inline{ .show-for-uncompleted, .uncompleted display: block -.help-icon - float:right; -.task:hover - cursor: move - -li:hover .task-meta-controls .hover-show - display: inline - -.task - list-style:none - - pre - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif - font-size: 13px - line-height: 18px - color: black - word-break: normal - - .task-meta-controls - float:right - i - margin-left:5px - - .task-controls,.task-text - display:inline - margin-right:10px - - .task-meta-controls .hover-show - display: none; - -.vote-up, .vote-down - text-decoration:none; - -.new-task-form - margin-bottom:5px; \ No newline at end of file +// nav tabs +.nav-tabs + margin-top: 1.5em +.nav-tabs > li + &.active > a + color: #333 + &:hover + margin-top: 1px + > a + border-radius: 0 !important + margin-top: 1px + color: #333 + &:hover + border-top: 0 + margin-top: 2px \ No newline at end of file diff --git a/views/app/index.html b/views/app/index.html index 9d66e2fd2b..b27d2563ee 100644 --- a/views/app/index.html +++ b/views/app/index.html @@ -12,8 +12,10 @@ HabitRPG | Gamify Your Life - + + + @@ -26,9 +28,9 @@
-
+
-
+
diff --git a/views/app/rewards.html b/views/app/rewards.html index e7e1bd29e9..6a8c0bb4a7 100644 --- a/views/app/rewards.html +++ b/views/app/rewards.html @@ -1,7 +1,12 @@ + + + + {#if _rewardList}
    {#each _rewardList as :task}{/}
+ {/} {#if _user.flags.itemsEnabled} @@ -16,50 +21,40 @@ {/} -
-
- {#if _user.items.pets[.name]}{/} - -
-
+ + + -
-
- {tokens(_user.balance)} - Tokens -
-
- + + ＋ + {tokens(_user.balance)} Tokens + - {#unless :item.hide} -
  • - 
    -      
    
-          
-      
    
-      
    
-          {#if @reroll}
-          
-          {else}
-          {:item.value}
-          {/}
-      
    
-      
    
-          {#if :item.icon}
-           {:item.text}
-          {else}
-          
-              
-              
-          
    		{:item.text}
    
-          {/}
-
-      
    
-
    -
    • - {/} \ No newline at end of file + {#unless :item.hide} +
  • + +
    + +
    + + +
    + {#if @reroll} + ⟲ + {else} + + {:item.value} + + + {/} +
    + + +

    {:item.text}

    +
    • + {/} \ No newline at end of file diff --git a/views/app/tasks.html b/views/app/tasks.html index 0f2ea4b69a..c038cfdb8d 100644 --- a/views/app/tasks.html +++ b/views/app/tasks.html @@ -1,235 +1,270 @@ -
    -

    Habits

    - -
      {#each _habitList as :task}{/}
    + + +
    +
    +

    Habits

    + +
      {#each _habitList as :task}{/}
    +
    -
    -

    Daily

    - -
      {#each _dailyList as :task}{/}
    + +
    +
    +

    Daily

    + +
      {#each _dailyList as :task}{/}
    +
    -
    -

    Todos

    -
    - -
    -
      - {#each _todoList as :task}{/} -
    -
    - Clear Completed -

     

    -
    - + +
    +
    + + {#if _user.history.todos} - + {/} -  iCal - + + - - +

    Todos

    + +
    + +
    + + +
      + {#each _todoList as :task}{/} +
    + + + + + + +
    -
    - - -
    -

    Rewards

    -
    + +
    +
    + + {#unless _view.activeTabPets} - - - - - - -
    {gold(_user.stats.gp)}
    		{silver(_user.stats.gp)}
    +
    + {gold(_user.stats.gp)} + +
    +
    + {silver(_user.stats.gp)} + +
    + {else} {/} -
    -
    - + +

    Rewards

    - {#if equal(_user.flags.petsEnabled,true)} -
    + + {#if equal(_user.flags.petsEnabled,true)} +
    +
    +
    + +
    + + +
    + {#with _view.items.pets as :pets} + + + {#with :pets[0]}{/} + {#with :pets[1]}{/} + {#with :pets[2]}{/} + {#with :pets[3]}{/} + + + {#with :pets[4]}{/} + {#with :pets[5]}{/} + {#with :pets[6]}{/} + {#with :pets[7]}{/} + + + {#with :pets[8]}{/} + {#with :pets[9]}{/} + {#with :pets[10]}{/} + {#with :pets[11]}{/} + + + {#with :pets[12]}{/} + {#with :pets[13]}{/} + {#with :pets[14]}{/} + {#with :pets[15]}{/} + + + {#with :pets[16]}{/} + +
    + {/} +
    + +
    -
    -
    - +
    -
    - {#with _view.items.pets as :pets} - -
    - {#with :pets[0]}{/} - {#with :pets[1]}{/} - {#with :pets[2]}{/} - {#with :pets[3]}{/} -
    - -
    - {#with :pets[4]}{/} - {#with :pets[5]}{/} - {#with :pets[6]}{/} - {#with :pets[7]}{/} -
    - -
    - {#with :pets[8]}{/} - {#with :pets[9]}{/} - {#with :pets[10]}{/} - {#with :pets[11]}{/} -
    - -
    - {#with :pets[12]}{/} - {#with :pets[13]}{/} - {#with :pets[14]}{/} - {#with :pets[15]}{/} -
    - -
    - {#with :pets[16]}{/} -
    - - - {/} -
    - -
    - - - + + {else} + + {/}
    - {else} - - {/}
    + -
    - - + + +
    +
    +
  • - 
    -            
    
+        
+        
+        
    
+            
+            
+            
+            
+            
+            
+            {#if :task.history}
+            
+            {/}
+            
+            {#if :task.notes}
+            
+            {/}
+        
    
 
-                
    
-                    
-                    
-                    {#if :task.history}
-                    
-                        
-                    
-                    {/}
-                
    
+        
+        
    
+            
+            {#if equal(:task.type, 'habit')}
+            {#if :task.up}＋{/}
+            {#if :task.down}−{/}
+            
+            
+            {else if equal(:task.type, 'reward')}
+            
+                {:task.value}
+                
+            
+            
+            
+            {else}
+            
+                
+                
+            
+            {/}
+        
    
 
-                {#if :task.notes}
-                
-                {/}
-            
    
+        
+        
    {:task.text}
    
 
-            
    
-                
-                {#if equal(:task.type, 'habit')}
-                {#if :task.up}{/}
-                {#if :task.down}{/}
-                
-                {else if equal(:task.type, 'reward')}
-                {:task.value}
-                
-                {else}
-                
-                {/}
-            
    
-            
    {:task.text}
    
-
-            
-
    + +
    • + -