Add "clear" button to the inventory UI

src/coffee/controllers/inventory_controller.coffee

@@ -83,7 +83,7 @@ module.exports = class InventoryController extends BaseController
             modPack:      @modPack,
             onChoseItem:  (itemSlug)=> @onItemChosen(itemSlug)
 
-        @$clearButton      = @$('button.clear')
+        @$clearButton      = @$('.button.clear')
         @$emptyPlaceholder = @$('.empty_placeholder')
         @$icon             = @$('.icon')
         @$itemContainer    = @$('.item_container')
@@ -93,8 +93,10 @@ module.exports = class InventoryController extends BaseController
     refresh: ->
         if @editable
             @selector.show()
+            @show @$clearButton
         else
             @selector.hide()
+            @hide @$clearButton
 
         @$icon.attr 'src', @icon
         @$title.html @title
@@ -114,8 +116,8 @@ module.exports = class InventoryController extends BaseController
 
     events: ->
         return _.extend super,
-            'click button.clear': 'onClearButtonClicked'
+            'click .button.clear': 'onClearButtonClicked'
-            'click button.first': 'onFirstButtonClicked'
+            'click button.first':  'onFirstButtonClicked'
             'click button.second': 'onSecondButtonClicked'
 
     # Private Methods ##############################################################################

src/jade/templates/inventory.jade

@@ -8,4 +8,6 @@
 .view__inventory
     .item_container
     .empty_placeholder.hideable.hidden nothing
-    .view__item_selector.hideable.hidden.button: p add an item...
+    .buttons
+        .view__item_selector.hideable.hidden.button: p add an item...
+        .button.clear: p clear

src/scss/classes.scss

@@ -5,6 +5,36 @@ Copyright (C) 2015 by Redwood Labs
 All rights reserved.
 */
 
+.button {
+    background: $color-gray-faint;
+    border: 0.1em solid $color-gray-medium;
+    border-radius: 1.5em;
+    cursor: pointer;
+    padding: 0.5em 0.75em;
+    margin: 0 1em;
+
+    &:hover {
+        background: $color-background-panel;
+    }
+
+    &.disabled {
+        background: $color-background-panel;
+        border: 0.1em solid $color-gray-light;
+        cursor: inherit;
+
+        p {
+            color: $color-gray-light;
+        }
+    }
+
+    p {
+        color: $color-active;
+        font-family: $font-family-normal;
+        font-weight: bold;
+        text-align: center;
+    }
+}
+
 .byline {
     margin: 0.25em 0 2em 0;
 

src/scss/templates/inventory.scss

@@ -6,6 +6,15 @@ All rights reserved.
 */
 
 .view__inventory {
+    display: flex;
+    flex-direction: column;
+
+    &.large {
+        .item_container {
+            font-size: 1.5em;
+            font-weight: bold;
+        }
+    }
 
     .empty_placeholder {
         color: $color-gray-light;
@@ -13,74 +22,26 @@ All rights reserved.
         font-size: $font-size-large;
         margin: 2em 0;
         text-align: center;
-        width: 100%;
     }
 
     .item_container {
-        position: relative; width: 100%;
+        display: flex;
-
+        flex-direction: column;
-        .view__stack > div {
-            height: 4.2em;
-            padding: 0 1em 0.5em 0;
-            vertical-align: middle;
-
-            &:last-child {
-                padding: 0 0 0.5em 0;
-            }
-        }
-
-        .icon {
-            img {
-                height: 3.6em; width: 3.6em;
-            }
-        }
-
-        .name {
-            width: 100%;
-        }
-
-        .action {
-            white-space: nowrap;
-
-            button:first-child {
-                margin-right: 0.5em;
-            }
-        }
     }
 
-    .view__item_selector {
+    .buttons {
-        position: relative; width: 80%;
+        display: flex;
-        margin: 1em auto;
+        flex-direction: row;
-    }
 
-    &.large {
+        margin: 1em 2em;
-        .item_container {
-            .view__stack > div {
-                height: 5em;
-            }
 
-            .quantity {
+        .view__item_selector {
-                .bubble {
+            flex: 85%;
-                    border-radius: 3em;
+            margin-right: 1em;
+        }
 
-                    input {
+        .button.clear {
-                        font-size: $font-size-large;
+            flex: 15%;
-                    }
-                }
-            }
-
-            .icon {
-                img {
-                    height: 4.8em; width: 4.8em;
-                }
-            }
-
-            .name {
-                a {
-                    font-size: $font-size-large;
-                    font-weight: bold;
-                }
-            }
         }
     }
 }

src/scss/templates/item_selector.scss

@@ -22,21 +22,6 @@ All rights reserved.
         }
     }
 
-    &.button {
-        background: $color-gray-faint;
-
-        &:hover {
-            background: $color-background-panel;
-        }
-
-        p {
-            color: $color-active;
-            font-family: $font-family-normal;
-            font-weight: bold;
-            text-align: center;
-        }
-    }
-
     p {
         position: absolute; top: 50%; width: 100%;
         @include transform(translateY(-50%));

src/scss/templates/stack.scss

@@ -6,15 +6,15 @@ All rights reserved.
 */
 
 .view__stack {
-    font-family: $font-family-normal;
+    display: flex;
-    display: table-row;
+    flex-direction: row;
+    align-items: baseline;
 
-    & > div {
+    font-family: $font-family-normal;
-        display: table-cell;
-        vertical-align: middle;
-    }
 
     .quantity {
+        flex: 0 0 auto;
+
         .bubble {
             border: 0.1em solid $color-gray-light;
             border-radius: 1.5em;
@@ -46,14 +46,19 @@ All rights reserved.
     }
 
     .icon {
+        flex: 0 0 auto;
+        margin: 0 0.5em;
+
         img {
             width: 100%; height: auto;
-            max-height: 4.8em;
+            max-width: 3.6em;
             @include pixel-image;
         }
     }
 
     .name {
+        flex: 1 0 auto;
+
         a {
             color: $color-text;
             font-size: $font-size-normal;
@@ -67,11 +72,12 @@ All rights reserved.
     }
 
     .action {
-        text-align: right;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
 
         button {
             position: relative; width: 3.0em; height: 3.0em;
-            display: inline-block;
 
             border: 0;
             font-size: $font-size-small;

src/scss/templates/step.scss

@@ -46,34 +46,6 @@ All rights reserved.
 
         .button {
             flex: 50%;
-
-            background: $color-gray-faint;
-            border: 0.1em solid $color-gray-medium;
-            border-radius: 1.5em;
-            cursor: pointer;
-            padding: 0.25em 0.75em;
-            margin: 0 1em;
-
-            &:hover {
-                background: $color-background-panel;
-            }
-
-            &.disabled {
-                background: $color-background-panel;
-                border: 0.1em solid $color-gray-light;
-                cursor: inherit;
-
-                p {
-                    color: $color-gray-light;
-                }
-            }
-
-            p {
-                color: $color-active;
-                font-family: $font-family-normal;
-                font-weight: bold;
-                text-align: center;
-            }
         }
     }
 }