mirror of
https://github.com/sudoxnym/habitica.git
synced 2026-08-04 09:39:23 +00:00
yarr, fix all teh bugs
This commit is contained in:
Daniel Saewitz
commit
7083e7a103
27 changed files with 1071 additions and 439 deletions
|
|
@ -4,7 +4,7 @@
|
|||
"version": "0.0.0-150",
|
||||
"main": "./server.js",
|
||||
"dependencies": {
|
||||
"derby": "git://github.com/lefnire/derby#habitrpg",
|
||||
"derby": "git://github.com/Unroll-Me/derby#master",
|
||||
"racer": "git://github.com/lefnire/racer#habitrpg",
|
||||
"racer-db-mongo": "git://github.com/lefnire/racer-db-mongo#habitrpg",
|
||||
"derby-ui-boot": "git://github.com/codeparty/derby-ui-boot#master",
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
BIN
public/img/sprites/Egg_Sprite_Sheet.png
Normal file
BIN
public/img/sprites/Egg_Sprite_Sheet.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
17
public/img/sprites/PetEggs.css
Normal file
17
public/img/sprites/PetEggs.css
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
#PetEggs {
|
||||
/* egg sprite size */
|
||||
width: 48px;
|
||||
height: 51px;
|
||||
/* link to sprite sheet image */
|
||||
background-image: url(Egg_Sprite_Sheet.png);
|
||||
}
|
||||
/* defines where in the sheet the eggs are */
|
||||
.WolfEgg{background-position: 0px 0px;}
|
||||
.TigerEgg{background-position: 0px -51px;}
|
||||
.PolarBearEgg{background-position: 0px -102px;}
|
||||
.PandaEgg{background-position: 0px -153px;}
|
||||
.LionEgg{background-position: 0px -204px;}
|
||||
.FlyingPigEgg{background-position: 0px -255px;}
|
||||
.DrakeEgg{background-position: 0px -306px;}
|
||||
.CactusEgg{background-position: 0px -357px;}
|
||||
.BearEgg{background-position: 0px -408px;}
|
||||
|
|
@ -4,16 +4,6 @@ moment = require 'moment'
|
|||
|
||||
|
||||
restoreRefs = module.exports.restoreRefs = (model) ->
|
||||
# tnl function
|
||||
model.fn '_tnl', '_user.stats.lvl', (lvl) ->
|
||||
# see https://github.com/lefnire/habitrpg/issues/4
|
||||
# also update in scoring.coffee. TODO create a function accessible in both locations
|
||||
#TODO find a method of calling algos.tnl()
|
||||
if lvl==100
|
||||
0
|
||||
else
|
||||
Math.round(((Math.pow(lvl,2)*0.25)+(10 * lvl) + 139.75)/10)*10
|
||||
|
||||
#refLists
|
||||
_.each ['habit', 'daily', 'todo', 'reward'], (type) ->
|
||||
model.refList "_#{type}List", "_user.tasks", "_user.#{type}Ids"
|
||||
|
|
@ -71,7 +61,6 @@ setupSortable = (model) ->
|
|||
dropOnEmpty: false
|
||||
cursor: "move"
|
||||
items: "li"
|
||||
opacity: 0.4
|
||||
scroll: true
|
||||
axis: 'y'
|
||||
update: (e, ui) ->
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
character = require './character'
|
||||
browser = require './browser'
|
||||
items = require './items'
|
||||
algos = require './algos'
|
||||
|
||||
moment = require 'moment'
|
||||
_ = require 'underscore'
|
||||
|
|
@ -21,6 +22,9 @@ module.exports.username = username = (auth) ->
|
|||
module.exports.view = (view) ->
|
||||
view.fn "username", (auth) -> username(auth)
|
||||
|
||||
view.fn "tnl", algos.tnl
|
||||
|
||||
|
||||
module.exports.app = (appExports, model) ->
|
||||
user = model.at '_user'
|
||||
|
||||
|
|
@ -78,27 +82,6 @@ module.exports.app = (appExports, model) ->
|
|||
appExports.customizeArmorSet = (e, el) ->
|
||||
user.set 'preferences.armorSet', $(el).attr('data-value')
|
||||
|
||||
appExports.chooseEgg = (e, el) ->
|
||||
egg = model.at el
|
||||
|
||||
model.ref '_feedEgg', egg
|
||||
|
||||
appExports.feedEgg = (e, el) ->
|
||||
food = $(el).children('select').val()
|
||||
foods = user.get 'items.food'
|
||||
egg = model.get '_feedEgg'
|
||||
eggs = user.get 'items.eggs'
|
||||
|
||||
foodIdx = foods.indexOf food
|
||||
eggIdx = eggs.indexOf egg
|
||||
|
||||
return alert "You don't own that food :\\" if foodIdx is -1
|
||||
return alert "You don't own that egg :\\" if eggIdx is -1
|
||||
|
||||
user.push 'items.pets', egg.text + '-' + food
|
||||
user.remove 'items.food', foodIdx, 1
|
||||
user.remove 'items.eggs', eggIdx, 1
|
||||
|
||||
appExports.restoreSave = (e, el) ->
|
||||
batch = new BatchUpdate(model)
|
||||
batch.startTransaction()
|
||||
|
|
@ -106,6 +89,13 @@ module.exports.app = (appExports, model) ->
|
|||
batch.set $(this).attr('data-for'), parseInt($(this).val() || 1)
|
||||
batch.commit()
|
||||
|
||||
appExports.toggleHeader = (e, el) ->
|
||||
user.set 'preferences.hideHeader', !user.get('preferences.hideHeader')
|
||||
|
||||
appExports.deleteAccount = (e, el) ->
|
||||
model.del "users.#{user.get('id')}", ->
|
||||
window.location.href = "/logout"
|
||||
|
||||
user.on 'set', 'flags.customizationsNotification', (captures, args) ->
|
||||
return unless captures == true
|
||||
$('.main-avatar').popover('destroy') #remove previous popovers
|
||||
|
|
@ -125,7 +115,7 @@ userSchema =
|
|||
stats: { gp: 0, exp: 0, lvl: 1, hp: 50 }
|
||||
party: { current: null, invitation: null }
|
||||
items: { weapon: 0, armor: 0, head: 0, shield: 0 }
|
||||
preferences: { gender: 'm', skin: 'white', hair: 'blond', armorSet: 'v1', dayStart:0 }
|
||||
preferences: { gender: 'm', skin: 'white', hair: 'blond', armorSet: 'v1', dayStart:0, showHelm: true }
|
||||
habitIds: []
|
||||
dailyIds: []
|
||||
todoIds: []
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
moment = require 'moment'
|
||||
algos = require './algos'
|
||||
|
||||
module.exports.app = (appExports, model) ->
|
||||
user = model.at('_user')
|
||||
|
|
@ -14,7 +15,7 @@ module.exports.app = (appExports, model) ->
|
|||
window.location.reload()
|
||||
|
||||
appExports.cheat = ->
|
||||
user.incr 'stats.exp', model.get '_tnl'
|
||||
user.incr 'stats.exp', algos.tnl(user.get('stats.lvl'))
|
||||
user.incr 'stats.gp', 1000
|
||||
|
||||
appExports.reset = ->
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
||||
|
|
|
|||
|
|
@ -59,8 +59,8 @@ items = module.exports.items =
|
|||
{text: 'Red', name: 'Red', notes: 'Turns your animal into a Red.', value: 3}
|
||||
{text: 'Golden', name: 'Golden', notes: 'Turns your animal into a Golden.', value: 3}
|
||||
{text: 'Desert', name: 'Desert', notes: 'Turns your animal into a Desert.', value: 3}
|
||||
{text: 'CottonCandyPink', name: 'CottonCandyPink', notes: 'Turns your animal into a CottonCandyPink.', value: 3}
|
||||
{text: 'CottonCandyBlue', name: 'CottonCandyBlue', notes: 'Turns your animal into a CottonCandyBlue.', value: 3}
|
||||
{text: 'Cotton Candy Pink', name: 'CottonCandyPink', notes: 'Turns your animal into a CottonCandyPink.', value: 3}
|
||||
{text: 'Cotton Candy Blue', name: 'CottonCandyBlue', notes: 'Turns your animal into a CottonCandyBlue.', value: 3}
|
||||
]
|
||||
|
||||
# add "type" to each item, so we can reference that as "weapon" or "armor" in the html
|
||||
|
|
@ -201,6 +201,7 @@ module.exports.updateStore = updateStore = (model) ->
|
|||
model.set '_view.items.potion', items.potion
|
||||
model.set '_view.items.reroll', items.reroll
|
||||
model.set '_view.items.pets', items.pets
|
||||
model.set '_view.items.food', items.food
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -71,8 +71,7 @@ module.exports.partySubscribe = partySubscribe = (page, model, params, next, cb)
|
|||
module.exports.app = (appExports, model) ->
|
||||
user = model.at('_user')
|
||||
|
||||
user.on 'set', 'flags.partyEnabled', (captures, args) ->
|
||||
return unless captures == true
|
||||
unlockPartiesNotification = ->
|
||||
$('.main-avatar').popover('destroy') #remove previous popovers
|
||||
html = """
|
||||
<div class='party-system-popover'>
|
||||
|
|
@ -89,6 +88,14 @@ module.exports.app = (appExports, model) ->
|
|||
content: html
|
||||
$('.main-avatar').popover 'show'
|
||||
|
||||
appExports.manuallyUnlockParties = ->
|
||||
$("#settings-modal").modal("hide")
|
||||
user.set('flags.partyEnabled', true)
|
||||
unlockPartiesNotification()
|
||||
|
||||
user.on 'set', 'flags.partyEnabled', (captures, args) ->
|
||||
unlockPartiesNotification() if captures == true
|
||||
|
||||
#TODO implement this when we have unsubscribe working properly
|
||||
model.on 'set', '_user.party.invitation', (after, before) ->
|
||||
if !before? and after? # they just got invited
|
||||
|
|
|
|||
|
|
@ -21,6 +21,27 @@ module.exports.app = (appExports, model) ->
|
|||
|
||||
$('#drops-enabled-modal').modal 'show'
|
||||
|
||||
appExports.chooseEgg = (e, el) ->
|
||||
egg = model.at el
|
||||
|
||||
model.ref '_feedEgg', egg
|
||||
|
||||
appExports.feedEgg = (e, el) ->
|
||||
foodName = $(el).children('select').val()
|
||||
myFood = user.get 'items.food'
|
||||
egg = model.get '_feedEgg'
|
||||
eggs = user.get 'items.eggs'
|
||||
|
||||
foodIdx = myFood.indexOf foodName
|
||||
eggIdx = eggs.indexOf egg
|
||||
|
||||
return alert "You don't own that food :\\" if foodIdx is -1
|
||||
return alert "You don't own that egg :\\" if eggIdx is -1
|
||||
|
||||
user.push 'items.pets', egg.text + '-' + foodName
|
||||
user.remove 'items.food', foodIdx, 1
|
||||
user.remove 'items.eggs', eggIdx, 1
|
||||
|
||||
appExports.choosePet = (e, el) ->
|
||||
petArray = $(el).attr('data-pet').split '-'
|
||||
text = petArray[0]
|
||||
|
|
@ -44,3 +65,14 @@ module.exports.app = (appExports, model) ->
|
|||
user.set 'balance', (tokens - pet.value)/4
|
||||
else
|
||||
$('#more-tokens-modal').modal 'show'
|
||||
|
||||
appExports.buyFood = (e, el) ->
|
||||
name = $(el).attr 'data-food'
|
||||
newFood = _.findWhere food, name: name
|
||||
tokens = user.get('balance') * 4
|
||||
if tokens > newFood.value
|
||||
if confirm "Buy this food with #{newFood.value} of your #{tokens} tokens?"
|
||||
user.push 'items.food', newFood.text
|
||||
user.set 'balance', (tokens - newFood.value) / 4
|
||||
else
|
||||
$('#more-tokens-modal').modal 'show'
|
||||
|
|
|
|||
|
|
@ -153,7 +153,7 @@ updateStats = (model, newStats, batch) ->
|
|||
obj.stats.hp = newStats.hp
|
||||
|
||||
if newStats.exp?
|
||||
tnl = model.get '_tnl'
|
||||
tnl = algos.tnl(obj.stats.lvl)
|
||||
#silent = false
|
||||
# if we're at level 100, turn xp to gold
|
||||
if obj.stats.lvl >= 100
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -20,9 +20,15 @@ NO_USER_FOUND = err: "No user found."
|
|||
$ mocha test/api.mocha.coffee
|
||||
###
|
||||
|
||||
###
|
||||
API Status
|
||||
###
|
||||
router.get '/status', (req, res) ->
|
||||
res.json status: 'up'
|
||||
|
||||
###
|
||||
beforeEach auth interceptor
|
||||
###
|
||||
auth = (req, res, next) ->
|
||||
uid = req.headers['x-api-user']
|
||||
token = req.headers['x-api-key']
|
||||
|
|
@ -38,7 +44,9 @@ auth = (req, res, next) ->
|
|||
return res.json 401, NO_USER_FOUND if !req.userObj || _.isEmpty(req.userObj)
|
||||
req._isServer = true
|
||||
next()
|
||||
|
||||
###
|
||||
GET /user
|
||||
###
|
||||
router.get '/user', auth, (req, res) ->
|
||||
user = req.userObj
|
||||
|
||||
|
|
@ -49,12 +57,18 @@ router.get '/user', auth, (req, res) ->
|
|||
|
||||
res.json user
|
||||
|
||||
###
|
||||
GET /user/task/:id
|
||||
###
|
||||
router.get '/user/task/:id', auth, (req, res) ->
|
||||
task = req.userObj.tasks[req.params.id]
|
||||
return res.json 400, err: "No task found." if !task || _.isEmpty(task)
|
||||
|
||||
res.json 200, task
|
||||
|
||||
###
|
||||
validate task
|
||||
###
|
||||
validateTask = (req, res, next) ->
|
||||
task = {}
|
||||
newTask = { type, text, notes, value, up, down, completed } = req.body
|
||||
|
|
@ -85,11 +99,17 @@ validateTask = (req, res, next) ->
|
|||
req.task = task
|
||||
next()
|
||||
|
||||
###
|
||||
PUT /user/task/:id
|
||||
###
|
||||
router.put '/user/task/:id', auth, validateTask, (req, res) ->
|
||||
req.user.set "tasks.#{req.task.id}", req.task
|
||||
|
||||
res.json 200, req.task
|
||||
|
||||
###
|
||||
DELETE /user/task/:id
|
||||
###
|
||||
router.delete '/user/task/:id', auth, validateTask, (req, res) ->
|
||||
taskIds = req.user.get "#{req.task.type}Ids"
|
||||
|
||||
|
|
@ -99,6 +119,9 @@ router.delete '/user/task/:id', auth, validateTask, (req, res) ->
|
|||
|
||||
res.send 204
|
||||
|
||||
###
|
||||
POST /user/task/
|
||||
###
|
||||
router.post '/user/task', auth, validateTask, (req, res) ->
|
||||
task = req.task
|
||||
type = task.type
|
||||
|
|
@ -110,6 +133,9 @@ router.post '/user/task', auth, validateTask, (req, res) ->
|
|||
|
||||
res.json 201, task
|
||||
|
||||
###
|
||||
GET /user/tasks
|
||||
###
|
||||
router.get '/user/tasks', auth, (req, res) ->
|
||||
user = req.userObj
|
||||
return res.json 400, NO_USER_FOUND if !user || _.isEmpty(user)
|
||||
|
|
|
|||
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
|
||||
|
|
@ -8,13 +8,31 @@
|
|||
@import "./items.styl";
|
||||
@import "./alerts.styl";
|
||||
@import "../../public/img/sprites/pet_sprites.css";
|
||||
@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
|
||||
-------------------------------------------------- */
|
||||
|
||||
|
|
@ -35,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;
|
||||
}
|
||||
|
|
@ -132,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,354 @@
|
|||
.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
|
||||
overflow: hidden
|
||||
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:after
|
||||
content: '▨'
|
||||
label:before
|
||||
position: absolute
|
||||
left: 0
|
||||
// hint at completed icon
|
||||
label:hover:before,
|
||||
label:focus:before
|
||||
content: ''
|
||||
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 +362,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
|
||||
|
|
@ -46,7 +46,11 @@
|
|||
<span class='{:p.gender}_skin_{:p.skin}'></span>
|
||||
<span class='{:p.gender}_hair_{:p.hair}'></span>
|
||||
<span class="{equipped(@profile, 'armor')}"></span>
|
||||
<span class="{equipped(@profile, 'head')}"></span>
|
||||
{#if :p.showHelm}
|
||||
<span class="{equipped(@profile, 'head')}"></span>
|
||||
{else}
|
||||
<span class="{:p.gender}_head_0"></span>
|
||||
{/}
|
||||
<span class='{:p.gender}_shield_{@profile.items.shield}'></span>
|
||||
<span class='{:p.gender}_weapon_{@profile.items.weapon}'></span>
|
||||
{/}
|
||||
|
|
@ -67,10 +71,14 @@
|
|||
<menu type="list">
|
||||
<!-- gender -->
|
||||
<li class="customize-menu">
|
||||
<menu label="Gender">
|
||||
<menu label="Head">
|
||||
<button type="button" class="m_head_0 customize-option" data-value="m" x-bind="click:customizeGender"></button>
|
||||
<button type="button" class="f_head_0 customize-option" data-value="f" x-bind="click:customizeGender"></button>
|
||||
</menu>
|
||||
<label class="checkbox">
|
||||
<input type=checkbox checked="{_user.preferences.showHelm}" /> Show Helm
|
||||
</label>
|
||||
|
||||
</li>
|
||||
|
||||
<!-- hair -->
|
||||
|
|
|
|||
|
|
@ -1,40 +1,54 @@
|
|||
<header:>
|
||||
<div class="row-fluid">
|
||||
<div class='char-status {#if gt(_partyMembers.length,1)}span8 offset2 has-party{else}span6 offset3{/}'>
|
||||
{#unless _user.preferences.hideHeader}
|
||||
<div class="row-fluid">
|
||||
<div class='char-status {#if gt(_partyMembers.length,1)}span8 offset2 has-party{else}span6 offset3{/}'>
|
||||
|
||||
<!-- avatar -->
|
||||
<figure class="main-avatar-wrap">
|
||||
<app:avatar:avatar profile={_user} main="true" />
|
||||
</figure>
|
||||
<!-- avatar -->
|
||||
<figure class="main-avatar-wrap">
|
||||
<app:avatar:avatar profile={_user} main="true" />
|
||||
</figure>
|
||||
|
||||
<!-- party -->
|
||||
{#each _partyMembers as :member}
|
||||
{#unless equal(:member.id, _userId)}
|
||||
<figure class="party-avatar-wrap" rel="tooltip" title="{username(:member.auth)}" data-placement="bottom">
|
||||
<app:avatar:avatar profile={:member} party="true" />
|
||||
</figure>
|
||||
{/}
|
||||
{/}
|
||||
<!-- party -->
|
||||
{{#each _partyMembers as :member}}
|
||||
{{#unless equal(:member.id, _userId)}}
|
||||
<figure class="party-avatar-wrap" rel="popover" data-title="{{username(:member.auth)}}" data-placement="bottom" data-trigger="hover" data-html="true" data-content="
|
||||
<div>
|
||||
<div class='progress progress-danger' style='height:5px;'>
|
||||
<div class='bar' style='height: 5px; width: {percent(:member.stats.hp, 50)}%;'></div>
|
||||
</div>
|
||||
<div class='progress progress-warning' style='height:5px;'>
|
||||
<div class='bar' style='height: 5px; width: {percent(:member.stats.exp, tnl(:member.stats.lvl))}%;'></div>
|
||||
</div>
|
||||
<div>GP: {{floor(:member.stats.gp)}}</div>
|
||||
</div>
|
||||
">
|
||||
<!-- Would be way cleaner as a Derby template `data-content="<app:party:member-stats profile={{:member}} />"`, but it was just printing HTML as text -->
|
||||
|
||||
<!-- progress bars -->
|
||||
<div class="progress-bars">
|
||||
<div class="progress progress-danger" rel=tooltip data-placement=bottom title="Health">
|
||||
<div class="bar" style="width: {percent(_user.stats.hp, 50)}%;"></div>
|
||||
<span class="progress-text"><i class=icon-heart></i> {ceil(_user.stats.hp)} / 50</span>
|
||||
<app:avatar:avatar profile={{:member}} party="true" />
|
||||
</figure>
|
||||
{{/}}
|
||||
{{/}}
|
||||
|
||||
<!-- progress bars -->
|
||||
<div class="progress-bars">
|
||||
<div class="progress progress-danger" rel=tooltip data-placement=bottom title="Health">
|
||||
<div class="bar" style="width: {percent(_user.stats.hp, 50)}%;"></div>
|
||||
<span class="progress-text"><i class=icon-heart></i> {ceil(_user.stats.hp)} / 50</span>
|
||||
</div>
|
||||
|
||||
<div class="progress progress-warning" rel=tooltip data-placement=bottom title="Experience">
|
||||
<div class="bar" style="width: {percent(_user.stats.exp,tnl(_user.stats.lvl))}%;"></div>
|
||||
<span class="progress-text">
|
||||
{#if _user.history.exp}
|
||||
<a x-bind=click:toggleChart data-toggle-id="exp-chart" data-history-path="_user.history.exp" rel=tooltip title="Progress"><i class=icon-signal></i></a>
|
||||
{/}
|
||||
<i class=icon-star></i> {floor(_user.stats.exp)} / {tnl(_user.stats.lvl)}
|
||||
</span>
|
||||
</div>
|
||||
<div id="exp-chart" style="display:none;"></div>
|
||||
</div>
|
||||
|
||||
<div class="progress progress-warning" rel=tooltip data-placement=bottom title="Experience">
|
||||
<div class="bar" style="width: {percent(_user.stats.exp,_tnl)}%;"></div>
|
||||
<span class="progress-text">
|
||||
{#if _user.history.exp}
|
||||
<a x-bind=click:toggleChart data-toggle-id="exp-chart" data-history-path="_user.history.exp" rel=tooltip title="Progress"><i class=icon-signal></i></a>
|
||||
{/}
|
||||
<i class=icon-star></i> {floor(_user.stats.exp)} / {_tnl}
|
||||
</span>
|
||||
</div>
|
||||
<div id="exp-chart" style="display:none;"></div>
|
||||
<!-- end .char-status -->
|
||||
</div>
|
||||
<!-- end .char-status -->
|
||||
<!-- end .row-fluid -->
|
||||
</div>
|
||||
<!-- end .row-fluid -->
|
||||
</div>
|
||||
{/}
|
||||
|
|
@ -13,8 +13,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='//fonts.googleapis.com/css?family=Lato:300,400,700,400italic,700italic' rel='stylesheet' type='text/css'>
|
||||
|
||||
<Header:>
|
||||
<app:modals:modals />
|
||||
|
|
@ -27,9 +29,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>
|
||||
|
|
@ -39,11 +41,13 @@
|
|||
<!-- scripts go in /src/app/browser.coffee, that way we can get min/concat -->
|
||||
<!-- only the ones that are remote and can't be done async are here -->
|
||||
<script src="https://checkout.stripe.com/v2/checkout.js"></script>
|
||||
|
||||
{#if equal(_view.nodeEnv,"production")}
|
||||
<!-- Google Analytics -->
|
||||
<script type="text/javascript">
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-33510635-1']);
|
||||
_gaq.push(['_setDomainName', 'habitrpg.com']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
|
||||
(function() {
|
||||
|
|
|
|||
|
|
@ -43,4 +43,4 @@
|
|||
<@footer>
|
||||
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
|
||||
</@footer>
|
||||
</app:modals:modal>
|
||||
</app:modals:modal>
|
||||
|
|
|
|||
|
|
@ -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,44 @@
|
|||
{/}
|
||||
|
||||
<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>
|
||||
|
||||
<food:>
|
||||
<td class="active-food">
|
||||
<div rel=tooltip class="{.name}" title="{.text} - {.value} Tokens" x-bind="click:buyFood" data-food='{.name}'>{.text}</div>
|
||||
</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>
|
||||
{/}
|
||||
{#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>
|
||||
|
||||
</div>
|
||||
</pre>
|
||||
</li>
|
||||
{/}
|
||||
<!-- 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,33 +1,48 @@
|
|||
<modals:>
|
||||
{{#if _loggedIn}}
|
||||
<app:modals:modal modalId="settings-modal" header="Settings">
|
||||
<h4>API</h4>
|
||||
<small>Copy these for use in third party applications.</small>
|
||||
<h6>User ID</h6>
|
||||
<pre class=prettyprint>{_user.id}</pre>
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a data-toggle="tab" href="#" data-target="#settings-settings">General</a></li>
|
||||
<li><a data-toggle="tab" href="#" data-target="#settings-api">API</a></li>
|
||||
</ul>
|
||||
|
||||
<h6>API Token</h6>
|
||||
<pre class=prettyprint>{_user.apiToken}</pre>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="settings-settings">
|
||||
<h4>Custom Day Start</h4>
|
||||
<div class="input-append">
|
||||
<input class="span2" type="number" min=0 max=24 value={_user.preferences.dayStart} />
|
||||
<span class="add-on">:00 (24h)</span>
|
||||
</div>
|
||||
<div>
|
||||
<small>Habit defaults to check and reset your dailies at midnight each day. You can customize that here (Enter number between 0 and 24).</small>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
<h4>Custom Day Start</h4>
|
||||
<div class="input-append">
|
||||
<input class="span2" type="number" min=0 max=24 value={_user.preferences.dayStart} />
|
||||
<span class="add-on">:00 (24h)</span>
|
||||
<hr/>
|
||||
<h4>Misc</h4>
|
||||
<button x-bind="click:toggleHeader">{#if _user.preferences.hideHeader}Show Header{else}Hide Header{/}</button>
|
||||
{#unless _user.flags.partyEnabled} <button x-bind="click:manuallyUnlockParties" data-dismiss='modal' rel=tooltip title="Parties are unlocked automatically for usability reasons, but you can override that here.">Enable Parties</button>{/}
|
||||
|
||||
{{#if _user.auth.local}}
|
||||
<hr/>
|
||||
<h4>Change Password</h4>
|
||||
<derby-auth:changePassword />
|
||||
{{/}}
|
||||
|
||||
<hr/>
|
||||
<h4>Danger Zone</h4>
|
||||
<a class='btn btn-danger' data-target="#reset-modal" data-toggle="modal" rel=tooltip title="Resets your entire account (dangerous).">Reset</a>
|
||||
<a class='btn btn-danger' data-target="#restore-modal" data-toggle="modal" rel=tooltip title="Restores attributes to your character.">Restore</a>
|
||||
<a class='btn btn-danger' data-target="#delete-modal" data-toggle="modal" rel=tooltip title="Delete your account.">Delete</a>
|
||||
</div>
|
||||
<div class="tab-pane" id="settings-api">
|
||||
<small>Copy these for use in third party applications.</small>
|
||||
<h6>User ID</h6>
|
||||
<pre class=prettyprint>{_user.id}</pre>
|
||||
|
||||
<h6>API Token</h6>
|
||||
<pre class=prettyprint>{_user.apiToken}</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<small>Habit defaults to check and reset your dailies at midnight each day. You can customize that here (Enter number between 0 and 24).</small>
|
||||
</div>
|
||||
|
||||
{{#if _user.auth.local}}
|
||||
<hr/>
|
||||
<h4>Change Password</h4>
|
||||
<derby-auth:changePassword />
|
||||
{{/}}
|
||||
|
||||
<hr/>
|
||||
<a class='btn btn-danger' data-target="#reset-modal" data-toggle="modal" rel=tooltip title="Resets your entire account (dangerous).">Reset</a>
|
||||
<a class='btn btn-danger' data-target="#restore-modal" data-toggle="modal" rel=tooltip title="Restores attributes to your character.">Restore</a>
|
||||
|
||||
<@footer>
|
||||
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
|
||||
|
|
@ -92,6 +107,15 @@
|
|||
</@footer>
|
||||
</app:modals:modal>
|
||||
|
||||
<app:modals:modal modalId="delete-modal" header="Delete Account">
|
||||
<p>Woa woa woa! Are you sure? This will seriously delete your account forever, and it can never be restored. If you're absolutely certain, type <strong>DELETE</strong> into the text-box below.</p>
|
||||
<p><input type="text" value="{_deleteAccount}" /></p>
|
||||
<@footer>
|
||||
<button class="btn btn-large" data-dismiss="modal" aria-hidden="true">Cancel</button>
|
||||
<button data-dismiss="modal" x-bind="click:deleteAccount" class="btn btn-danger btn-small {#unless equal(_deleteAccount,'DELETE')}disabled{/}">Delete Account</button>
|
||||
</@footer>
|
||||
</app:modals:modal>
|
||||
|
||||
{{else}}
|
||||
<app:modals:modal modalId="login-modal" header="Login / Register">
|
||||
<a href="/auth/facebook"><img src='/img/facebook-login-register.jpeg' alt="Login / Register With Facebook"/></a>
|
||||
|
|
|
|||
|
|
@ -1,235 +1,260 @@
|
|||
<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.dropsEnabled,true)}
|
||||
<div class='tabbable tabs-below'>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="rewards-tab">
|
||||
<app:rewardsTab />
|
||||
</div>
|
||||
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="rewards-tab">
|
||||
<app:rewardsTab />
|
||||
<!-- pets pane -->
|
||||
<div class="tab-pane pet-grid" id="market-tab">
|
||||
<h4>Welcome to the market</h4>
|
||||
{#with _view.items.food as :food}
|
||||
<table>
|
||||
<tr>
|
||||
{#with :food[0]}<app:food />{/}
|
||||
{#with :food[1]}<app:food />{/}
|
||||
{#with :food[2]}<app:food />{/}
|
||||
{#with :food[3]}<app:food />{/}
|
||||
</tr>
|
||||
<tr>
|
||||
{#with :food[4]}<app:food />{/}
|
||||
{#with :food[5]}<app:food />{/}
|
||||
{#with :food[6]}<app:food />{/}
|
||||
{#with :food[7]}<app:food />{/}
|
||||
</tr>
|
||||
<tr>
|
||||
{#with :food[8]}<app:food />{/}
|
||||
{#with :food[9]}<app:food />{/}
|
||||
</tr>
|
||||
</table>
|
||||
{/}
|
||||
</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="#market-tab" id='market-tab' data-toggle="tab" x-bind='click:activatePetsTab'>Market</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