diff --git a/src/coffee/controllers/inventory_controller.coffee b/src/coffee/controllers/inventory_controller.coffee index 1536129dd..9bef36ff9 100644 --- a/src/coffee/controllers/inventory_controller.coffee +++ b/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.first': 'onFirstButtonClicked' + 'click .button.clear': 'onClearButtonClicked' + 'click button.first': 'onFirstButtonClicked' 'click button.second': 'onSecondButtonClicked' # Private Methods ############################################################################## diff --git a/src/jade/templates/inventory.jade b/src/jade/templates/inventory.jade index ff46b2ba5..a908902a0 100644 --- a/src/jade/templates/inventory.jade +++ b/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 diff --git a/src/scss/classes.scss b/src/scss/classes.scss index 036678a62..4f4d9ac9e 100644 --- a/src/scss/classes.scss +++ b/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; diff --git a/src/scss/templates/inventory.scss b/src/scss/templates/inventory.scss index dc414e132..04defe8a2 100644 --- a/src/scss/templates/inventory.scss +++ b/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%; - - .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; - } - } + display: flex; + flex-direction: column; } - .view__item_selector { - position: relative; width: 80%; - margin: 1em auto; - } + .buttons { + display: flex; + flex-direction: row; - &.large { - .item_container { - .view__stack > div { - height: 5em; - } + margin: 1em 2em; - .quantity { - .bubble { - border-radius: 3em; + .view__item_selector { + flex: 85%; + margin-right: 1em; + } - input { - font-size: $font-size-large; - } - } - } - - .icon { - img { - height: 4.8em; width: 4.8em; - } - } - - .name { - a { - font-size: $font-size-large; - font-weight: bold; - } - } + .button.clear { + flex: 15%; } } } diff --git a/src/scss/templates/item_selector.scss b/src/scss/templates/item_selector.scss index abd8c34f0..00082ff10 100644 --- a/src/scss/templates/item_selector.scss +++ b/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%)); diff --git a/src/scss/templates/stack.scss b/src/scss/templates/stack.scss index 20e946562..a3ae0ee45 100644 --- a/src/scss/templates/stack.scss +++ b/src/scss/templates/stack.scss @@ -6,15 +6,15 @@ All rights reserved. */ .view__stack { - font-family: $font-family-normal; - display: table-row; + display: flex; + flex-direction: row; + align-items: baseline; - & > div { - display: table-cell; - vertical-align: middle; - } + font-family: $font-family-normal; .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; diff --git a/src/scss/templates/step.scss b/src/scss/templates/step.scss index bffe9c554..2f1896fed 100644 --- a/src/scss/templates/step.scss +++ b/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; - } } } } \ No newline at end of file