Merge branch 'develop' of github.com:HabitRPG/habitrpg into develop

This commit is contained in:
Blade Barringer 2014-12-24 09:02:20 -06:00
commit 0339bdf43f
4 changed files with 245 additions and 139 deletions

View file

@ -30,6 +30,7 @@ future re: pets and whatnot, this is just temporary.
.avatar-level, .avatar-name
position: absolute
@extend $hrpg-label
z-index: 2
.avatar-level
bottom: 4px
right: 4px

View file

@ -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

View file

@ -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

View file

@ -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]')