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/browse_page/browse_page.scss
+25 -6
View File
@@ -13,17 +13,24 @@
display : flex;
flex-wrap : wrap;
@include screen-size(tablet) {
flex-direction: column;
align-items: stretch;
}
.view__mod_tile {
flex : 1 1 calc(50% - 12px); // $size-margin-large / 2
margin-right : $size-margin-medium;
margin-bottom : $size-margin-large;
}
}
}
}
@include screen-size(tablet) {
@include screen-size(tablet) {
.view__browse_page {
.right {
.tile_container {
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
.view__mod_tile {
flex: 0 0 auto;
margin-right: 0;
}
@@ -31,3 +38,15 @@
}
}
}
@include screen-size(mobile) {
.view__browse_page {
.right {
.tile_container {
.view__mod_tile {
flex: 1 1 50%;
}
}
}
}
}
src/client/site/browse_page/mod_tile/mod_tile.scss
+18 -2
View File
@@ -13,8 +13,6 @@
align-items : stretch;
a {
width: 100%;
@include floating-panel;
border : $size-border-medium solid $color-background-panel;
color : $color-text;
@@ -39,6 +37,7 @@
overflow : hidden;
.title {
max-width: 0;
margin-bottom : $size-margin-medium;
font-family : $font-family-header;
@@ -86,3 +85,20 @@
}
}
}
@include screen-size(mobile) {
.view__mod_tile {
min-width: 0;
a {
& > .left {
flex: 0 0 $size-minecraft-block * 2;
img {
width: $size-minecraft-block * 2;
max-height: $size-minecraft-block * 2;
}
}
}
}
}
src/client/site/common/inventory/inventory.jade
+1 -1
View File
@@ -9,5 +9,5 @@
.item_container
.empty_placeholder nothing
.buttons
.button.item-selector: .bezel: p add an item...
.button.item-selector: .bezel: p add<span class="full"> an item</span>...
.button.clear: .bezel: p clear
src/client/site/common/inventory/inventory.scss
+17 -1
View File
@@ -40,10 +40,22 @@
.item-selector {
flex : 80%;
margin-right : $size-margin-medium;
@include screen-size(mobile) {
flex: 50%;
.full {
display: none;
}
}
}
.clear {
flex : 20%;
@include screen-size(mobile) {
flex: 50%;
}
}
}
}
@@ -61,8 +73,12 @@
.quantity {
padding-right : $size-margin-medium;
input {
width: 3em;
width : 3em;
font-size : $font-size-xlarge;
@include screen-size(mobile) {
width : 2em;
}
}
}
src/client/site/common/item_group/item_group.scss
+17 -1
View File
@@ -14,10 +14,26 @@
.view__item_tile {
margin-bottom: $size-margin-medium;
width: calc(33% - 8px); // $size-margin-xsmall * 2
}
}
}
@include screen-size(tablet) {
@include screen-size(tablet) {
.view__item_group {
.panel {
.view__item_tile {
width: calc(50% - 8px); // $size-margin-xsmall * 2
}
}
}
}
@include screen-size(mobile) {
.view__item_group {
.panel {
.view__item_tile {
width: 100%;
}
}
}
}
src/client/site/common/item_group/item_tile/item_tile.scss
+12 -2
View File
@@ -10,7 +10,7 @@
overflow: visible;
display: flex;
align-items: center;
align-items: flex-start;
img {
height: $size-minecraft-block;
@@ -22,9 +22,19 @@
font-family: $font-family-text;
font-size: $font-size-medium;
line-height: $size-minecraft-block;
overflow-x: hidden;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
@include screen-size(mobile) {
.view__item_tile {
a {
p {
white-space: normal;
}
}
}
}
src/client/site/common/item_selector/item_selector.scss
+7
View File
@@ -9,8 +9,14 @@
}
.view__item_selector_popup {
max-width: $size-minecraft-block * 20;
height : 66%;
@include screen-size(mobile) {
max-width: 98%;
height: 80%;
}
background : $color-background-panel;
border : 1px solid $color-gray-medium;
@@ -35,6 +41,7 @@
input {
flex: 1 1 100%;
min-width: $font-size-large * 10;
background: none;
border: 0;
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 {
src/client/site/feedback/feedback.scss
+4
View File
@@ -15,6 +15,10 @@
display: flex;
@include screen-size(mobile) {
display: none;
}
.form-content {
flex: 1 1 100%;
src/client/site/footer/footer.scss
+9
View File
@@ -19,12 +19,20 @@
> .content {
display: flex;
@include screen-size(mobile) {
flex-direction: column;
}
color: $color-text-light;
.left, .center, .right {
flex: 1 1 33%;
margin: $size-margin-large $size-margin-large $size-margin-large 0;
@include screen-size(mobile) {
margin-left: $size-margin-large;
}
display: flex;
flex-direction: column;
@@ -38,6 +46,7 @@
.action {
flex: 1 1 auto;
align-self: center;
margin-top: $size-margin-large;
margin-bottom: $size-margin-large;
display: flex;
src/client/site/header/header.scss
+10 -2
View File
@@ -15,6 +15,10 @@
display : flex;
align-items : center;
@include screen-size(mobile) {
display : none;
}
a {
flex : 0 0 auto;
height : $size-minecraft-block * 1.5;
@@ -40,13 +44,17 @@
white-space: nowrap;
@include screen-size(tablet) {
font-size: $font-size-xlarge;
font-size : $font-size-xlarge;
}
}
.addthis_sharing_toolbox {
@include screen-size(mobile) {
display: none;
}
flex : 0 0 auto;
min-height : 37px;
min-height : 37px; // actual size of addthis component
min-width : 144px;
margin-right : $size-margin-small;
src/client/site/index.scss
+5 -8
View File
@@ -36,26 +36,23 @@ html {
}
& > *:first-child {
flex: 0 0 50%;
@include screen-size(tablet) {
flex: 0 0 75%;
}
flex: 1 1 100%;
box-shadow : $size-margin-small $size-margin-small $size-margin-large $color-shadow;
}
}
.page {
background : $color-background-page;
max-width : $size-page-width;
width : 100%;
@include screen-size(desktop) {
margin : $size-margin-large 0;
max-width : $size-page-width;
width : 100%;
box-shadow : $size-margin-small $size-margin-small $size-margin-large $color-shadow;
}
background : $color-background-page;
display : flex;
flex-direction : column;
src/client/site/mod_page/mod_page.scss
+38
View File
@@ -128,3 +128,41 @@
}
}
}
@include screen-size(mobile) {
.view__mod_page {
.about {
flex-direction: column;
& > * {
margin-left: $size-margin-medium;
margin-right: $size-margin-medium;
}
.left {
margin-bottom: $size-margin-large;
margin-left: $size-margin-medium;
margin-right: $size-margin-medium;
display : flex;
flex-direction : column;
align-items : center;
}
.center {
margin-bottom: $size-margin-xlarge;
margin-left: $size-margin-medium;
margin-right: $size-margin-medium;
.author, .title {
text-align: center;
}
}
.right {
margin-left: $size-margin-medium;
margin-right: $size-margin-medium;
}
}
}
}
src/client/styles/media.scss
+3 -1
View File
@@ -7,7 +7,7 @@
$tablet : 960px;
$mobile : 320px;
$mobile : 568px;
@mixin screen-size($screenType) {
@if $screenType == desktop {
@@ -16,5 +16,7 @@ $mobile : 320px;
@media (max-width: $tablet) { @content; }
} @else if $screenType == mobile {
@media (max-width: $mobile) { @content; }
} @else if $screenType == not-mobile {
@media (min-width: $mobile + 1) { @content }
}
}
src/client/styles/mixins.scss
+3
View File
@@ -44,6 +44,9 @@
@include screen-size(tablet) {
margin: 0 $size-margin-xlarge;
}
@include screen-size(mobile) {
margin: 0;
}
section {
margin-bottom: $size-margin-large;