Move images in inventory to the left

src/css/reset.scss

@@ -1,4 +1,4 @@
-a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,meter,nav,object,ol,output,p,pre,progress,q,rp,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,textarea,tfoot,th,thead,time,tr,tt,u,ul,var,video,xmp {
+a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,meter,nav,object,ol,output,p,pre,progress,q,rp,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,textarea,tfoot,th,thead,time,td,tr,tt,u,ul,var,video,xmp {
     border: 0;
     margin: 0;
     padding: 0;

src/css/templates/inventory.scss

@@ -45,44 +45,54 @@ All rights reserved.
 
     td {
         height: 2.4em;
-        padding-bottom: 0.25em;
+        vertical-align: middle;
+    }
 
-        &:nth-child(1) {
+    td.quantity {
-            width: 2.4em;
+        position: relative;
+        width: 2.4em;
 
-            input {
+        input {
-                border-radius: 0.75em;
+            position: absolute; top: 50%; height: $font-size-small; width: 100%;
-                margin: 0 auto;
+            @include transform(translateY(-50%));
-                text-align: center;
+            border-radius: 0.75em;
-                width: 90%;
+            margin: 0 auto;
-            }
+            text-align: center;
+            max-width: 2.8em;
         }
+    }
 
-        &:nth-child(2) {
+    td.icon {
-            @include box-sizing(content-box);
+        width: 4.8em;
-            padding: 0 2.0em 0 1.0em;
+        padding: 0 1em;
 
-            input {
+        img {
-                height: 100%; width: 100%;
+            width: 100%; height: auto;
-                border: 0;
+            max-height: 4.8em;
-                border-bottom: 1px dashed $color-gray-light;
-                outline: 0;
-
-                &:focus {
-                    border: 1px solid $color-gray-light;
-                }
-            }
         }
+    }
 
-        &:nth-child(3) {
+    td.name {
-            width: 2.4em;
+        text-align: left;
-            text-align: right;
+        padding-right: 1em;
 
-            img { width: 2.4em; height: 2.4em; }
+        input {
+            width: 100%;
+            border: 0;
+            border-bottom: 1px dashed $color-gray-light;
+            outline: 0;
 
-            button {
+            &:focus {
-                width: 100%;
+                border: 1px solid $color-gray-light;
             }
         }
     }
+
+    td.action {
+        width: 4em;
+
+        button {
+            width: 4em;
+        }
+    }
 }

src/css/templates/stack.scss

@@ -7,9 +7,8 @@ All rights reserved.
 
 .view__stack {
     font-family: $font-family-normal;
-    td { vertical-align: middle; }
 
-    .quantity {
+    .quantity p {
         border-radius: 0.75em;
         background: $color-ice;
         color: $color-background-panel;
@@ -17,17 +16,12 @@ All rights reserved.
         font-weight: bold;
         text-align: center;
         min-width: 3em;
-        padding: 0.1em 0.5em;
+        padding: 0.2em 0.5em 0.1em 0.5em;
         height: $font-size-small + 0.2em;
     }
 
-    .name {
+    .name p {
         display: inline;
         font-size: $font-size-normal;
     }
-
-    img {
-        width: 100%; height: auto;
-        max-height: 4.8em;
-    }
 }

src/scripts/controllers/stack_controller.coffee

@@ -25,9 +25,9 @@ module.exports = class StackController extends BaseController
     # BaseController Overrides #####################################################################
 
     onDidRender: ->
-        @$image         = @$('img')
+        @$image         = @$('.icon img')
-        @$nameField     = @$('.name')
+        @$nameField     = @$('.name p')
-        @$quantityField = @$('.quantity')
+        @$quantityField = @$('.quantity p')
         super
 
     refresh: ->

src/templates/inventory.jade

@@ -13,8 +13,9 @@
         .scrollbox
             table
                 tr.edit
-                    td: input(name="quantity")
+                    td.quantity: input(name="quantity")
-                    td(width="*"): input(name="name")
+                    td.icon: img(src="/images/unknown.png")
-                    td: button(name="add") add
+                    td.name(width="*"): input(name="name")
+                    td.action: button(name="add") add
         .toolbar
             button(name="clear") clear

src/templates/stack.jade

@@ -6,6 +6,7 @@
 //-
 
 tr.view__stack
-    td: p.quantity
+    td.quantity: p
-    td: p.name
+    td.icon: img(src='')
-    td: img(src='')
+    td.name: p
+    td.action