Show stack quantity tooltip for large quantities

When hovering over a quantity in an inventory display, if the
quantity is larger than one stack (i.e., 64 items), display a
tooltip showing the quantity in stacks (plus the remainder).

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")

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 {

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