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
+24 -5
View File
@@ -13,17 +13,24 @@
display : flex; display : flex;
flex-wrap : wrap; flex-wrap : wrap;
@include screen-size(tablet) {
flex-direction: column;
align-items: stretch;
}
.view__mod_tile { .view__mod_tile {
flex : 1 1 calc(50% - 12px); // $size-margin-large / 2 flex : 1 1 calc(50% - 12px); // $size-margin-large / 2
margin-right : $size-margin-medium; margin-right : $size-margin-medium;
margin-bottom : $size-margin-large; 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; flex: 0 0 auto;
margin-right: 0; 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; align-items : stretch;
a { a {
width: 100%;
@include floating-panel; @include floating-panel;
border : $size-border-medium solid $color-background-panel; border : $size-border-medium solid $color-background-panel;
color : $color-text; color : $color-text;
@@ -39,6 +37,7 @@
overflow : hidden; overflow : hidden;
.title { .title {
max-width: 0;
margin-bottom : $size-margin-medium; margin-bottom : $size-margin-medium;
font-family : $font-family-header; 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 .item_container
.empty_placeholder nothing .empty_placeholder nothing
.buttons .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 .button.clear: .bezel: p clear
src/client/site/common/inventory/inventory.scss
+16
View File
@@ -40,10 +40,22 @@
.item-selector { .item-selector {
flex : 80%; flex : 80%;
margin-right : $size-margin-medium; margin-right : $size-margin-medium;
@include screen-size(mobile) {
flex: 50%;
.full {
display: none;
}
}
} }
.clear { .clear {
flex : 20%; flex : 20%;
@include screen-size(mobile) {
flex: 50%;
}
} }
} }
} }
@@ -63,6 +75,10 @@
input { input {
width : 3em; width : 3em;
font-size : $font-size-xlarge; font-size : $font-size-xlarge;
@include screen-size(mobile) {
width : 2em;
}
} }
} }
src/client/site/common/item_group/item_group.scss
+16
View File
@@ -14,10 +14,26 @@
.view__item_tile { .view__item_tile {
margin-bottom: $size-margin-medium; margin-bottom: $size-margin-medium;
width: calc(33% - 8px); // $size-margin-xsmall * 2 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 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; overflow: visible;
display: flex; display: flex;
align-items: center; align-items: flex-start;
img { img {
height: $size-minecraft-block; height: $size-minecraft-block;
@@ -22,9 +22,19 @@
font-family: $font-family-text; font-family: $font-family-text;
font-size: $font-size-medium; font-size: $font-size-medium;
line-height: $size-minecraft-block; line-height: $size-minecraft-block;
overflow-x: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; 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 { .view__item_selector_popup {
max-width: $size-minecraft-block * 20;
height : 66%; height : 66%;
@include screen-size(mobile) {
max-width: 98%;
height: 80%;
}
background : $color-background-panel; background : $color-background-panel;
border : 1px solid $color-gray-medium; border : 1px solid $color-gray-medium;
@@ -35,6 +41,7 @@
input { input {
flex: 1 1 100%; flex: 1 1 100%;
min-width: $font-size-large * 10;
background: none; background: none;
border: 0; border: 0;
src/client/site/craft_page/craftsman_working/craftsman_working.jade
+1 -1
View File
@@ -16,5 +16,5 @@
.button: .bezel: p Calculate .button: .bezel: p Calculate
.outdated .outdated
.message Crafting plan is out of date! .message Your crafting plan is out of date!
.button: .bezel: p Recalculate .button: .bezel: p Recalculate
src/client/site/craft_page/craftsman_working/craftsman_working.scss
+23 -8
View File
@@ -22,6 +22,7 @@ All rights reserved.
p { p {
font-family : $font-family-header; font-family : $font-family-header;
font-size : $font-size-large; font-size : $font-size-large;
text-align : center;
} }
} }
@@ -29,18 +30,13 @@ All rights reserved.
p { p {
font-family : $font-family-header; font-family : $font-family-header;
font-size : $font-size-medium; font-size : $font-size-medium;
text-align : center;
} }
} }
.button { .button {
margin-top : $size-margin-large; margin-top : $size-margin-large;
height: $size-minecraft-block * 2; min-width: $size-minecraft-block * 6;
width: $size-minecraft-block * 10;
p {
font-size: $font-size-xxlarge;
transform: translateY(-25%);
}
} }
} }
@@ -57,13 +53,32 @@ All rights reserved.
.message { .message {
margin-top : $size-margin-medium; margin-top : $size-margin-medium;
font-family : $font-family-header; font-family : $font-family-header;
font-size : $font-size-xlarge; font-size : $font-size-xlarge;
text-align : center;
} }
.button { .button {
width: $size-minecraft-block * 10; width : $size-minecraft-block * 6;
margin : $size-margin-medium; 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__inventory
.view__recipe .view__recipe
.buttons .buttons
a.button.tool: .bezel: p show plan for tools a.button.tool: .bezel: p <span class="full">show plan for </span>tools
.button.complete: .bezel: p complete step .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 { .main_content {
display: flex; display: flex;
@include screen-size(mobile) {
flex-direction: column-reverse;
align-items: stretch;
}
.view__inventory { .view__inventory {
flex: 50%; flex: 50%;
margin-left: $size-margin-large; 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 { .view__recipe {
@@ -42,6 +55,9 @@
margin-top: $size-margin-large; margin-top: $size-margin-large;
opacity: 0; opacity: 0;
@include screen-size(mobile) {
opacity: 1.0;
}
display: flex; display: flex;
@@ -51,6 +67,12 @@
&:not(:first-child) { &:not(:first-child) {
margin-left: $size-margin-medium; margin-left: $size-margin-medium;
} }
@include screen-size(mobile) {
.full {
display: none;
}
}
} }
a { a {
src/client/site/feedback/feedback.scss
+4
View File
@@ -15,6 +15,10 @@
display: flex; display: flex;
@include screen-size(mobile) {
display: none;
}
.form-content { .form-content {
flex: 1 1 100%; flex: 1 1 100%;
src/client/site/footer/footer.scss
+9
View File
@@ -19,12 +19,20 @@
> .content { > .content {
display: flex; display: flex;
@include screen-size(mobile) {
flex-direction: column;
}
color: $color-text-light; color: $color-text-light;
.left, .center, .right { .left, .center, .right {
flex: 1 1 33%; flex: 1 1 33%;
margin: $size-margin-large $size-margin-large $size-margin-large 0; margin: $size-margin-large $size-margin-large $size-margin-large 0;
@include screen-size(mobile) {
margin-left: $size-margin-large;
}
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -38,6 +46,7 @@
.action { .action {
flex: 1 1 auto; flex: 1 1 auto;
align-self: center; align-self: center;
margin-top: $size-margin-large;
margin-bottom: $size-margin-large; margin-bottom: $size-margin-large;
display: flex; display: flex;
src/client/site/header/header.scss
+9 -1
View File
@@ -15,6 +15,10 @@
display : flex; display : flex;
align-items : center; align-items : center;
@include screen-size(mobile) {
display : none;
}
a { a {
flex : 0 0 auto; flex : 0 0 auto;
height : $size-minecraft-block * 1.5; height : $size-minecraft-block * 1.5;
@@ -45,8 +49,12 @@
} }
.addthis_sharing_toolbox { .addthis_sharing_toolbox {
@include screen-size(mobile) {
display: none;
}
flex : 0 0 auto; flex : 0 0 auto;
min-height : 37px; min-height : 37px; // actual size of addthis component
min-width : 144px; min-width : 144px;
margin-right : $size-margin-small; margin-right : $size-margin-small;
src/client/site/index.scss
+5 -8
View File
@@ -36,26 +36,23 @@ html {
} }
& > *:first-child { & > *:first-child {
flex: 0 0 50%; flex: 1 1 100%;
@include screen-size(tablet) {
flex: 0 0 75%;
}
box-shadow : $size-margin-small $size-margin-small $size-margin-large $color-shadow; box-shadow : $size-margin-small $size-margin-small $size-margin-large $color-shadow;
} }
} }
.page { .page {
background : $color-background-page; max-width : $size-page-width;
width : 100%;
@include screen-size(desktop) { @include screen-size(desktop) {
margin : $size-margin-large 0; 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; box-shadow : $size-margin-small $size-margin-small $size-margin-large $color-shadow;
} }
background : $color-background-page;
display : flex; display : flex;
flex-direction : column; 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; $tablet : 960px;
$mobile : 320px; $mobile : 568px;
@mixin screen-size($screenType) { @mixin screen-size($screenType) {
@if $screenType == desktop { @if $screenType == desktop {
@@ -16,5 +16,7 @@ $mobile : 320px;
@media (max-width: $tablet) { @content; } @media (max-width: $tablet) { @content; }
} @else if $screenType == mobile { } @else if $screenType == mobile {
@media (max-width: $mobile) { @content; } @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) { @include screen-size(tablet) {
margin: 0 $size-margin-xlarge; margin: 0 $size-margin-xlarge;
} }
@include screen-size(mobile) {
margin: 0;
}
section { section {
margin-bottom: $size-margin-large; margin-bottom: $size-margin-large;