Fixing sidebar swipping and relatives items

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');
+            }
         }
     }
 }