From 88f14dcdc9981767dbee056b6b2e020ae4b845ad Mon Sep 17 00:00:00 2001 From: Thibaud Lepretre Date: Fri, 30 Aug 2019 19:27:39 +0200 Subject: Fixing sidebar swipping and relatives items --- src/scss/components/_code.scss | 6 ++--- src/scss/components/_figure.scss | 8 +++---- src/scss/components/_post.scss | 44 ++++++++++++++++++++++++++++++---- src/scss/utils/mixins/_bottom-bar.scss | 22 +++++++++++++++++ src/scss/utils/mixins/_figure.scss | 2 +- src/scss/utils/mixins/_header.scss | 20 +++++++++------- 6 files changed, 80 insertions(+), 22 deletions(-) diff --git a/src/scss/components/_code.scss b/src/scss/components/_code.scss index 9a2c2e5..74c7d3e 100755 --- a/src/scss/components/_code.scss +++ b/src/scss/components/_code.scss @@ -66,9 +66,9 @@ figure.highlight, pre { line-height: map-get($highlight, line-height); font-size: map-get($highlight, font-size); - max-width: calc(#{map-get($main-content, 'max-width')} - 50px); - overflow-x: auto; - overflow-y: hidden; + max-width: calc(#{map-get($main-content, 'max-width')} - 50px); + overflow-x: auto; + overflow-y: hidden; } } // All lines in gutter and code container diff --git a/src/scss/components/_figure.scss b/src/scss/components/_figure.scss index 77f998e..116785e 100755 --- a/src/scss/components/_figure.scss +++ b/src/scss/components/_figure.scss @@ -47,7 +47,7 @@ .figure-img { width: 100%; margin: 0 auto; - transition: transform width .25s ease-in-out; + transition: width .25s ease-in-out; -webkit-transition: width .25s ease-in-out; } } @@ -63,8 +63,6 @@ } @media #{$large-only} { - // main[data-behavior="x"] .post.pushed .figure.figure--fullWidth - #main { // Display bottom bar in small size and push it from the size of the large sidebar &[data-behavior="1"] .pushed .figure, @@ -81,14 +79,14 @@ @include figure-pushed-lg; } // Display bottom bar in large size and push it from the size of the medium sidebar - &[data-behavior="6"] { + &[data-behavior="6"] .pushed .figure { @include figure-pushed-md; } } } @media #{$xlarge-and-up} { - .pushed .figure { + #main { // Display bottom bar in extra small size and push it from the size of the extra large sidebar &[data-behavior="1"] .pushed .figure { @include figure-pushed-xlg; diff --git a/src/scss/components/_post.scss b/src/scss/components/_post.scss index 92a377d..6b25cf0 100755 --- a/src/scss/components/_post.scss +++ b/src/scss/components/_post.scss @@ -71,18 +71,54 @@ } @media #{$large-only} { - .post { - &.pushed { + #main { + // Display bottom bar in small size and push it from the size of the large sidebar + &[data-behavior="1"] .post.pushed, + &[data-behavior="2"] .post.pushed { + @include prefix(transform, translate3d(-#{map-get($sidebar, lg-screen-width) / 2}, 0, 0), 'webkit' 'moz'); + } + // Display bottom bar in medium size and push it from the size of the medium sidebar + &[data-behavior="3"] .post.pushed { + @include prefix(transform, translate3d(-#{map-get($sidebar, md-screen-width) / 2}, 0, 0), 'webkit' 'moz'); + } + // Display bottom bar in large size and push it from the size of the large sidebar + &[data-behavior="4"] .post.pushed, + &[data-behavior="5"] .post.pushed { @include prefix(transform, translate3d(-#{map-get($sidebar, lg-screen-width) / 2}, 0, 0), 'webkit' 'moz'); } + // Display bottom bar in large size and push it from the size of the medium sidebar + &[data-behavior="6"] .post.pushed { + @include prefix(transform, translate3d(-#{map-get($sidebar, md-screen-width) / 2}, 0, 0), 'webkit' 'moz'); + } } } @media #{$xlarge-and-up} { - .post { - &.pushed { + #main { + // Display bottom bar in extra small size and push it from the size of the extra large sidebar + &[data-behavior="1"] .post.pushed { + @include prefix(transform, translate3d(-#{map-get($sidebar, xlg-screen-width) / 2}, 0, 0), 'webkit' 'moz'); + } + // Display bottom bar in small size and push it from the size of the large sidebar + &[data-behavior="2"] .post.pushed { + @include prefix(transform, translate3d(-#{map-get($sidebar, lg-screen-width) / 2}, 0, 0), 'webkit' 'moz'); + } + // Display bottom bar in medium size and push it from the size of the medium sidebar + &[data-behavior="3"] .post.pushed { + @include prefix(transform, translate3d(-#{map-get($sidebar, md-screen-width) / 2}, 0, 0), 'webkit' 'moz'); + } + // Display bottom bar in large size and push it from the size of the extra large sidebar + &[data-behavior="4"] .post.pushed { @include prefix(transform, translate3d(-#{map-get($sidebar, xlg-screen-width) / 2}, 0, 0), 'webkit' 'moz'); } + // Display bottom bar in large size and push it from the size of the extra large sidebar + &[data-behavior="5"] .post.pushed { + @include prefix(transform, translate3d(-#{map-get($sidebar, lg-screen-width) / 2}, 0, 0), 'webkit' 'moz'); + } + // Display bottom bar in large size and push it from the size of the medium sidebar + &[data-behavior="6"] .post.pushed { + @include prefix(transform, translate3d(-#{map-get($sidebar, md-screen-width) / 2}, 0, 0), 'webkit' 'moz'); + } } } diff --git a/src/scss/utils/mixins/_bottom-bar.scss b/src/scss/utils/mixins/_bottom-bar.scss index 0f207ca..103257a 100755 --- a/src/scss/utils/mixins/_bottom-bar.scss +++ b/src/scss/utils/mixins/_bottom-bar.scss @@ -30,6 +30,17 @@ &.pushed { @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz'); width: calc(100% - #{map-get($sidebar, md-screen-width)} - 15px * 2); + + .post-actions-wrap { + ul.post-action-nav { + // Best width for responsive post's navigation panel on very small screen + width: 35%; + } + ul.post-action-share { + // Best width for responsive post's share panel on very small screen + width: 65%; + } + } } } @@ -38,6 +49,17 @@ &.pushed { @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz'); width: calc(100% - #{map-get($sidebar, lg-screen-width)} - 15px * 2); + + .post-actions-wrap { + ul.post-action-nav { + // Best width for responsive post's navigation panel on very small screen + width: 35%; + } + ul.post-action-share { + // Best width for responsive post's share panel on very small screen + width: 65%; + } + } } } /// Mixin helper to pushed bottom bar from extra large sidebar size diff --git a/src/scss/utils/mixins/_figure.scss b/src/scss/utils/mixins/_figure.scss index 71c720a..a043558 100644 --- a/src/scss/utils/mixins/_figure.scss +++ b/src/scss/utils/mixins/_figure.scss @@ -1,6 +1,6 @@ @mixin figure-pushed-md { &.figure--fullWidth img.figure-img { - width: calc(100% - #{map-get($sidebar, md-screen-width)}); + width: calc(100% - #{map-get($sidebar, md-screen-width)} + 1px); } } diff --git a/src/scss/utils/mixins/_header.scss b/src/scss/utils/mixins/_header.scss index 03664e9..81e3eaf 100755 --- a/src/scss/utils/mixins/_header.scss +++ b/src/scss/utils/mixins/_header.scss @@ -3,7 +3,7 @@ &.pushed { @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz'); } - @media #{$medium-and-up} { + @media #{$small-and-up} { .header-title { &.pushed { @include prefix(transform, translate3d(-#{(map-get($sidebar, md-screen-width) / 2) - 1}, 0, 0), 'webkit' 'moz'); @@ -22,7 +22,7 @@ &.pushed { @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz'); } - @media #{$small-and-up} { + @media #{$medium-and-up} { .header-title { &.pushed { @include prefix(transform, translate3d(-#{(map-get($sidebar, lg-screen-width) / 2) - 1}, 0, 0), 'webkit' 'moz'); @@ -40,14 +40,16 @@ &.pushed { @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz'); } - .header-title { - &.pushed { - @include prefix(transform, translate3d(-#{(map-get($sidebar, xlg-screen-width) / 2) - 1}, 0, 0), 'webkit' 'moz'); + @media #{$xlarge-and-up} { + .header-title { + &.pushed { + @include prefix(transform, translate3d(-#{(map-get($sidebar, xlg-screen-width) / 2) - 1}, 0, 0), 'webkit' 'moz'); + } } - } - .header-right-picture { - &.pushed { - @include prefix(transform, translate3d(-#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz'); + .header-right-picture { + &.pushed { + @include prefix(transform, translate3d(-#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz'); + } } } } -- cgit v1.2.3