Initial implementation of the InventoryController

src/css/templates/index.scss

@@ -6,5 +6,7 @@ All rights reserved.
 */
 
 @import 'crafting_table';
+@import 'inventory';
+@import 'item_page';
 @import 'mod_pack';
 @import 'stack';

src/css/templates/inventory.scss

@@ -0,0 +1,85 @@
+/*
+Crafting Guide - inventory.scss
+
+Copyright (c) 2014-2015 by Redwood Labs
+All rights reserved.
+*/
+
+.view__inventory {
+    min-height: 14em;
+    width: 100%;
+
+    .edit td {
+        padding-top: 1em;
+    }
+
+    .panel {
+        position: absolute; top: 5em; right: 2em; bottom: 0; left: 2em;
+        background: $color-table-background;
+        text-align: right;
+    }
+
+    .scrollbox {
+        position: absolute; top: 0em; right: 0em; bottom: 3em; left: 0em;
+        padding: 0.5em 1em;
+        overflow: auto;
+    }
+
+    .toolbar {
+        position: absolute; right: 0; bottom: 0; left: 0; height: 3em;
+        background: $color-toolbar-background;
+        border-top: 1px solid $color-gray-light;
+    }
+
+    button[name="clear"] {
+        position: absolute; bottom: 0.5em; right: 0.5em;
+    }
+
+    input {
+        border: 1px solid $color-gray-light;
+    }
+
+    table {
+        width: 100%;
+    }
+
+    td {
+        height: 3.6em;
+        padding-bottom: 0.25em;
+
+        &:nth-child(1) {
+            width: 3.6em;
+
+            input {
+                border-radius: 0.75em;
+                margin: 0 auto;
+                text-align: center;
+                width: 90%;
+            }
+        }
+
+        &:nth-child(2) {
+            @include box-sizing(content-box);
+            padding: 0 2.0em 0 1.0em;
+
+            input {
+                height: 100%; width: 100%;
+                border: 0;
+                border-bottom: 1px dashed $color-gray-light;
+                outline: 0;
+
+                &:focus {
+                    border: 1px solid $color-gray-light;
+                }
+            }
+        }
+
+        &:nth-child(3) {
+            width: 3.6em;
+
+            button {
+                width: 100%;
+            }
+        }
+    }
+}

src/css/templates/item_page.scss

@@ -0,0 +1,19 @@
+/*
+Crafting Guide - item_page.scss
+
+Copyright (c) 2014-2015 by Redwood Labs
+All rights reserved.
+*/
+
+.view__item_page {
+    & > div {
+        display: inline-block;
+        padding: 0 2em;
+        position: relative;
+        vertical-align: top;
+    }
+
+    .view__inventory { width: 50%; height: 26em; }
+
+    .view__crafting_table, .view__mod_pack { margin-top: 2em; width: 100%; }
+}

src/css/templates/stack.scss

@@ -7,17 +7,14 @@ All rights reserved.
 
 .view__stack {
     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; }
+    td { vertical-align: middle; }
 
     .quantity {
         border-radius: 0.75em;
         background: $color-ice;
         color: $color-table-background;
-        font-size: $font-size-small;
+        font-size: $font-size-large;
+        font-weight: bold;
         text-align: center;
         min-width: 3em;
         padding: 0.1em 0.5em;
@@ -25,10 +22,12 @@ All rights reserved.
     }
 
     .name {
-        font-size: $font-size-small;
+        display: inline;
+        font-size: $font-size-large;
     }
 
     img {
-        height: 1.6em; width: 1.6em;
+        width: 100%; height: auto;
+        max-height: 4.8em;
     }
 }