Merge pull request #28 from goodybag/28-item-cnt

Item count needs to be shown on item tiles.
goodybag · Aug 16, 2015 · c25a84c · c25a84c
2 parents b798eb4 + 352b46d
commit c25a84c
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 8 deletions.
diff --git a/less/components/item-tiles.less b/less/components/item-tiles.less
@@ -38,10 +38,41 @@
   font-size: 13px;
 }
 
-.item-tile .btn-add {
+.item-tile .item-tile-actions {
   float: right;
   margin-top: -40px;
+}
+
+.item-tile .btn-remove,
+.item-tile .btn-add {
   #components > .btn-size( 36px, 12px, 1px, 1px, 14px );
+}
+
+.item-tile.is-in-cart .item-tile-quantity-wrapper {
+  display: block;
+}
+
+.item-tile .item-tile-quantity-wrapper {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  color: #FFF;
+  background-color: rgba(255, 116, 121, 0.91);
+  text-align: center;
+
+  .item-tile-quantity {
+    font-size: 60px;
+    margin-top: 50px;
+    line-height: 60px;
+  }
+}
+
+.item-tile .btn-add {
   padding-left: 30px;
   font-weight: 600;
 

diff --git a/server/data/dummy.js b/server/data/dummy.js
@@ -6,11 +6,13 @@ module.exports.items = [
   }
 , { name: 'Poop Taco Box'
   , price: 1200
+  , quantity: 2
   , dietTags: ['vegan', 'vegetarian']
   , coverPhotoUrl: 'https://www.filepicker.io/api/file/SZoK9zUvTPWXzmK81aGg/convert?w=400&h=195&fit=crop'
   }
 , { name: 'Pirata Dos Tacos'
   , price: 1090
+  , quantity: 1
   , dietTags: []
   , coverPhotoUrl: 'https://www.filepicker.io/api/file/SZoK9zUvTPWXzmK81aGg/convert?w=400&h=195&fit=crop'
   }

diff --git a/server/views/pages/menu.hbs b/server/views/pages/menu.hbs
@@ -50,7 +50,10 @@
   </h1>
   <div class="tiles item-tiles" component:section="items">
     {{#each items}}
-      <div class="tile item-tile" component:section="items" component:view="default">
+      <div
+        class="tile item-tile{{#if quantity}} is-in-cart{{/if}}"
+        component:section="items"
+        component:view="default">
         <div
           class="tile-cover"
           style="background-image: url('{{coverPhotoUrl}}');"
@@ -59,6 +62,10 @@
           component:elm="showDetailsLink"
           data-toggle="modal"
           data-target="#item-modal">
+          <div class="item-tile-quantity-wrapper">
+            <div class="item-tile-quantity">{{quantity}}</div>
+            in your cart
+          </div>
         </div>
         <div class="tile-info">
           <h3 class="tile-title" component:prop="title">{{name}}</h3>
@@ -68,12 +75,15 @@
             {{/each}}
           </ul>
           <div class="item-price" component:prop="price">${{dollars price}}</div>
-          <button
-            class="btn btn-default btn-add"
-            data-toggle="modal"
-            data-target="#item-modal"
-            component:elm="addButton"
-            component:view="orderable">Add</button>
+          <div class="item-tile-actions">
+            {{#if quantity}}
+            <button class="btn btn-default btn-remove">-</button>
+            {{/if}}
+            <button
+              class="btn btn-default btn-add"
+              component:elm="addButton"
+              component:view="orderable">Add</button>
+          </div>
         </div>
       </div>
     {{/each}}