craftingguide/website
1
0
Fork 0
Code Pull Requests Actions Activity

Add "clear" button to the inventory UI

Browse Source
This commit is contained in:
Andrew Miner
2015-11-15 12:38:12 -08:00
parent 4429287c4d
commit 06c19ed7ee
7 changed files with 74 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/coffee/controllers/inventory_controller.coffee
+5 -3
View File
@@ -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 ##############################################################################
src/jade/templates/inventory.jade
+3 -1
View File
@@ -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
+30
View File
@@ -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
+21 -60
View File
@@ -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%;
}
}
}
src/scss/templates/item_selector.scss
-15
View File
@@ -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
+15 -9
View File
@@ -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;
src/scss/templates/step.scss
-28
View File
@@ -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;
}
}
}
}