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

Add reactive styles for Tablets

Browse Source
This commit is contained in:
Andrew Miner
2016-04-23 20:10:09 -07:00
parent 64e118a2c8
commit a8d08b93c5
13 changed files with 126 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/site/browse_page/browse_page.scss
+12 -2
View File
@@ -12,11 +12,21 @@
.tile_container { .tile_container {
display : flex; display : flex;
flex-wrap : wrap; flex-wrap : wrap;
justify-content : space-between;
@include screen-size(tablet) {
flex-direction: column;
align-items: stretch;
}
.view__mod_tile { .view__mod_tile {
width : calc(50% - 12px); // $size-margin-large / 2 flex : 1 1 calc(50% - 12px); // $size-margin-large / 2
margin-right : $size-margin-medium;
margin-bottom : $size-margin-large; margin-bottom : $size-margin-large;
@include screen-size(tablet) {
flex: 0 0 auto;
margin-right: 0;
}
} }
} }
} }
src/client/site/browse_page/mod_tile/mod_tile.scss
+1 -1
View File
@@ -13,7 +13,7 @@
align-items : stretch; align-items : stretch;
a { a {
max-width: 100%; width: 100%;
@include floating-panel; @include floating-panel;
border : $size-border-medium solid $color-background-panel; border : $size-border-medium solid $color-background-panel;
src/client/site/common/inventory/inventory.scss
+2 -2
View File
@@ -38,12 +38,12 @@
margin-top: $size-margin-large; margin-top: $size-margin-large;
.item-selector { .item-selector {
flex : 85%; flex : 80%;
margin-right : $size-margin-medium; margin-right : $size-margin-medium;
} }
.clear { .clear {
flex : 15%; flex : 20%;
} }
} }
} }
src/client/site/common/item_group/item_group.scss
+4
View File
@@ -14,6 +14,10 @@
.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) {
width: calc(50% - 8px); // $size-margin-xsmall * 2
}
} }
} }
} }
src/client/site/common/video/video.jade
+1 -1
View File
@@ -6,5 +6,5 @@
//- //-
.view__video .view__video
iframe(width="356", height="267", src="", frameborder="0", allowfullscreen="true") iframe(src="", frameborder="0", allowfullscreen="true")
.caption: p .caption: p
src/client/site/craft_page/craftsman_working/craftsman_working.scss
+1 -1
View File
@@ -35,7 +35,7 @@ All rights reserved.
.button { .button {
margin-top: $size-margin-large; margin-top: $size-margin-large;
height: $size-minecraft-block * 2; height: $size-minecraft-block * 2;
width: 50%; width: $size-minecraft-block * 10;
p { p {
font-size: $font-size-xxlarge; font-size: $font-size-xxlarge;
src/client/site/feedback/feedback.scss
+3 -5
View File
@@ -73,13 +73,11 @@
background: $color-gray-light; background: $color-gray-light;
border: $size-border-medium solid $color-black; border: $size-border-medium solid $color-black;
border-left: 0; border-left: 0;
position: relative;
display: flex;
align-items: center;
justify-content: center;
p { p {
transform: rotate(-90deg); position: absolute; top: 50%; left: 50%;
transform: translateX(-50%) rotate(-90deg) translateX(10%);
font-family: $font-family-header; font-family: $font-family-header;
font-size: $label-size; font-size: $label-size;
src/client/site/header/header.scss
+18 -4
View File
@@ -23,15 +23,25 @@
img { img {
position : relative; position : relative;
height : $size-minecraft-block * 1.5;
width : $size-minecraft-block * 1.5;
@include screen-size(desktop) {
top : -$size-minecraft-block * 0.5; top : -$size-minecraft-block * 0.5;
left : -$size-minecraft-block * 0.5; left : -$size-minecraft-block * 0.5;
height : $size-minecraft-block * 2.0; height : $size-minecraft-block * 2.0;
width : $size-minecraft-block * 2.0; width : $size-minecraft-block * 2.0;
} }
} }
}
h1 { h1 {
flex: 1 1 auto; flex: 1 1 auto;
white-space: nowrap;
@include screen-size(tablet) {
font-size: $font-size-xlarge;
}
} }
.addthis_sharing_toolbox { .addthis_sharing_toolbox {
@@ -40,7 +50,6 @@
min-width : 144px; min-width : 144px;
margin-right : $size-margin-small; margin-right : $size-margin-small;
&.placeholder { &.placeholder {
border : 1px solid orange; border : 1px solid orange;
text-align : center; text-align : center;
@@ -62,15 +71,20 @@
align-items : center; align-items : center;
display : flex; display : flex;
flex-wrap : wrap; flex-wrap : wrap;
justify-content : space-around; justify-content : center;
padding : $size-margin-medium $size-margin-medium; padding : $size-margin-medium $size-margin-medium;
padding-top : 0; padding-top : 0;
.button { .button {
flex : 1 1 20%; flex : 1 1 calc(20% - 8px);
min-width : 4 * $size-minecraft-block; min-width : 3 * $size-minecraft-block;
max-width : 5 * $size-minecraft-block; max-width : 5 * $size-minecraft-block;
margin-top : $size-margin-medium; margin-top : $size-margin-medium;
margin-right : $size-margin-small;
&:last-child {
margin-right: 0;
}
} }
} }
src/client/site/index.scss
+8 -2
View File
@@ -38,17 +38,23 @@ html {
& > *:first-child { & > *:first-child {
flex: 0 0 50%; flex: 0 0 50%;
@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;
@include screen-size(desktop) {
margin : $size-margin-large 0; margin : $size-margin-large 0;
max-width : $size-page-width; max-width : $size-page-width;
width : 100%; width : 100%;
background : $color-background-page;
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;
}
display : flex; display : flex;
flex-direction : column; flex-direction : column;
src/client/site/tutorial_page/tutorial_page.scss
+4 -2
View File
@@ -51,12 +51,14 @@
margin-top : -$size-margin-medium; margin-top : -$size-margin-medium;
display : flex; display : flex;
flex-wrap : wrap; flex-wrap : wrap;
justify-content: space-between;
padding-right : -$size-margin-medium;
& > * { & > * {
flex : 1 1 100%;
margin-right : $size-margin-medium; margin-right : $size-margin-medium;
margin-top : $size-margin-medium; margin-top : $size-margin-medium;
max-width : calc(50% - 12px); // $size-margin-medium width : calc(50% - 12px); // $size-margin-medium;
} }
} }
} }
src/client/styles/main.scss
+3
View File
@@ -8,6 +8,9 @@
// normalize all values // normalize all values
@import './reset'; @import './reset';
// define media breakpoints
@import './media';
// define variables // define variables
@import './colors'; @import './colors';
@import './fonts'; @import './fonts';
src/client/styles/media.scss
+20
View File
@@ -0,0 +1,20 @@
//
// Crafting Guide - fonts.scss
//
// Copyright © 2014-2016 by Redwood Labs
// All rights reserved.
//
$tablet : 960px;
$mobile : 320px;
@mixin screen-size($screenType) {
@if $screenType == desktop {
@media (min-width: $tablet + 1) { @content; }
} @else if $screenType == tablet {
@media (max-width: $tablet) { @content; }
} @else if $screenType == mobile {
@media (max-width: $mobile) { @content; }
}
}
src/client/styles/mixins.scss
+37 -26
View File
@@ -10,6 +10,11 @@
filter : blur($radius); filter : blur($radius);
} }
@mixin floating-panel {
background: $color-background-panel;
box-shadow: $size-margin-xxsmall $size-margin-xxsmall $size-margin-xsmall $color-shadow;
}
@mixin grayscale { @mixin grayscale {
-webkit-filter : grayscale(100%); -webkit-filter : grayscale(100%);
-moz-filter : grayscale(100%); -moz-filter : grayscale(100%);
@@ -18,17 +23,32 @@
filter : gray; filter : gray;
} }
@mixin no-select { @mixin layout-body-with-sidebar {
-webkit-touch-callout : none; /* iOS Safari */ display: flex;
-webkit-user-select : none; /* Chrome/Safari/Opera */
-moz-user-select : none; /* Firefox */ & > .left {
-ms-user-select : none; /* IE/Edge */ flex: 0 0 $size-skyscraper-width + $size-margin-medium;
user-select : none; /* non-prefixed version, currently not supported by any browser */ padding-right: $size-margin-medium;
@include screen-size(tablet) {
display: none;
}
@include screen-size(mobile) {
display: none;
}
} }
@mixin floating-panel { & > .right {
background: $color-background-panel; flex: 1 1 auto;
box-shadow: $size-margin-xxsmall $size-margin-xxsmall $size-margin-xsmall $color-shadow;
@include screen-size(tablet) {
margin: 0 $size-margin-xlarge;
}
section {
margin-bottom: $size-margin-large;
}
}
} }
@mixin layout-link-list { @mixin layout-link-list {
@@ -56,6 +76,14 @@
} }
} }
@mixin no-select {
-webkit-touch-callout : none; /* iOS Safari */
-webkit-user-select : none; /* Chrome/Safari/Opera */
-moz-user-select : none; /* Firefox */
-ms-user-select : none; /* IE/Edge */
user-select : none; /* non-prefixed version, currently not supported by any browser */
}
@mixin pixel-image { @mixin pixel-image {
image-rendering : -moz-crisp-edges; /* Firefox */ image-rendering : -moz-crisp-edges; /* Firefox */
image-rendering : -o-crisp-edges; /* Opera */ image-rendering : -o-crisp-edges; /* Opera */
@@ -63,20 +91,3 @@
image-rendering : crisp-edges; image-rendering : crisp-edges;
-ms-interpolation-mode : nearest-neighbor; /* IE (non-standard property) */ -ms-interpolation-mode : nearest-neighbor; /* IE (non-standard property) */
} }
@mixin layout-body-with-sidebar {
display: flex;
& > .left {
flex: 0 0 $size-skyscraper-width + $size-margin-medium;
padding-right: $size-margin-medium;
}
& > .right {
flex: 1 1 auto;
section {
margin-bottom: $size-margin-large;
}
}
}