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
+14 -4
View File
@@ -10,13 +10,23 @@
.right {
.tile_container {
display : flex;
flex-wrap : wrap;
justify-content : space-between;
display : flex;
flex-wrap : wrap;
@include screen-size(tablet) {
flex-direction: column;
align-items: stretch;
}
.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;
@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;
a {
max-width: 100%;
width: 100%;
@include floating-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;
.item-selector {
flex : 85%;
flex : 80%;
margin-right : $size-margin-medium;
}
.clear {
flex : 15%;
flex : 20%;
}
}
}
src/client/site/common/item_group/item_group.scss
+4
View File
@@ -14,6 +14,10 @@
.view__item_tile {
margin-bottom: $size-margin-medium;
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
iframe(width="356", height="267", src="", frameborder="0", allowfullscreen="true")
iframe(src="", frameborder="0", allowfullscreen="true")
.caption: p
src/client/site/craft_page/craftsman_working/craftsman_working.scss
+1 -1
View File
@@ -35,7 +35,7 @@ All rights reserved.
.button {
margin-top: $size-margin-large;
height: $size-minecraft-block * 2;
width: 50%;
width: $size-minecraft-block * 10;
p {
font-size: $font-size-xxlarge;
src/client/site/feedback/feedback.scss
+3 -5
View File
@@ -73,13 +73,11 @@
background: $color-gray-light;
border: $size-border-medium solid $color-black;
border-left: 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
p {
transform: rotate(-90deg);
position: absolute; top: 50%; left: 50%;
transform: translateX(-50%) rotate(-90deg) translateX(10%);
font-family: $font-family-header;
font-size: $label-size;
src/client/site/header/header.scss
+24 -10
View File
@@ -23,15 +23,25 @@
img {
position : relative;
top : -$size-minecraft-block * 0.5;
left : -$size-minecraft-block * 0.5;
height : $size-minecraft-block * 2.0;
width : $size-minecraft-block * 2.0;
height : $size-minecraft-block * 1.5;
width : $size-minecraft-block * 1.5;
@include screen-size(desktop) {
top : -$size-minecraft-block * 0.5;
left : -$size-minecraft-block * 0.5;
height : $size-minecraft-block * 2.0;
width : $size-minecraft-block * 2.0;
}
}
}
h1 {
flex: 1 1 auto;
white-space: nowrap;
@include screen-size(tablet) {
font-size: $font-size-xlarge;
}
}
.addthis_sharing_toolbox {
@@ -40,7 +50,6 @@
min-width : 144px;
margin-right : $size-margin-small;
&.placeholder {
border : 1px solid orange;
text-align : center;
@@ -62,15 +71,20 @@
align-items : center;
display : flex;
flex-wrap : wrap;
justify-content : space-around;
justify-content : center;
padding : $size-margin-medium $size-margin-medium;
padding-top : 0;
.button {
flex : 1 1 20%;
min-width : 4 * $size-minecraft-block;
max-width : 5 * $size-minecraft-block;
margin-top: $size-margin-medium;
flex : 1 1 calc(20% - 8px);
min-width : 3 * $size-minecraft-block;
max-width : 5 * $size-minecraft-block;
margin-top : $size-margin-medium;
margin-right : $size-margin-small;
&:last-child {
margin-right: 0;
}
}
}
src/client/site/index.scss
+11 -5
View File
@@ -38,17 +38,23 @@ html {
& > *:first-child {
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;
}
}
.page {
margin : $size-margin-large 0;
max-width : $size-page-width;
width : 100%;
background : $color-background-page;
box-shadow : $size-margin-small $size-margin-small $size-margin-large $color-shadow;
@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;
}
display : flex;
flex-direction : column;
src/client/site/tutorial_page/tutorial_page.scss
+4 -2
View File
@@ -51,12 +51,14 @@
margin-top : -$size-margin-medium;
display : flex;
flex-wrap : wrap;
justify-content: space-between;
padding-right : -$size-margin-medium;
& > * {
flex : 1 1 100%;
margin-right : $size-margin-medium;
margin-top : $size-margin-medium;
max-width : calc(50% - 12px); // $size-margin-medium
width : calc(50% - 12px); // $size-margin-medium;
}
}
}