Improve layout of stacks in crafting table

src/css/templates/crafting_table.scss

@@ -28,22 +28,23 @@ All rights reserved.
         margin-bottom: 0.5em;
     }
 
-    table { background: $color-table-background; width: 100%; }
+    table.main {
+        background: $color-table-background; width: 100%;
 
-    td {
+        td.list {
+            position: relative;
             border-left: 0.1em solid $color-gray-light;
+            min-height: 12em;
             padding: 0 1em 1em 1em;
             width: 25%;
 
             &:first-child { border-left: 0; }
         }
+    }
 
-    textarea, ul {
-        position: relative;
+    textarea, table.list {
+        position: relative; height: 100%; width: 100%;
         font-size: $font-size-normal;
-        width: 100%;
-        height: 100%;
-        min-height: 12em;
         padding: 0.2em;
     }
 

src/css/templates/stack.scss

@@ -6,25 +6,29 @@ All rights reserved.
 */
 
 .view__stack {
-    position: relative; width: 100%; height: 1.8em;
+    font-family: $font-family-normal;
+
+    td { border-left: 0 !important; padding-bottom: 0.25em; }
+
+    td:nth-child(2) { padding-left: 0.5em; width: 100%; }
+    td:nth-child(3) { width: 1.6em; }
 
     .quantity {
         border-radius: 0.75em;
         background: $color-ice;
         color: $color-table-background;
-        display: inline-block;
         font-size: $font-size-small;
         text-align: center;
         min-width: 3em;
-        margin-right: 0.5em;
-        padding: 0 0.5em;
+        padding: 0.1em 0.5em;
+        height: $font-size-small + 0.2em;
     }
 
     .name {
-        padding-right: 2.4em;
+        font-size: $font-size-small;
     }
 
     img {
-        position: absolute; top: 0; right: 0; height: 1.6em; width: 1.6em;
+        height: 1.6em; width: 1.6em;
     }
 }

src/data/minecraft/recipes.json

@@ -485,7 +485,7 @@
             "tools": "Crafting Table"
         }, {
             "output": "Glistering Melon",
-            "input": [[8, "Gold Nugget"], "Melon (item)"],
+            "input": [[8, "Gold Nugget"], "Melon"],
             "tools": "Crafting Table"
         }, {
             "output": "Glowstone",
@@ -833,11 +833,11 @@
             "input": "Lilac"
         }, {
             "output": "Melon (block)",
-            "input": [[9, "Melon (item)"]],
+            "input": [[9, "Melon"]],
             "tools": "Crafting Table"
         }, {
             "output": "Melon Seeds",
-            "input": "Melon (item)"
+            "input": "Melon"
         }, {
             "output": "Milk",
             "input": "Bucket",
@@ -983,7 +983,7 @@
             "tools": "Brewing Stand"
         }, {
             "output": [[3, "Potion of Fire Resistance (8:00)"]],
-            "input": [[3, "Postion of Fire Resistance (3:00)"], "Redstone"],
+            "input": [[3, "Potion of Fire Resistance (3:00)"], "Redstone"],
             "tools": "Brewing Stand"
         }, {
             "output": [[3, "Potion of Harming"]],
@@ -1103,7 +1103,7 @@
             "tools": "Brewing Stand"
         }, {
             "output": [[3, "Potion of Swiftness II (1:30)"]],
-            "input": [[3, "Potion of Regeneration (0:45)"], "Glowstone"],
+            "input": [[3, "Potion of Swiftness (3:00)"], "Glowstone"],
             "tools": "Brewing Stand"
         }, {
             "output": [[3, "Potion of Water Breathing (3:00)"]],

src/scripts/controllers/crafting_table_controller.coffee

@@ -80,9 +80,9 @@ module.exports = class CraftingTableController extends BaseController
         @$nameField           = @$('input[name="name"]')
         @$quantityField       = @$('select[name="quantity"]')
 
-        @$needList   = @$('td.need ul')
-        @$makeList   = @$('td.make ul')
-        @$resultList = @$('td.result ul')
+        @$needList   = @$('td.need table')
+        @$makeList   = @$('td.make table')
+        @$resultList = @$('td.result table')
 
         @_updateNameAutocomplete()
         @_craft()

src/templates/crafting_table.jade

@@ -24,17 +24,17 @@
             input(name="including_tools", type="checkbox")
             | including tools
 
-    table
+    table.main
         tr
-            td.have
+            td.have.list
                 h3: p You have...
-                textarea(name="have", placeholder="For example:\n\n3 wool\n4 iron ingot")
-            td.need
+                textarea(name="have", placeholder="For example:\n\n3 wool\n4 iron ingot", rows="12")
+            td.need.list
                 h3: p You'll need...
-                ul
-            td.make
+                table.list
+            td.make.list
                 h3: p You'll make...
-                ul
-            td.result
+                table.list
+            td.result.list
                 h3: p You'll get...
-                ul
+                table.list

src/templates/stack.jade

@@ -5,7 +5,7 @@
 //- All rights reserved.
 //-
 
-li.view__stack
-    p.quantity
-    a.name: p
-    img(src='')
+tr.view__stack
+    td: p.quantity
+    td: p.name
+    td: img(src='')