mirror of
https://github.com/sudoxnym/habitica-self-host.git
synced 2026-08-02 12:09:39 +00:00
revamp rewards and pets UI. Obv pets is temporary pending new pet system
This commit is contained in:
Zachary Kain
parent
f89037da53
commit
e5a893a710
5 changed files with 185 additions and 136 deletions
|
|
@ -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%)
|
||||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -200,6 +200,7 @@ for $stage in $stages
|
|||
.action-yesno
|
||||
// uncompleted icon
|
||||
label:after
|
||||
// content: '▨'
|
||||
content: '◯'
|
||||
display: block
|
||||
height: 1.714285714em
|
||||
|
|
@ -325,7 +326,13 @@ for $stage in $stages
|
|||
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
|
||||
|
|
|
|||
|
|
@ -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,48 +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">
|
||||
<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 href="#" data-toggle="modal" data-target="#reroll-modal" class="item-buy-link" style='cursor:pointer'><i class=icon-retweet></i></a>
|
||||
<a class="task-action-btn btn-reroll" data-toggle="modal" data-target="#reroll-modal">⟲</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>
|
||||
<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>
|
||||
<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>
|
||||
<!-- main content -->
|
||||
<span class="shop_{:item.classes} shop-sprite item-img"></span>
|
||||
<p class="task-text">{:item.text}</p>
|
||||
</li>
|
||||
{/}
|
||||
|
|
@ -56,85 +56,84 @@
|
|||
<!-- Rewards Column -->
|
||||
<div class="module">
|
||||
<div class="task-column rewards">
|
||||
<!--Title -->
|
||||
<div class="row-fluid">
|
||||
<div class="span6"><h2 class="task-column_title">Rewards</h2></div>
|
||||
<div class="span6">
|
||||
<!-- 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 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>
|
||||
|
||||
<div class="tab-pane" id="pets-tab">
|
||||
<!-- pets pane -->
|
||||
<div class="tab-pane pet-grid" id="pets-tab">
|
||||
{#with _view.items.pets as :pets}
|
||||
|
||||
<div class="row-fluid">
|
||||
<table>
|
||||
<tr>
|
||||
{#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">
|
||||
</tr>
|
||||
<tr>
|
||||
{#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">
|
||||
</tr>
|
||||
<tr>
|
||||
{#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">
|
||||
</tr>
|
||||
<tr>
|
||||
{#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">
|
||||
</tr>
|
||||
<tr>
|
||||
{#with :pets[16]}<app:pet />{/}
|
||||
</div>
|
||||
|
||||
|
||||
</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="#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>
|
||||
|
||||
<!-- if pets are disabled, just do rewards tab -->
|
||||
{else}
|
||||
<app:rewardsTab />
|
||||
{/}</div>
|
||||
{/}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Templates -->
|
||||
|
|
@ -170,11 +169,16 @@
|
|||
<div class="task-controls">
|
||||
<!-- Habits -->
|
||||
{#if equal(:task.type, 'habit')}
|
||||
{#if :task.up}<a class="task-action-btn btn-plus" data-direction=up x-bind=click:score>＋</a>{/}
|
||||
{#if :task.down}<a class="task-action-btn btn-minus" data-direction=down x-bind=click:score>−</a>{/}
|
||||
{#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="task-action-btn action-buy" x-bind=click:score class="buy-link" data-direction=down>{:task.value}<img src="/img/coin_single_gold.png"/></a>
|
||||
<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">
|
||||
|
|
|
|||
Loading…
Reference in a new issue