mirror of
https://github.com/sudoxnym/habitica.git
synced 2026-07-31 15:09:32 +00:00
Merge pull request #624 from zakkain/ui-tweaks
Time to update the dev preview again!
This commit is contained in:
Tyler Renelle
commit
3f251c4b32
14 changed files with 861 additions and 340 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -71,7 +71,6 @@ setupSortable = (model) ->
|
|||
dropOnEmpty: false
|
||||
cursor: "move"
|
||||
items: "li"
|
||||
opacity: 0.4
|
||||
scroll: true
|
||||
axis: 'y'
|
||||
update: (e, ui) ->
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
32
styles/app/helpers.styl
Normal file
32
styles/app/helpers.styl
Normal file
|
|
@ -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
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%)
|
||||
31
styles/app/responsive.styl
Normal file
31
styles/app/responsive.styl
Normal file
|
|
@ -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
|
||||
82
styles/app/scrollbars.styl
Normal file
82
styles/app/scrollbars.styl
Normal file
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
// 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
|
||||
|
|
@ -12,8 +12,10 @@
|
|||
HabitRPG | Gamify Your Life
|
||||
|
||||
<Head:>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<!-- webfonts -->
|
||||
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,700italic' rel='stylesheet' type='text/css'>
|
||||
|
||||
<Header:>
|
||||
<app:modals:modals />
|
||||
|
|
@ -26,9 +28,9 @@
|
|||
<Body:>
|
||||
<br/>
|
||||
<div id="notification-area"></div>
|
||||
<div id=wrap class="container-fluid">
|
||||
<div id="wrap">
|
||||
<app:alerts:alerts />
|
||||
<div id=main class="row-fluid">
|
||||
<div id=main class="grid">
|
||||
<app:taskLists />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,12 @@
|
|||
<rewardsTab:>
|
||||
<!-- add new reward -->
|
||||
<app:newTask type="reward" inputValue="{_newReward}" placeHolder="New Reward" />
|
||||
|
||||
{#if _rewardList}
|
||||
<ul class='rewards'>
|
||||
{#each _rewardList as :task}<app:task />{/}
|
||||
</ul>
|
||||
{/}
|
||||
|
||||
|
||||
{#if _user.flags.itemsEnabled}
|
||||
|
|
@ -16,50 +21,40 @@
|
|||
{/}
|
||||
|
||||
<pet:>
|
||||
<div class="span3 shop-pet" rel=tooltip title="{.text} - {.value} Tokens">
|
||||
<div style='position:relative'>
|
||||
{#if _user.items.pets[.name]}<i class='icon-ok shop-pet-owned-check'></i>{/}
|
||||
<img x-bind="click:selectPet" data-pet='{.name}' src='img/sprites/{.icon}'/>
|
||||
</div>
|
||||
</div>
|
||||
<td class="{{#if _user.items.pets[.name]}}active-pet{{/}}">
|
||||
<img rel=tooltip title="{.text} - {.value} Tokens" x-bind="click:selectPet" data-pet='{.name}' src='img/sprites/{.icon}'/>
|
||||
</td>
|
||||
|
||||
|
||||
<userTokens:>
|
||||
<div class="pull-right">
|
||||
<div class="input-append">
|
||||
<span class="uneditable-input" style="width:auto;">{tokens(_user.balance)}</span>
|
||||
<span class="add-on">Tokens</span>
|
||||
</div>
|
||||
</div>
|
||||
<!--<span class="well pull-right">Tokens: {tokens(_user.balance)}</span>-->
|
||||
<a class="pull-right token-wallet">
|
||||
<span class="task-action-btn tile flush bright add-token-btn">＋</span>
|
||||
<span class="task-action-btn tile flush neutral">{tokens(_user.balance)} Tokens</span>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
<item:>
|
||||
{#unless :item.hide}
|
||||
<li class="task reward item">
|
||||
<pre>
|
||||
<div class="task-meta-controls">
|
||||
<span rel="popover" data-trigger="hover" data-placement="left" data-content="{:item.notes}" data-original-title="{:item.text}" class='task-notes'><i class="icon-comment"></i></span>
|
||||
</div>
|
||||
<div class="task-controls">
|
||||
{#if @reroll}
|
||||
<a href="#" data-toggle="modal" data-target="#reroll-modal" class="item-buy-link" style='cursor:pointer'><i class=icon-retweet></i></a>
|
||||
{else}
|
||||
<a x-bind=click:buyItem class="item-buy-link" data-type={:item.type} data-value={:item.value} data-index={:item.index}>{:item.value}<img src="/img/coin_single_gold.png"/></a>
|
||||
{/}
|
||||
</div>
|
||||
<div class="task-text">
|
||||
{#if :item.icon}
|
||||
<img src="/img/sprites/{:item.icon}" /> {:item.text}
|
||||
{else}
|
||||
<table class='shop-table'><tr>
|
||||
<td><div class="shop_{:item.classes} shop-sprite"></div></td>
|
||||
<td>{:item.text}</td>
|
||||
</tr></table>
|
||||
{/}
|
||||
|
||||
</div>
|
||||
</pre>
|
||||
</li>
|
||||
{/}
|
||||
{#unless :item.hide}
|
||||
<li class="task reward-item">
|
||||
<!-- right-hand side control buttons -->
|
||||
<div class="task-meta-controls">
|
||||
<span rel="popover" data-trigger="hover" data-placement="left" data-content="{:item.notes}" data-original-title="{:item.text}" class='task-notes'><i class="icon-comment"></i></span>
|
||||
</div>
|
||||
|
||||
<!-- left-hand size commands -->
|
||||
<div class="task-controls">
|
||||
{#if @reroll}
|
||||
<a class="task-action-btn btn-reroll" data-toggle="modal" data-target="#reroll-modal">⟲</a>
|
||||
{else}
|
||||
<a class="money btn-buy item-btn" x-bind=click:buyItem data-type={:item.type} data-value={:item.value} data-index={:item.index}>
|
||||
<span class="reward-cost">{:item.value}</span>
|
||||
<span class='shop_gold'></span>
|
||||
</a>
|
||||
{/}
|
||||
</div>
|
||||
<!-- main content -->
|
||||
<span class="shop_{:item.classes} shop-sprite item-img"></span>
|
||||
<p class="task-text">{:item.text}</p>
|
||||
</li>
|
||||
{/}
|
||||
|
|
@ -1,235 +1,270 @@
|
|||
<taskLists:>
|
||||
<!--helpTitle & helpContent moved to tour -->
|
||||
<div class="span3 well habits">
|
||||
<h2>Habits</h2>
|
||||
<app:newTask type="habit" inputValue="{_newHabit}" placeHolder="New Habit" />
|
||||
<ul class="habits">{#each _habitList as :task}<app:task />{/}</ul>
|
||||
|
||||
<!-- Habits Column -->
|
||||
<div class="module">
|
||||
<div class="task-column habits">
|
||||
<h2 class="task-column_title">Habits</h2>
|
||||
<app:newTask type="habit" inputValue="{_newHabit}" placeHolder="New Habit" />
|
||||
<ul class="habits">{#each _habitList as :task}<app:task />{/}</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span3 well dailys">
|
||||
<h2>Daily</h2>
|
||||
<app:newTask type="daily" inputValue="{_newDaily}" placeHolder="New Daily" />
|
||||
<ul class='dailys'>{#each _dailyList as :task}<app:task />{/}</ul>
|
||||
<!-- Dailys Column -->
|
||||
<div class="module">
|
||||
<div class="task-column dailys">
|
||||
<h2 class="task-column_title">Daily</h2>
|
||||
<app:newTask type="daily" inputValue="{_newDaily}" placeHolder="New Daily" />
|
||||
<ul class='dailys'>{#each _dailyList as :task}<app:task />{/}</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span3 well todos context-enabled context-uncompleted tabbable tabs-below" id="todo-well">
|
||||
<h2>Todos</h2>
|
||||
<div class="display-context-dependant show-for-uncompleted">
|
||||
<app:newTask type="todo" inputValue="{_newTodo}" placeHolder="New Todo" />
|
||||
</div>
|
||||
<ul class='todos task-list'>
|
||||
{#each _todoList as :task}<app:task />{/}
|
||||
</ul>
|
||||
<div class="display-context-dependant show-for-completed">
|
||||
<a class='btn' x-bind=click:clearCompleted>Clear Completed</a>
|
||||
<p> </p>
|
||||
</div>
|
||||
<span class='pull-right'>
|
||||
<!-- Todos Column -->
|
||||
<div class="module">
|
||||
<div class="task-column todos context-enabled context-uncompleted tabbable tabs-below" id="todo-well">
|
||||
<!-- todo export/graph options -->
|
||||
<span class='option-box pull-right'>
|
||||
{#if _user.history.todos}
|
||||
<a x-bind=click:toggleChart data-toggle-id="todos-chart" data-history-path="_user.history.todos" rel=tooltip title="Progress"><i class=icon-signal></i></a>
|
||||
<a class="option-action" x-bind=click:toggleChart data-toggle-id="todos-chart" data-history-path="_user.history.todos" rel=tooltip title="Progress"><i class=icon-signal></i></a>
|
||||
{/}
|
||||
<a href="/v1/users/{{_user.id}}/calendar.ics?apiToken={{_user.apiToken}}"><img src='/img/calendar_ical.png' title="iCal" alt="iCal" rel=tooltip /></a>
|
||||
<!-- <a target="_blank" href="https://www.google.com/calendar/render?cid={{encodeiCalLink(_user.id, _user.apiToken)}}"><img src='/img/calendar_google.png' title="Google Calendar" alt="Google Calendar" rel=tooltip /></a>-->
|
||||
<a class="option-action" href="/v1/users/{{_user.id}}/calendar.ics?apiToken={{_user.apiToken}}" rel=tooltip title="iCal"><i class=icon-calendar></i></a>
|
||||
<!-- <a href="https://www.google.com/calendar/render?cid={{encodeiCalLink(_user.id, _user.apiToken)}}" rel=tooltip title="Google Calendar"><i class=icon-calendar></i></a> -->
|
||||
</span>
|
||||
<div id="todos-chart" style="display:none;"></div>
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a x-bind=click:changeContext data-target="#todo-well" data-context="context-uncompleted">Remaining</a></li>
|
||||
<li><a x-bind=click:changeContext data-target="#todo-well" data-context="context-completed">Complete</a></li>
|
||||
</ul>
|
||||
<h2 class="task-column_title">Todos</h2>
|
||||
|
||||
<!-- create new todo -->
|
||||
<div class="display-context-dependant show-for-uncompleted">
|
||||
<app:newTask type="todo" inputValue="{_newTodo}" placeHolder="New Todo" />
|
||||
</div>
|
||||
|
||||
<!-- list of all the todos -->
|
||||
<ul class='todos task-list'>
|
||||
{#each _todoList as :task}<app:task />{/}
|
||||
</ul>
|
||||
|
||||
<button class='task-action-btn tile spacious bright display-context-dependant show-for-completed' x-bind=click:clearCompleted>Clear Completed</button>
|
||||
<div id="todos-chart" style="display:none;"></div>
|
||||
|
||||
<!-- remaining/completed tabs -->
|
||||
<ul class="todo-status-toggler nav nav-tabs">
|
||||
<li class="active"><a x-bind=click:changeContext data-target="#todo-well" data-context="context-uncompleted">Remaining</a></li>
|
||||
<li><a x-bind=click:changeContext data-target="#todo-well" data-context="context-completed">Complete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span3 well rewards">
|
||||
|
||||
<!--Title -->
|
||||
<div class="row-fluid">
|
||||
<div class="span6"><h2>Rewards</h2></div>
|
||||
<div class="span6">
|
||||
<!-- Rewards Column -->
|
||||
<div class="module">
|
||||
<div class="task-column rewards">
|
||||
<!-- cash or tokens -->
|
||||
<span class='option-box pull-right wallet'>
|
||||
{#unless _view.activeTabPets}
|
||||
<table><tr>
|
||||
<td>{gold(_user.stats.gp)} </td>
|
||||
<td><div class='shop_gold' rel='tooltip' title='Gold'></div></td>
|
||||
<td>{silver(_user.stats.gp)} </td>
|
||||
<td><div class='shop_silver' rel='tooltip' title='Silver'></div></td>
|
||||
<!--<td>{copper(_user.stats.gp)} </td>
|
||||
<td><div class='shop_copper' rel='tooltip' title='shop_copper'></div></td>-->
|
||||
</tr></table>
|
||||
<div class="money">
|
||||
{gold(_user.stats.gp)}
|
||||
<span class='shop_gold' rel='tooltip' title='Gold'></span>
|
||||
</div>
|
||||
<div class="money">
|
||||
{silver(_user.stats.gp)}
|
||||
<span class='shop_silver' rel='tooltip' title='Silver'></span>
|
||||
</div>
|
||||
<!-- <div class="money">
|
||||
{copper(_user.stats.gp)}
|
||||
<span class='shop_copper' rel='tooltip' title='Copper'></span>
|
||||
</div> -->
|
||||
{else}
|
||||
<app:userTokens />
|
||||
{/}
|
||||
</div>
|
||||
</div>
|
||||
<app:newTask type="reward" inputValue="{_newReward}" placeHolder="New Reward" />
|
||||
</span>
|
||||
<h2 class="task-column_title">Rewards</h2>
|
||||
|
||||
{#if equal(_user.flags.petsEnabled,true)}
|
||||
<div class='tabbable tabs-below'>
|
||||
<!-- if pets are enabled, make tabs -->
|
||||
{#if equal(_user.flags.petsEnabled,true)}
|
||||
<div class='tabbable tabs-below'>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="rewards-tab">
|
||||
<app:rewardsTab />
|
||||
</div>
|
||||
|
||||
<!-- pets pane -->
|
||||
<div class="tab-pane pet-grid" id="pets-tab">
|
||||
{#with _view.items.pets as :pets}
|
||||
<table>
|
||||
<tr>
|
||||
{#with :pets[0]}<app:pet />{/}
|
||||
{#with :pets[1]}<app:pet />{/}
|
||||
{#with :pets[2]}<app:pet />{/}
|
||||
{#with :pets[3]}<app:pet />{/}
|
||||
</tr>
|
||||
<tr>
|
||||
{#with :pets[4]}<app:pet />{/}
|
||||
{#with :pets[5]}<app:pet />{/}
|
||||
{#with :pets[6]}<app:pet />{/}
|
||||
{#with :pets[7]}<app:pet />{/}
|
||||
</tr>
|
||||
<tr>
|
||||
{#with :pets[8]}<app:pet />{/}
|
||||
{#with :pets[9]}<app:pet />{/}
|
||||
{#with :pets[10]}<app:pet />{/}
|
||||
{#with :pets[11]}<app:pet />{/}
|
||||
</tr>
|
||||
<tr>
|
||||
{#with :pets[12]}<app:pet />{/}
|
||||
{#with :pets[13]}<app:pet />{/}
|
||||
{#with :pets[14]}<app:pet />{/}
|
||||
{#with :pets[15]}<app:pet />{/}
|
||||
</tr>
|
||||
<tr>
|
||||
{#with :pets[16]}<app:pet />{/}
|
||||
</tr>
|
||||
</table>
|
||||
{/}
|
||||
</div>
|
||||
<!--<div class="tab-pane" id="mounts-tab">...</div>-->
|
||||
</div>
|
||||
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="rewards-tab">
|
||||
<app:rewardsTab />
|
||||
<ul class="nav nav-tabs" id="rewardsTabs">
|
||||
<li class="active"><a href="#rewards-tab" data-toggle="tab" x-bind="click:activateRewardsTab">Rewards</a></li>
|
||||
<li><a href="#pets-tab" id='pets-tab' data-toggle="tab" x-bind='click:activatePetsTab'>Pets</a></li>
|
||||
<!--<li><a href="#mounts-tab" data-toggle="tab">Mounts</a></li>-->
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="pets-tab">
|
||||
{#with _view.items.pets as :pets}
|
||||
|
||||
<div class="row-fluid">
|
||||
{#with :pets[0]}<app:pet />{/}
|
||||
{#with :pets[1]}<app:pet />{/}
|
||||
{#with :pets[2]}<app:pet />{/}
|
||||
{#with :pets[3]}<app:pet />{/}
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
{#with :pets[4]}<app:pet />{/}
|
||||
{#with :pets[5]}<app:pet />{/}
|
||||
{#with :pets[6]}<app:pet />{/}
|
||||
{#with :pets[7]}<app:pet />{/}
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
{#with :pets[8]}<app:pet />{/}
|
||||
{#with :pets[9]}<app:pet />{/}
|
||||
{#with :pets[10]}<app:pet />{/}
|
||||
{#with :pets[11]}<app:pet />{/}
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
{#with :pets[12]}<app:pet />{/}
|
||||
{#with :pets[13]}<app:pet />{/}
|
||||
{#with :pets[14]}<app:pet />{/}
|
||||
{#with :pets[15]}<app:pet />{/}
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
{#with :pets[16]}<app:pet />{/}
|
||||
</div>
|
||||
|
||||
|
||||
{/}
|
||||
</div>
|
||||
<!--<div class="tab-pane" id="mounts-tab">...</div>-->
|
||||
</div>
|
||||
|
||||
|
||||
<ul class="nav nav-tabs" id="rewardsTabs">
|
||||
<li class="active"><a href="#rewards-tab" data-toggle="tab" x-bind="click:activateRewardsTab">Rewards</a></li>
|
||||
<li><a href="#pets-tab" id='pets-tab' data-toggle="tab" x-bind='click:activatePetsTab'>Pets</a></li>
|
||||
<!--<li><a href="#mounts-tab" data-toggle="tab">Mounts</a></li>-->
|
||||
</ul>
|
||||
<!-- if pets are disabled, just do rewards tab -->
|
||||
{else}
|
||||
<app:rewardsTab />
|
||||
{/}
|
||||
</div>
|
||||
{else}
|
||||
<app:rewardsTab />
|
||||
{/}
|
||||
</div>
|
||||
|
||||
<!-- Templates -->
|
||||
<newTask:>
|
||||
<form class="form-inline new-task-form" id="new-{@type}" data-task-type="{@type}" x-bind="submit:addTask">
|
||||
<input value="{@inputValue}" type="text" name="new-task" placeholder="{@placeHolder}"/>
|
||||
<input class="btn" type="submit" value="Add" />
|
||||
<form class="addtask-form form-inline new-task-form" id="new-{@type}" data-task-type="{@type}" x-bind="submit:addTask">
|
||||
<span class="addtask-field"><input value="{@inputValue}" type="text" name="new-task" placeholder="{@placeHolder}"/></span>
|
||||
<input class="addtask-btn" type="submit" value="＋">
|
||||
</form>
|
||||
<hr>
|
||||
|
||||
<!-- all the parts of a single task -->
|
||||
<task:>
|
||||
<li data-id={{:task.id}} class="task {taskClasses(:task.type, :task.completed, :task.value, :task.repeat)}">
|
||||
<pre>
|
||||
<div class="task-meta-controls">
|
||||
|
||||
<!-- right-hand side control buttons -->
|
||||
<div class="task-meta-controls">
|
||||
<!-- edit -->
|
||||
<a x-bind=click:toggleTaskEdit data-hide-id="{{:task.id}}-chart" data-toggle-id="{{:task.id}}-edit" rel=tooltip title="Edit"><i class="icon-pencil"></i></a>
|
||||
<!-- delete -->
|
||||
<a x-bind=click:del rel=tooltip title="Delete"><i class="icon-trash"></i></a>
|
||||
<!-- chart -->
|
||||
<!-- removing for now cuz it's broken -->
|
||||
{#if :task.history}
|
||||
<!-- <a x-bind=click:toggleChart data-toggle-id="{{:task.id}}-chart" data-hide-id="{{:task.id}}-edit" data-history-path="_user.tasks.{{:task.id}}.history" rel="tooltip" title="Progress"><i class="icon-signal"></i></a> -->
|
||||
{/}
|
||||
<!-- notes -->
|
||||
{#if :task.notes}
|
||||
<span rel="popover" data-trigger="hover" data-placement="left" data-content="{:task.notes}" data-original-title="{:task.text}" class='task-notes'><i class="icon-comment"></i></span>
|
||||
{/}
|
||||
</div>
|
||||
|
||||
<div class="hover-show">
|
||||
<a x-bind=click:toggleTaskEdit data-hide-id="{{:task.id}}-chart" data-toggle-id="{{:task.id}}-edit" rel=tooltip title="Edit"><i class="icon-pencil"></i></a>
|
||||
<a x-bind=click:del rel=tooltip title="Delete"><i class="icon-trash"></i></a>
|
||||
{#if :task.history}
|
||||
<a x-bind=click:toggleChart data-toggle-id="{{:task.id}}-chart" data-hide-id="{{:task.id}}-edit" data-history-path="_user.tasks.{{:task.id}}.history" rel="tooltip" title="Progress">
|
||||
<i class="icon-signal"></i>
|
||||
</a>
|
||||
{/}
|
||||
</div>
|
||||
<!-- left-hand side checkbox -->
|
||||
<div class="task-controls">
|
||||
<!-- Habits -->
|
||||
{#if equal(:task.type, 'habit')}
|
||||
{#if :task.up}<a class="task-action-btn" data-direction=up x-bind=click:score>＋</a>{/}
|
||||
{#if :task.down}<a class="task-action-btn" data-direction=down x-bind=click:score>−</a>{/}
|
||||
|
||||
<!-- Rewards -->
|
||||
{else if equal(:task.type, 'reward')}
|
||||
<a class="money btn-buy" x-bind=click:score data-direction=down>
|
||||
<span class="reward-cost">{:task.value}</span>
|
||||
<span class='shop_gold'></span>
|
||||
</a>
|
||||
|
||||
<!-- Daily & Todos -->
|
||||
{else}
|
||||
<span class="task-checker action-yesno">
|
||||
<input type=checkbox id="box-{{:task.id}}" class="visuallyhidden focusable" checked="{:task.completed}">
|
||||
<label for="box-{{:task.id}}"></label>
|
||||
</span>
|
||||
{/}
|
||||
</div>
|
||||
|
||||
{#if :task.notes}
|
||||
<span rel="popover" data-trigger="hover" data-placement="left" data-content="{:task.notes}" data-original-title="{:task.text}" class='task-notes'><i class="icon-comment"></i></span>
|
||||
{/}
|
||||
</div>
|
||||
<!-- main content -->
|
||||
<p class="task-text">{:task.text}</p>
|
||||
|
||||
<div class="task-controls">
|
||||
<!-- Habits -->
|
||||
{#if equal(:task.type, 'habit')}
|
||||
{#if :task.up}<a data-direction=up x-bind=click:score><img src="/img/add.png" /></a>{/}
|
||||
{#if :task.down}<a data-direction=down x-bind=click:score><img src="/img/remove.png" /></a>{/}
|
||||
<!-- Rewards -->
|
||||
{else if equal(:task.type, 'reward')}
|
||||
<a x-bind=click:score class="buy-link" data-direction=down>{:task.value}<img src="/img/coin_single_gold.png"/></a>
|
||||
<!-- Daily & Todos -->
|
||||
{else}
|
||||
<input type=checkbox checked="{:task.completed}"/>
|
||||
{/}
|
||||
</div>
|
||||
<div class="task-text">{:task.text}</div>
|
||||
|
||||
<app:taskMeta />
|
||||
</pre>
|
||||
<!-- edit/options dialog -->
|
||||
<app:taskMeta />
|
||||
</li>
|
||||
|
||||
<!-- task edit/options -->
|
||||
<taskMeta:>
|
||||
<div style="display:none;" id={{:task.id}}-edit>
|
||||
<hr/>
|
||||
<div id="{{:task.id}}-edit" class="task-options visuallyhidden">
|
||||
<form x-bind=submit:toggleTaskEdit data-toggle-id="{{:task.id}}-edit">
|
||||
<div class=control-group>
|
||||
<label>Text</label><input type=text value={:task.text} />
|
||||
<label>Notes</label><textarea rows=3>{:task.notes}</textarea>
|
||||
</div>
|
||||
<!-- text & notes -->
|
||||
<fieldset class="option-group">
|
||||
<label class="option-title">Text</label><input class="option-content" type=text value={:task.text}>
|
||||
<label class="option-title">Extra Notes</label><textarea class="option-content" rows=3>{:task.notes}</textarea>
|
||||
</fieldset>
|
||||
|
||||
<!-- if Habit, plus/minus command options -->
|
||||
{#if equal(:task.type, 'habit')}
|
||||
<hr/>
|
||||
<label>Direction</label>
|
||||
<div class="control-group">
|
||||
<label class="checkbox inline"><input type=checkbox checked={:task.up}>Up</label>
|
||||
<label class="checkbox inline"><input type=checkbox checked={:task.down}>Down</label>
|
||||
</div>
|
||||
<fieldset class="option-group">
|
||||
<legend class="option-title">Direction/Actions</legend>
|
||||
<span class="task-checker action-plusminus select-toggle">
|
||||
<input class="visuallyhidden focusable" type=checkbox id="{{:task.id}}-option-plus" checked={:task.up}>
|
||||
<label for="{{:task.id}}-option-plus"></label>
|
||||
</span>
|
||||
<span class="task-checker action-plusminus select-toggle">
|
||||
<input class="visuallyhidden focusable" type=checkbox id="{{:task.id}}-option-minus" checked={:task.down}>
|
||||
<label for="{{:task.id}}-option-minus"></label>
|
||||
</span>
|
||||
</fieldset>
|
||||
|
||||
<!-- if Daily, calendar -->
|
||||
{else if equal(:task.type, 'daily')}
|
||||
<hr/>
|
||||
<label>Repeat</label>
|
||||
<div class="control-group btn-group repeat-days">
|
||||
<!-- note, does not use data-toggle="buttons-checkbox" - it would interfere with our own click binding -->
|
||||
<button type="button" class="btn btn-info {#if :task.repeat.su}active{/}" data-day='su' x-bind=click:toggleDay>Su</button>
|
||||
<button type="button" class="btn btn-info {#if :task.repeat.m}active{/}" data-day='m' x-bind=click:toggleDay>M</button>
|
||||
<button type="button" class="btn btn-info {#if :task.repeat.t}active{/}" data-day='t' x-bind=click:toggleDay>T</button>
|
||||
<button type="button" class="btn btn-info {#if :task.repeat.w}active{/}" data-day='w' x-bind=click:toggleDay>W</button>
|
||||
<button type="button" class="btn btn-info {#if :task.repeat.th}active{/}" data-day='th' x-bind=click:toggleDay>Th</button>
|
||||
<button type="button" class="btn btn-info {#if :task.repeat.f}active{/}" data-day='f' x-bind=click:toggleDay>F</button>
|
||||
<button type="button" class="btn btn-info {#if :task.repeat.s}active{/}" data-day='s' x-bind=click:toggleDay>S</button>
|
||||
</div>
|
||||
<fieldset class="option-group">
|
||||
<legend class="option-title">Repeat</legend>
|
||||
<div class="task-controls tile-group repeat-days">
|
||||
<!-- note, does not use data-toggle="buttons-checkbox" - it would interfere with our own click binding -->
|
||||
<button type="button" class="task-action-btn tile {#if :task.repeat.su}active{/}" data-day='su' x-bind=click:toggleDay>Su</button>
|
||||
<button type="button" class="task-action-btn tile {#if :task.repeat.m}active{/}" data-day='m' x-bind=click:toggleDay>M</button>
|
||||
<button type="button" class="task-action-btn tile {#if :task.repeat.t}active{/}" data-day='t' x-bind=click:toggleDay>T</button>
|
||||
<button type="button" class="task-action-btn tile {#if :task.repeat.w}active{/}" data-day='w' x-bind=click:toggleDay>W</button>
|
||||
<button type="button" class="task-action-btn tile {#if :task.repeat.th}active{/}" data-day='th' x-bind=click:toggleDay>Th</button>
|
||||
<button type="button" class="task-action-btn tile {#if :task.repeat.f}active{/}" data-day='f' x-bind=click:toggleDay>F</button>
|
||||
<button type="button" class="task-action-btn tile {#if :task.repeat.s}active{/}" data-day='s' x-bind=click:toggleDay>S</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- if Reward, pricing -->
|
||||
{else if equal(:task.type, 'reward')}
|
||||
<hr/>
|
||||
<div class=control-group>
|
||||
<label>Price</label>
|
||||
<div class="input-append">
|
||||
<input class="span5" size="16" type="number" min="0" value={:task.value}><span class="add-on">Gold</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- if Todo, the due date -->
|
||||
{else if equal(:task.type, 'todo')}
|
||||
<hr/>
|
||||
<div class=control-group>
|
||||
<label>Due Date</label>
|
||||
<input type="text" value="{:task.date}" data-date-format="mm/dd/yyyy" class="datepicker" />
|
||||
<div><small>Enter as date, eg 02/19/2013 or 02-19-2013</small></div>
|
||||
</div>
|
||||
<fieldset class="option-group">
|
||||
<legend class="option-title">Due Date</legend>
|
||||
<input class="option-content datepicker" type="text" value="{:task.date}" data-date-format="mm/dd/yyyy">
|
||||
</fieldset>
|
||||
{/}
|
||||
|
||||
<hr/>
|
||||
|
||||
<!-- Advanced Options -->
|
||||
{#unless equal(:task.type, 'reward')}
|
||||
<div>
|
||||
<a x-bind="click:tasksToggleAdvanced">Advanced</a>
|
||||
<div class='advanced hide'>
|
||||
|
||||
<label>Difficulty <a class='priority-multiplier-help' href="https://trello.com/card/priority-multiplier/50e5d3684fe3a7266b0036d6/17" target="_blank"><i class='icon-question-sign'></i></a></label>
|
||||
<div class="control-group btn-group priority-multiplier" data-id="{{:task.id}}">
|
||||
<button type="button" class="btn btn-info {#if equal(:task.priority,'!')}active{/}{#unless :task.priority}active{/}" data-priority='!' x-bind=click:tasksSetPriority>Easy</button>
|
||||
<button type="button" class="btn btn-info {#if equal(:task.priority,'!!')}active{/}" data-priority='!!' x-bind=click:tasksSetPriority>Medium</button>
|
||||
<button type="button" class="btn btn-info {#if equal(:task.priority,'!!!')}active{/}" data-priority='!!!' x-bind=click:tasksSetPriority>Hard</button>
|
||||
</div>
|
||||
<p x-bind="click:tasksToggleAdvanced" class="option-title mega">Advanced Options</p>
|
||||
<fieldset class="option-group advanced-option visuallyhidden">
|
||||
<legend class="option-title"><a class='priority-multiplier-help' href="https://trello.com/card/priority-multiplier/50e5d3684fe3a7266b0036d6/17" target="_blank"><i class='icon-question-sign'></i></a> Difficulty</legend>
|
||||
<div class="task-controls tile-group priority-multiplier" data-id="{{:task.id}}">
|
||||
<button type="button" class="task-action-btn tile {#if equal(:task.priority,'!')}active{/}{#unless :task.priority}active{/}" data-priority='!' x-bind=click:tasksSetPriority>Easy</button>
|
||||
<button type="button" class="task-action-btn tile {#if equal(:task.priority,'!!')}active{/}" data-priority='!!' x-bind=click:tasksSetPriority>Medium</button>
|
||||
<button type="button" class="task-action-btn tile {#if equal(:task.priority,'!!!')}active{/}" data-priority='!!!' x-bind=click:tasksSetPriority>Hard</button>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
</fieldset>
|
||||
{/}
|
||||
<button type=submit class="btn" x-bind="click:tasksSaveAndClose">Save & Close</button>
|
||||
<button type=submit class="task-action-btn tile spacious" x-bind="click:tasksSaveAndClose">Save & Close</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue