From e5a893a71046806e12c6f7c12325b0357d6d6739 Mon Sep 17 00:00:00 2001
From: Zachary Kain <zakkain@gmail.com>
Date: Sat, 9 Mar 2013 01:34:15 -0500
Subject: [PATCH] revamp rewards and pets UI. Obv pets is temporary pending new
 pet system

---
 styles/app/items.styl        | 109 ++++++++++++++++++++----------
 styles/app/shop_sprites.styl |   6 +-
 styles/app/tasks.styl        |   9 ++-
 views/app/rewards.html       |  73 ++++++++++-----------
 views/app/tasks.html         | 124 ++++++++++++++++++-----------------
 5 files changed, 185 insertions(+), 136 deletions(-)

diff --git a/styles/app/items.styl b/styles/app/items.styl
index eaf078a71b..b90d2ea53a 100644
--- a/styles/app/items.styl
+++ b/styles/app/items.styl
@@ -1,42 +1,83 @@
-/* ----- Items, Weapons, Armor -----*/
-.item-store-popover img
-  float:left
-  padding-right:7px;
+// money styles
+.money
+  display: inline-block
+  line-height: 1.5em
+  padding-left: 0.75em
 
-.item .task-text img
-  max-height: 16px
+  [class^="shop_"]
+    vertical-align: top
+    display: inline-block
 
-.buy-link, .item-buy-link
-    background-color: #DEE5F2
-    padding: 2px
-    margin-right: 10px
-    border-radius: 5px
+.btn-buy
+  width: 4.5em
+  height: 3em
+  padding: 0.75em 0 0
+  text-align: center
+  vertical-align: top
+  background-color: $better
 
-    img
-      height:20px
+  color: #555
+  &:hover, &:focus
+    background-color: $bad
+    text-decoration: none
 
-  .item-buy-link
-    background-color: #ccffcc
+.rewards
+  margin-bottom: 1.5em
+  padding-bottom: 1.5em
+  border-bottom: 1px solid rgba(0,0,0,0.1)
 
-.item
-    position:relative
+.reward-item
+  background: white
 
-.shop-table
-    position:absolute
-    top: 0
-    left: 50px
+.reward-cost
+  display: inline
 
-#money
-    position:relative
-.shop_gold, .shop_silver, .shop_copper
-    float:right
-.money-table
-    position:absolute
-    top: 0
 
-.shop-pet
-    mouse: pointer
-.shop-pet-owned-check
-    position:absolute
-    right:0px
-    bottom:0px
+// store items
+.btn-reroll
+  background-color: $better
+  cursor: pointer
+  box-shadow: inset -1px -1px 0 rgba(0,0,0,0.1)
+  &:hover, &:focus
+    background-color: $bad
+
+.item-img
+  display: inline-block
+  vertical-align: top
+  // background-color: $bad
+  height: 3em
+  margin-left: -0.5em
+  margin-right: 0.5em
+  // border: 1px solid rgba(0,0,0,0.1)
+  border-top: 0
+  border-bottom: 0
+
+.token-wallet
+  cursor: pointer
+  .tile
+    background-color: darken($neutral, 10%)
+  .add-token-btn
+    opacity: 0
+  &:hover, &:focus
+    .add-token-btn
+      opacity: 1
+      background-color: $good
+    .tile
+      opacity: 1
+
+
+// pets (this will all change when pet system is overhauled)
+.pet-grid
+  padding-top: 1.5em
+  border-top: rgba(0,0,0,0.1)
+  table
+    width: 100%
+  td
+    padding: 0.5em
+    width: 25%
+    &.active-pet
+      background-color: $bad
+      outline: 1px solid rgba(0,0,0,0.1)
+      outline-offset: -1px
+    &:hover, &:focus
+      background-color: darken($better, 10%)
\ No newline at end of file
diff --git a/styles/app/shop_sprites.styl b/styles/app/shop_sprites.styl
index b3abb056c5..b609105fa1 100644
--- a/styles/app/shop_sprites.styl
+++ b/styles/app/shop_sprites.styl
@@ -49,6 +49,6 @@
 .shop_armor_1 {background-position: -800px 0; width: 40px; height: 40px}
 .shop_reroll {background-position: -840px 0; width: 40px; height: 40px}
 .shop_potion {background-position: -880px 0; width: 40px; height: 40px}
-.shop_copper {background-position: -920px 0; width: 40px; height: 40px}
-.shop_silver {background-position: -960px 0; width: 40px; height: 40px}
-.shop_gold {background-position: -1000px 0; width: 40px; height: 40px}
+.shop_copper {background-position: -923px -8px; width: 32px; height: 22px}
+.shop_silver {background-position: -963px -8px; width: 32px; height: 22px}
+.shop_gold {background-position: -1003px -8px; width: 32px; height: 22px}
diff --git a/styles/app/tasks.styl b/styles/app/tasks.styl
index 5b23320169..0aac92adb2 100644
--- a/styles/app/tasks.styl
+++ b/styles/app/tasks.styl
@@ -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
diff --git a/views/app/rewards.html b/views/app/rewards.html
index dd4394e625..6a8c0bb4a7 100644
--- a/views/app/rewards.html
+++ b/views/app/rewards.html
@@ -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">
-      <div class="task-meta-controls">
-          <span rel="popover" data-trigger="hover" data-placement="left" data-content="{:item.notes}" data-original-title="{:item.text}" class='task-notes'><i class="icon-comment"></i></span>
-      </div>
-      <div class="task-controls">
-          {#if @reroll}
-          <a href="#" data-toggle="modal" data-target="#reroll-modal" class="item-buy-link" style='cursor:pointer'><i class=icon-retweet></i></a>
-          {else}
-          <a x-bind=click:buyItem class="item-buy-link" data-type={:item.type} data-value={:item.value} data-index={:item.index}>{:item.value}<img src="/img/coin_single_gold.png"/></a>
-          {/}
-      </div>
-      <div class="task-text">
-          {#if :item.icon}
-          <img src="/img/sprites/{:item.icon}" /> {:item.text}
-          {else}
-          <table class='shop-table'><tr>
-              <td><div class="shop_{:item.classes} shop-sprite"></div></td>
-              <td>{:item.text}</td>
-          </tr></table>
-          {/}
-
-      </div>
-    </li>
-    {/}
\ No newline at end of file
+  {#unless :item.hide}
+  <li class="task reward-item">
+    <!-- right-hand side control buttons -->
+    <div class="task-meta-controls">
+        <span rel="popover" data-trigger="hover" data-placement="left" data-content="{:item.notes}" data-original-title="{:item.text}" class='task-notes'><i class="icon-comment"></i></span>
+    </div>
+    
+    <!-- left-hand size commands -->
+    <div class="task-controls">
+      {#if @reroll}
+        <a class="task-action-btn btn-reroll" data-toggle="modal" data-target="#reroll-modal">⟲</a>
+      {else}
+        <a class="money btn-buy item-btn" x-bind=click:buyItem data-type={:item.type} data-value={:item.value} data-index={:item.index}>
+            <span class="reward-cost">{:item.value}</span>
+            <span class='shop_gold'></span>
+        </a>
+      {/}
+    </div>
+    <!-- main content -->
+    <span class="shop_{:item.classes} shop-sprite item-img"></span>
+    <p class="task-text">{:item.text}</p>
+  </li>
+  {/}
\ No newline at end of file
diff --git a/views/app/tasks.html b/views/app/tasks.html
index 2dd39a9e83..c038cfdb8d 100644
--- a/views/app/tasks.html
+++ b/views/app/tasks.html
@@ -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">
-                    {#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>
-                    {else}
-                    <app:userTokens />
-                    {/}
+            <!-- cash or tokens -->
+            <span class='option-box pull-right wallet'>
+                {#unless _view.activeTabPets}
+                <div class="money">
+                    {gold(_user.stats.gp)}
+                    <span class='shop_gold' rel='tooltip' title='Gold'></span>
                 </div>
-            </div>
-            <app:newTask type="reward" inputValue="{_newReward}" placeHolder="New Reward" />
+                <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 />
+                {/}
+            </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">
-                                {#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>
-
-
+                            <table>
+                                <tr>
+                                    {#with :pets[0]}<app:pet />{/}
+                                    {#with :pets[1]}<app:pet />{/}
+                                    {#with :pets[2]}<app:pet />{/}
+                                    {#with :pets[3]}<app:pet />{/}
+                                </tr>
+                                <tr>
+                                    {#with :pets[4]}<app:pet />{/}
+                                    {#with :pets[5]}<app:pet />{/}
+                                    {#with :pets[6]}<app:pet />{/}
+                                    {#with :pets[7]}<app:pet />{/}
+                                </tr>
+                                <tr>
+                                    {#with :pets[8]}<app:pet />{/}
+                                    {#with :pets[9]}<app:pet />{/}
+                                    {#with :pets[10]}<app:pet />{/}
+                                    {#with :pets[11]}<app:pet />{/}
+                                </tr>
+                                <tr>
+                                    {#with :pets[12]}<app:pet />{/}
+                                    {#with :pets[13]}<app:pet />{/}
+                                    {#with :pets[14]}<app:pet />{/}
+                                    {#with :pets[15]}<app:pet />{/}
+                                </tr>
+                                <tr>
+                                    {#with :pets[16]}<app:pet />{/}
+                                </tr>
+                            </table>
                             {/}
                         </div>
                         <!--<div class="tab-pane" id="mounts-tab">...</div>-->
                     </div>
 
-
                     <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">