diff --git a/src/client/site/common/stack/stack.jade b/src/client/site/common/stack/stack.jade index a152ced01..235680654 100644 --- a/src/client/site/common/stack/stack.jade +++ b/src/client/site/common/stack/stack.jade @@ -6,7 +6,9 @@ //- .view__stack - .quantity: input + .quantity + input + .hover .icon: img(src='') .name: a .action.first(style="display: none") diff --git a/src/client/site/common/stack/stack.scss b/src/client/site/common/stack/stack.scss index f7cc0000d..c4f1d6bcd 100644 --- a/src/client/site/common/stack/stack.scss +++ b/src/client/site/common/stack/stack.scss @@ -21,6 +21,7 @@ .quantity { padding-right : $size-margin-medium; + position : relative; text-align : right; input { @@ -32,6 +33,38 @@ font-size : $font-size-large; text-align : right; } + + .hover { + $backgroundColor: fade-out($color-black, 0.25); + + display: none; + position: absolute; left: 50%; top: -($font-size-large * 2); + transform: translateX(-50%); + + background: $backgroundColor; + color: $color-white; + font-family: $font-family-control; + font-size: $font-size-medium; + padding: $size-margin-small; + z-index: $layer-dialog; + + &:after { + position: absolute; top: 100%; left: calc(50% - 9px); // $font-size-large / 2 + + content: ""; + width: 0; + height: 0; + border-style: solid; + border-width: $size-margin-medium $size-margin-medium 0 $size-margin-medium; + border-color: $backgroundColor transparent transparent transparent; + } + } + + &:hover { + .hover.enabled { + display: block; + } + } } .icon { diff --git a/src/client/site/common/stack/stack_controller.coffee b/src/client/site/common/stack/stack_controller.coffee index 600de9828..20a108f3a 100644 --- a/src/client/site/common/stack/stack_controller.coffee +++ b/src/client/site/common/stack/stack_controller.coffee @@ -19,6 +19,7 @@ Events: module.exports = class StackController extends BaseController @::MAX_QUANTITY = 9999 + @::STACK_SIZE = 64 constructor: (options={})-> if not options.imageLoader? then throw new Error 'options.imageLoader is required' @@ -107,6 +108,7 @@ module.exports = class StackController extends BaseController @$image = @$('.icon img') @$nameLink = @$('.name a') @$quantityField = @$('.quantity input') + @$quantityHover = @$('.quantity .hover') @$secondAction = @$('.action.second') @$secondButton = @$('.action.second .button') super @@ -124,6 +126,7 @@ module.exports = class StackController extends BaseController @$quantityField.val quantityText @_refreshButtons() + @_refreshHover() if @_editable @$el.addClass 'editable' @@ -169,6 +172,20 @@ module.exports = class StackController extends BaseController when 'remove' then $label.text '-' when 'up' then $label.text '⬆︎' + _refreshHover: -> + if @model.quantity > @STACK_SIZE + remainder = @model.quantity % @STACK_SIZE + stacks = (@model.quantity - remainder) / @STACK_SIZE + + text = "#{stacks}x#{@STACK_SIZE}" + text += "+#{remainder}" if remainder > 0 + + @$quantityHover.text text + @$quantityHover.addClass 'enabled' + else + @$quantityHover.text '' + @$quantityHover.removeClass 'enabled' + _updateButtonType: ($button, type)-> for currentType in ['check', 'down', 'remove', 'up'] $button.removeClass currentType diff --git a/src/client/site/news_page/news_page.jade b/src/client/site/news_page/news_page.jade index fdf5cd2ee..9e85daea4 100644 --- a/src/client/site/news_page/news_page.jade +++ b/src/client/site/news_page/news_page.jade @@ -10,6 +10,19 @@ .view__adsense .right + section + h3 2016-04-24 + .panel + p. + I've been knocking off a few more feature requests over the weekend. First, I've made the entire + site respond to being on a smaller screen (tablet-sized for now, phone-sized will be next). + Hopefully, it should just feel pretty natural on whatever screen size, and you won't notice any big + differences from one to the other. + p. + The second small change is that whenever you're looking at a recipe which calls for a lot of + some item, you can hover over the quantity to see what it would be in stacks + the remainder. For + example, 127 translates to: 1x64+63. That should make it easier to think about large builds. + section h3 2016-04-23 .panel