From e7cd3f0549e4fc03767ef2b19457eb51edd7c031 Mon Sep 17 00:00:00 2001 From: Andrew Miner Date: Sat, 30 Apr 2016 11:31:49 -0700 Subject: [PATCH] Complete mobile reactiveness in CSS layer --- src/client/site/browse_page/browse_page.scss | 13 +--- .../site/browse_page/mod_tile/mod_tile.scss | 2 + .../markdown_section/markdown_section.scss | 12 ++++ src/client/site/header/header.scss | 72 ++++++++++++++++++- src/client/site/item_page/item_page.jade | 2 +- src/client/site/item_page/item_page.scss | 49 ++++++++++++- .../multiblock/multiblock.scss | 2 +- .../multiblock_viewer/multiblock_viewer.scss | 17 +++++ .../recipe_detail/recipe_detail.scss | 46 +++++++++++- src/client/site/mod_page/mod_page.scss | 1 + 10 files changed, 199 insertions(+), 17 deletions(-) diff --git a/src/client/site/browse_page/browse_page.scss b/src/client/site/browse_page/browse_page.scss index ed0c825a4..3d7b8a482 100644 --- a/src/client/site/browse_page/browse_page.scss +++ b/src/client/site/browse_page/browse_page.scss @@ -33,18 +33,7 @@ .view__mod_tile { flex: 0 0 auto; margin-right: 0; - } - } - } - } -} - -@include screen-size(mobile) { - .view__browse_page { - .right { - .tile_container { - .view__mod_tile { - flex: 1 1 50%; + width: 100%; } } } diff --git a/src/client/site/browse_page/mod_tile/mod_tile.scss b/src/client/site/browse_page/mod_tile/mod_tile.scss index 66e79c494..76001144e 100644 --- a/src/client/site/browse_page/mod_tile/mod_tile.scss +++ b/src/client/site/browse_page/mod_tile/mod_tile.scss @@ -14,6 +14,8 @@ a { @include floating-panel; + width : 100%; + border : $size-border-medium solid $color-background-panel; color : $color-text; text-decoration : none; diff --git a/src/client/site/common/markdown_section/markdown_section.scss b/src/client/site/common/markdown_section/markdown_section.scss index b7ed70385..45417f014 100644 --- a/src/client/site/common/markdown_section/markdown_section.scss +++ b/src/client/site/common/markdown_section/markdown_section.scss @@ -128,3 +128,15 @@ } } } + +@include screen-size(mobile) { + .view__markdown_section { + .creating { + padding-bottom: $size-margin-xlarge; + } + + .footer { + display: none; + } + } +} diff --git a/src/client/site/header/header.scss b/src/client/site/header/header.scss index 26bdce2cf..9ed944f71 100644 --- a/src/client/site/header/header.scss +++ b/src/client/site/header/header.scss @@ -102,7 +102,9 @@ font-family: $font-family-control; font-size: $font-size-medium; - padding: $size-margin-small $size-margin-medium; + padding-left: $size-margin-medium + $size-margin-large; + line-height: $font-size-medium + 2 * $size-margin-small; + text-indent: -$size-margin-large; &:before { content: "⟩"; @@ -118,3 +120,71 @@ } } } + +@include screen-size(desktop) { + .view__header { + .top-row { + a { + img { + top : -$size-minecraft-block * 0.5; + left : -$size-minecraft-block * 0.5; + height : $size-minecraft-block * 2.0; + width : $size-minecraft-block * 2.0; + } + } + } + } +} + +@include screen-size(tablet) { + .view__header { + .top-row { + h1 { + font-size : $font-size-xlarge; + } + } + } +} + +@include screen-size(mobile) { + .view__header { + .top-row { + display : none; + + a { + img { + } + } + + h1 { + } + + .addthis_sharing_toolbox { + display: none; + + &.placeholder { + &:before { + } + } + } + } + + .divider { + .button { + &:last-child { + } + } + } + + .breadcrumbs { + &:before { + } + + a { + } + + span { + } + } + } +} diff --git a/src/client/site/item_page/item_page.jade b/src/client/site/item_page/item_page.jade index 24f3a781a..bc0f795ad 100644 --- a/src/client/site/item_page/item_page.jade +++ b/src/client/site/item_page/item_page.jade @@ -17,7 +17,7 @@ .title a.sourceMod .button-row - .button.craftingPlan: .bezel: p View Crafting Plan + .button.craftingPlan: .bezel: p View Crafting Plan .right p Official Link: a.officialLink project page diff --git a/src/client/site/item_page/item_page.scss b/src/client/site/item_page/item_page.scss index c4be18483..cfe18adcc 100644 --- a/src/client/site/item_page/item_page.scss +++ b/src/client/site/item_page/item_page.scss @@ -48,7 +48,7 @@ .button { flex: 1 1 100%; - max-width: 66%; + max-width: $size-minecraft-block * 10; } } } @@ -58,3 +58,50 @@ } } } + +@include screen-size(mobile) { + .view__item_page { + .about { + flex-direction: column; + + & > .left { + margin: 0 $size-margin-medium; + + display: flex; + flex-direction: column; + align-items: center; + + img { + } + } + + & > .center { + flex: 0 0 auto; + margin: 0 $size-margin-medium; + + .sourceMod, .title { + text-align: center; + } + + a.sourceMod { + } + + .button-row { + flex: 0 0 auto; + margin: $size-margin-large 0; + + .button { + max-width: $size-minecraft-block * 8; + .full { + display: none; + } + } + } + } + + & > .right { + margin: 0 $size-margin-medium; + } + } + } +} diff --git a/src/client/site/item_page/multiblock_viewer/multiblock/multiblock.scss b/src/client/site/item_page/multiblock_viewer/multiblock/multiblock.scss index 8e0920c11..08a1a5f2f 100644 --- a/src/client/site/item_page/multiblock_viewer/multiblock/multiblock.scss +++ b/src/client/site/item_page/multiblock_viewer/multiblock/multiblock.scss @@ -21,4 +21,4 @@ $animate-fast: 100ms; opacity: 0.0; transition: opacity $animate-fast; } -} +} \ No newline at end of file diff --git a/src/client/site/item_page/multiblock_viewer/multiblock_viewer.scss b/src/client/site/item_page/multiblock_viewer/multiblock_viewer.scss index 911c8d2b9..7dc65466e 100644 --- a/src/client/site/item_page/multiblock_viewer/multiblock_viewer.scss +++ b/src/client/site/item_page/multiblock_viewer/multiblock_viewer.scss @@ -75,3 +75,20 @@ } } } + +@include screen-size(mobile) { + .view__multiblock_viewer { + flex-direction: column-reverse; + + .left { + flex: 0 0 auto; + + border: 0; + } + + .right { + flex: 0 0 auto; + margin-bottom: $size-margin-large; + } + } +} diff --git a/src/client/site/item_page/recipe_detail/recipe_detail.scss b/src/client/site/item_page/recipe_detail/recipe_detail.scss index 17551d531..127d38c92 100644 --- a/src/client/site/item_page/recipe_detail/recipe_detail.scss +++ b/src/client/site/item_page/recipe_detail/recipe_detail.scss @@ -8,7 +8,7 @@ .view__recipe_detail { display : flex; - .input, .output{ + .input, .output { flex : 0 1 33%; h3 { @@ -20,8 +20,13 @@ } } + .input { + order: 10; + } + .pattern { flex : 0 1 33%; + order: 20; display : flex; flex-direction : column; @@ -36,9 +41,48 @@ } } + .output { + order: 30; + } + &:not(:first-child) { border-top : 1px solid $color-gray-light; margin-top : $size-margin-medium; padding-top : $size-margin-large; } } + +@include screen-size(mobile) { + .view__recipe_detail { + flex-direction: column; + + > :not(:last-child) { + margin-bottom: $size-margin-large; + } + + .input, .output { + flex: 0 0 auto; + + + h3 { + } + + .view__inventory { + } + } + + .input { + order: 21; + } + + .pattern { + flex: 0 0 auto; + + .tool { + } + } + + &:not(:first-child) { + } + } +} diff --git a/src/client/site/mod_page/mod_page.scss b/src/client/site/mod_page/mod_page.scss index 2f22aa07f..0f059d5ab 100644 --- a/src/client/site/mod_page/mod_page.scss +++ b/src/client/site/mod_page/mod_page.scss @@ -150,6 +150,7 @@ } .center { + flex: 0 0 auto; margin-bottom: $size-margin-xlarge; margin-left: $size-margin-medium; margin-right: $size-margin-medium;