Make adjustments for mobile

2017-07-23 20:06:02 -07:00
parent 59217a5fea
commit c45572997f
3 changed files with 76 additions and 34 deletions
@@ -8,6 +8,7 @@
 .view__crafting_table
    .input_inventory
        .view__inventory
+    .grid_block
        .input_grid
            .view__crafting_grid
            .tool
@@ -15,9 +15,16 @@
        margin-right: $size-margin-large;
    }

-    .input_grid {
+    .grid_block {
        flex: 1 1 100%;

+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .input_grid {
+            flex: 0 0 auto;
+
            align-items    : center;
            display        : flex;
            flex-direction : column;
@@ -53,6 +60,7 @@
                margin-top  : $size-margin-medium;
            }
        }
+    }

    .output_inventory {
        flex: 1 1 100%;
@@ -60,3 +68,36 @@
        margin-left: $size-margin-large;
    }
 }
+
+@include screen-size(mobile) {
+    .view__crafting_table {
+        border-bottom: 1px solid $color-gray-light;
+        padding-bottom: $size-margin-medium;
+
+        flex-direction: column;
+        align-items: center;
+
+        .input_inventory {
+            flex: 0 0 auto;
+            margin-bottom: $size-margin-small;
+        }
+        
+        .grid_block {
+            flex: 0 0 auto;
+
+            .tool {
+                margin-bottom: $size-margin-medium;
+            }
+        }
+
+        .output_inventory {
+            flex: 0 0 auto;
+            margin-left: 0;
+        }
+
+        .view__inventory {
+            margin-left: $size-margin-medium;
+            margin-right: $size-margin-medium;
+        }
+    }
+}