craftingguide/website
1
0
Fork 0
Code Pull Requests Actions Activity

Make adjustments for mobile

Browse Source
This commit is contained in:
Andrew Miner
2017-07-23 20:06:02 -07:00
parent 59217a5fea
commit c45572997f
3 changed files with 76 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/site/common/recipe/crafting_table/crafting_table.jade
+7 -6
View File
@@ -8,11 +8,12 @@
.view__crafting_table .view__crafting_table
.input_inventory .input_inventory
.view__inventory .view__inventory
.input_grid .grid_block
.view__crafting_grid .input_grid
.tool .view__crafting_grid
.output_slot .tool
.view__slot .output_slot
.multiplier .view__slot
.multiplier
.output_inventory .output_inventory
.view__inventory .view__inventory
src/client/site/common/recipe/crafting_table/crafting_table.scss
+68 -27
View File
@@ -15,42 +15,50 @@
margin-right: $size-margin-large; margin-right: $size-margin-large;
} }
.input_grid { .grid_block {
flex: 1 1 100%; flex: 1 1 100%;
align-items : center; display: flex;
display : flex; align-items: center;
flex-direction : column; justify-content: center;
.view__crafting_grid { .input_grid {
flex: 0 0 auto; flex: 0 0 auto;
align-items : center;
display : flex;
flex-direction : column;
.view__crafting_grid {
flex: 0 0 auto;
}
.tool {
margin-top : $size-margin-small;
font-family : $font-family-text;
font-size : $font-size-medium;
}
} }
.tool { .output_slot {
margin-top : $size-margin-small; flex: 0 0 auto;
margin-left: $size-margin-large;
font-family : $font-family-text; display : flex;
font-size : $font-size-medium; flex-direction : column;
} justify-content : center;
} align-items : center;
.output_slot { .view__slot {
flex: 0 0 auto; border: $size-border-medium solid $color-gray-medium;
margin-left: $size-margin-large; }
display : flex; .multiplier {
flex-direction : column; font-family : $font-family-header;
justify-content : center; font-size : $font-size-large;
align-items : center; margin-top : $size-margin-medium;
}
.view__slot {
border: $size-border-medium solid $color-gray-medium;
}
.multiplier {
font-family : $font-family-header;
font-size : $font-size-large;
margin-top : $size-margin-medium;
} }
} }
@@ -60,3 +68,36 @@
margin-left: $size-margin-large; 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;
}
}
}
src/client/site/common/recipe/recipe.scss
+1 -1
View File
@@ -46,4 +46,4 @@
margin-top : $size-margin-medium; margin-top : $size-margin-medium;
} }
} }
} }