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

Initial progress towards responsive for mobile

Browse Source
This commit is contained in:
Andrew Miner
2016-04-29 22:30:37 -07:00
parent 636a8d061c
commit 83156c30c7
18 changed files with 239 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/site/craft_page/craftsman_working/craftsman_working.jade
+1 -1
View File
@@ -16,5 +16,5 @@
.button: .bezel: p Calculate
.outdated
.message Crafting plan is out of date!
.message Your crafting plan is out of date!
.button: .bezel: p Recalculate
src/client/site/craft_page/craftsman_working/craftsman_working.scss
+39 -24
View File
@@ -13,34 +13,30 @@ All rights reserved.
padding : $size-margin-xlarge;
.waiting {
margin-bottom: $size-margin-xlarge;
margin-bottom : $size-margin-xlarge;
}
.message {
margin-bottom: $size-margin-medium;
margin-bottom : $size-margin-medium;
p {
font-family: $font-family-header;
font-size: $font-size-large;
font-family : $font-family-header;
font-size : $font-size-large;
text-align : center;
}
}
.count {
p {
font-family: $font-family-header;
font-size: $font-size-medium;
font-family : $font-family-header;
font-size : $font-size-medium;
text-align : center;
}
}
.button {
margin-top: $size-margin-large;
height: $size-minecraft-block * 2;
width: $size-minecraft-block * 10;
p {
font-size: $font-size-xxlarge;
transform: translateY(-25%);
}
margin-top : $size-margin-large;
min-width: $size-minecraft-block * 6;
}
}
@@ -48,22 +44,41 @@ All rights reserved.
position: fixed; top: 0; left: 0; right: 0;
background: fade-out($color-white, 0.15) url('/images/panel-background-outdated.png');
border-bottom: $size-border-medium solid $color-black;
background : fade-out($color-white, 0.15) url('/images/panel-background-outdated.png');
border-bottom : $size-border-medium solid $color-black;
display: flex;
flex-direction: column;
align-items: center;
display : flex;
flex-direction : column;
align-items : center;
.message {
margin-top: $size-margin-medium;
font-family: $font-family-header;
font-size: $font-size-xlarge;
margin-top : $size-margin-medium;
font-family : $font-family-header;
font-size : $font-size-xlarge;
text-align : center;
}
.button {
width: $size-minecraft-block * 10;
margin: $size-margin-medium;
width : $size-minecraft-block * 6;
margin : $size-margin-medium;
}
}
}
@include screen-size(not-mobile) {
.view__craftsman_working {
.panel {
.button {
margin-top : $size-margin-large;
height : $size-minecraft-block * 2;
width : $size-minecraft-block * 10;
p {
font-size : $font-size-xxlarge;
transform : translateY(-25%);
}
}
}
}
}
src/client/site/craft_page/step/step.jade
+2 -2
View File
@@ -11,5 +11,5 @@
.view__inventory
.view__recipe
.buttons
a.button.tool: .bezel: p show plan for tools
.button.complete: .bezel: p complete step
a.button.tool: .bezel: p <span class="full">show plan for </span>tools
.button.complete: .bezel: p complete<span class="full"> step</span>
src/client/site/craft_page/step/step.scss
+22
View File
@@ -28,9 +28,22 @@
.main_content {
display: flex;
@include screen-size(mobile) {
flex-direction: column-reverse;
align-items: stretch;
}
.view__inventory {
flex: 50%;
margin-left: $size-margin-large;
@include screen-size(mobile) {
margin: $size-margin-large $size-margin-large 0 $size-margin-large;
}
.buttons {
display: none;
}
}
.view__recipe {
@@ -42,6 +55,9 @@
margin-top: $size-margin-large;
opacity: 0;
@include screen-size(mobile) {
opacity: 1.0;
}
display: flex;
@@ -51,6 +67,12 @@
&:not(:first-child) {
margin-left: $size-margin-medium;
}
@include screen-size(mobile) {
.full {
display: none;
}
}
}
a {