Revamp sidebar translation

Use `transform: translate3d` as much as possible instead of `width` for better performance (really visibile on slow device like phone)

13 files changed, 206 insertions, 50 deletions

diff --git a/src/js/sidebar.js b/src/js/sidebar.js
index 7016678..1e5b621 100755
--- a/src/js/sidebar.js
+++ b/src/js/sidebar.js
@@ -1,4 +1,4 @@
-(function($) {
+(function ($) {
   'use strict';
 
   // Open and close the sidebar by swiping the sidebar and the blog and vice versa
@@ -7,7 +7,7 @@
    * Sidebar
    * @constructor
    */
-  var Sidebar = function() {
+  var Sidebar = function () {
     this.$sidebar = $('#sidebar');
     this.$openBtn = $('#btn-open-sidebar');
     // Elements where the user can click to close the sidebar
@@ -15,7 +15,13 @@
     // Elements affected by the swipe of the sidebar
     // The `pushed` class is added to each elements
     // Each element has a different behavior when the sidebar is opened
-    this.$blog = $('.post-bottom-bar, #header, #main, .post-header-cover');
+    this.$header = $('#header');
+    this.$headerElements = {
+      title: this.$header.find('.header-title'),
+      titleLink: this.$header.find('.header-title-link'),
+      rightPicture: this.$header.find('.header-right-picture')
+    };
+    this.$blog = $('.post-bottom-bar, #main, .post-header-cover, .post, #bottom-bar .post-action-share').add(this.$header).add(this.$headerElements.title).add(this.$headerElements.rightPicture);
     // If you change value of `mediumScreenWidth`,
     // you have to change value of `$screen-min: (md-min)` too
     // in `source/_css/utils/variables.scss`
@@ -28,22 +34,22 @@
      * Run Sidebar feature
      * @return {void}
      */
-    run: function() {
+    run: function () {
       var self = this;
       // Detect the click on the open button
-      this.$openBtn.click(function() {
+      this.$openBtn.click(function () {
         if (!self.$sidebar.hasClass('pushed')) {
           self.openSidebar();
         }
       });
       // Detect the click on close button
-      this.$closeBtn.click(function() {
+      this.$closeBtn.click(function () {
         if (self.$sidebar.hasClass('pushed')) {
           self.closeSidebar();
         }
       });
       // Detect resize of the windows
-      $(window).resize(function() {
+      $(window).resize(function () {
         // Check if the window is larger than the minimal medium screen value
         if ($(window).width() > self.mediumScreenWidth) {
           self.resetSidebarPosition();
@@ -59,7 +65,7 @@
      * Open the sidebar by swiping to the right the sidebar and the blog
      * @return {void}
      */
-    openSidebar: function() {
+    openSidebar: function () {
       this.swipeBlogToRight();
       this.swipeSidebarToRight();
     },
@@ -68,7 +74,7 @@
      * Close the sidebar by swiping to the left the sidebar and the blog
      * @return {void}
      */
-    closeSidebar: function() {
+    closeSidebar: function () {
       this.swipeSidebarToLeft();
       this.swipeBlogToLeft();
     },
@@ -77,7 +83,7 @@
      * Reset sidebar position
      * @return {void}
      */
-    resetSidebarPosition: function() {
+    resetSidebarPosition: function () {
       this.$sidebar.removeClass('pushed');
     },
 
@@ -85,7 +91,7 @@
      * Reset blog position
      * @return {void}
      */
-    resetBlogPosition: function() {
+    resetBlogPosition: function () {
       this.$blog.removeClass('pushed');
     },
 
@@ -93,7 +99,7 @@
      * Swipe the sidebar to the right
      * @return {void}
      */
-    swipeSidebarToRight: function() {
+    swipeSidebarToRight: function () {
       var self = this;
       // Check if the sidebar isn't swiped
       // and prevent multiple click on the open button with `.processing` class
@@ -102,7 +108,7 @@
         this.$sidebar.addClass('processing pushed');
         // add overflow on body to remove horizontal scroll
         this.$body.css('overflow-x', 'hidden');
-        setTimeout(function() {
+        setTimeout(function () {
           self.$sidebar.removeClass('processing');
         }, 250);
       }
@@ -112,14 +118,17 @@
      * Swipe the sidebar to the left
      * @return {void}
      */
-    swipeSidebarToLeft: function() {
+    swipeSidebarToLeft: function () {
+      var self = this;
       // Check if the sidebar is swiped
       // and prevent multiple click on the close button with `.processing` class
       if (this.$sidebar.hasClass('pushed') && !this.$sidebar.hasClass('processing')) {
         // Swipe the sidebar to the left
         this.$sidebar.addClass('processing').removeClass('pushed processing');
         // go back to the default overflow
-        this.$body.css('overflow-x', 'auto');
+        setTimeout(function () {
+          self.$body.css('overflow-x', 'auto');
+        }, 255);
       }
     },
 
@@ -127,16 +136,23 @@
      * Swipe the blog to the right
      * @return {void}
      */
-    swipeBlogToRight: function() {
-      var self = this;
+    swipeBlogToRight: function () {
+      var blog = this.$blog;
+
+      // Check if there is enough place for translating `#header .header-title` and `#header .right-picture`
+      // regarding the size of `#header .header-title-link`
+      if (this.$header.width() - this.$sidebar.width() - this.$headerElements.titleLink.width() < 130) {
+        blog = blog.not(this.$headerElements.title).not(this.$headerElements.rightPicture);
+      }
+
       // Check if the blog isn't swiped
       // and prevent multiple click on the open button with `.processing` class
-      if (!this.$blog.hasClass('pushed') && !this.$blog.hasClass('processing')) {
+      if (!blog.hasClass('pushed') && !blog.hasClass('processing')) {
         // Swipe the blog to the right
-        this.$blog.addClass('processing pushed');
+        blog.addClass('processing pushed');
 
-        setTimeout(function() {
-          self.$blog.removeClass('processing');
+        setTimeout(function () {
+          blog.removeClass('processing');
         }, 250);
       }
     },
@@ -145,7 +161,7 @@
      * Swipe the blog to the left
      * @return {void}
      */
-    swipeBlogToLeft: function() {
+    swipeBlogToLeft: function () {
       var self = this;
       // Check if the blog is swiped
       // and prevent multiple click on the close button with `.processing` class
@@ -153,14 +169,14 @@
         // Swipe the blog to the left
         self.$blog.addClass('processing').removeClass('pushed');
 
-        setTimeout(function() {
+        setTimeout(function () {
           self.$blog.removeClass('processing');
         }, 250);
       }
     }
   };
 
-  $(document).ready(function() {
+  $(document).ready(function () {
     var sidebar = new Sidebar();
     sidebar.run();
   });
diff --git a/src/scss/components/_figure.scss b/src/scss/components/_figure.scss
index 33ac0d9..77f998e 100755
--- a/src/scss/components/_figure.scss
+++ b/src/scss/components/_figure.scss
@@ -45,7 +45,10 @@
     &.figure--fullWidth {
         width: 100%;
         .figure-img {
+            width: 100%;
             margin: 0 auto;
+            transition: transform width .25s ease-in-out;
+            -webkit-transition: width .25s ease-in-out;
         }
     }
 }
@@ -57,4 +60,58 @@
             display: none;
         }
     }
-}
\ No newline at end of file
+}
+
+@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,
+        &[data-behavior="2"] .pushed .figure {
+            @include figure-pushed-lg;
+        }
+        // Display bottom bar in medium size and push it from the size of the medium sidebar
+        &[data-behavior="3"] .pushed .figure {
+            @include figure-pushed-md;
+        }
+        // Display bottom bar in large size and push it from the size of the large sidebar
+        &[data-behavior="4"] .pushed .figure,
+        &[data-behavior="5"] .pushed .figure {
+            @include figure-pushed-lg;
+        }
+        // Display bottom bar in large size and push it from the size of the medium sidebar
+        &[data-behavior="6"] {
+            @include figure-pushed-md;
+        }
+    }
+}
+
+@media #{$xlarge-and-up} {
+    .pushed .figure {
+        // 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;
+        }
+        // Display bottom bar in small size and push it from the size of the large sidebar
+        &[data-behavior="2"] .pushed .figure {
+            @include figure-pushed-lg;
+        }
+        // Display bottom bar in medium size and push it from the size of the medium sidebar
+        &[data-behavior="3"] .pushed .figure {
+            @include figure-pushed-md;
+        }
+        // Display bottom bar in large size and push it from the size of the extra large sidebar
+        &[data-behavior="4"] .pushed .figure {
+            @include figure-pushed-xlg;
+        }
+        // Display bottom bar in large size and push it from the size of the extra large sidebar
+        &[data-behavior="5"] .pushed .figure {
+            @include figure-pushed-lg;
+        }
+        // Display bottom bar in large size and push it from the size of the medium sidebar
+        &[data-behavior="6"] .pushed .figure {
+            @include figure-pushed-md;
+        }
+    }
+}
diff --git a/src/scss/components/_post-actions.scss b/src/scss/components/_post-actions.scss
index 599873b..a2899d7 100755
--- a/src/scss/components/_post-actions.scss
+++ b/src/scss/components/_post-actions.scss
@@ -41,6 +41,10 @@
         width:   65%;
         // On very small screen `.post-actions-nav` will be above `.post-actions-share`
         z-index: map-get($z-indexes, c-post-bottom-bar) + 1;
+        @include sidebar-slide-animation;
+        // Eliminate any flickering of elements while they are in a state of being animated
+        -webkit-backface-visibility: hidden;
+        -webkit-perspective:         1000;
 
         li.post-action {
             float: right;
@@ -86,4 +90,4 @@
     .post-actions-wrap {
         display: none;
     }
-}
\ No newline at end of file
+}
diff --git a/src/scss/components/_post-header-cover.scss b/src/scss/components/_post-header-cover.scss
index 2c330ad..ffb2d88 100755
--- a/src/scss/components/_post-header-cover.scss
+++ b/src/scss/components/_post-header-cover.scss
@@ -26,13 +26,8 @@
     // 100% minus header high, minus padding-top, minus padding bottom and minus 4px for perfect pixels
     height:                      100%;
     z-index:                     map-get($z-indexes, 'c-post-header-cover');
-    // Sidebar animation
-    // Transition style (push)
-    transition:                  transform .25s ease-in-out;
-    -webkit-transition:          -webkit-transform .25s ease-in-out;
-    // Eliminate any flickering of elements while they are in a state of being animated
-    -webkit-backface-visibility: hidden;
-    -webkit-perspective:         1000;
+    transition:                  transform .25s ease-in-out, width .25s ease-in-out;
+    -webkit-transition:          -webkit-transform .25s ease-in-out, width .25s ease-in-out;
 
     .post-header {
         display:        table-cell;
@@ -216,4 +211,4 @@
             @include post-header-cover-pushed-md;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/scss/components/_post.scss b/src/scss/components/_post.scss
index b0a34bb..92a377d 100755
--- a/src/scss/components/_post.scss
+++ b/src/scss/components/_post.scss
@@ -3,6 +3,7 @@
     width:          100%;
     display:        inline-block;
     vertical-align: top;
+    @include sidebar-slide-animation;
 
     .post-header {
         .post-title {
@@ -69,6 +70,22 @@
     }
 }
 
+@media #{$large-only} {
+    .post {
+        &.pushed {
+            @include prefix(transform, translate3d(-#{map-get($sidebar, lg-screen-width) / 2}, 0, 0), 'webkit' 'moz');
+        }
+    }
+}
+
+@media #{$xlarge-and-up} {
+    .post {
+        &.pushed {
+            @include prefix(transform, translate3d(-#{map-get($sidebar, xlg-screen-width) / 2}, 0, 0), 'webkit' 'moz');
+        }
+    }
+}
+
 // Increase font size of the post's title on large screen (only for single post view)
 @media #{$large-and-up} {
     .post {
@@ -85,4 +102,4 @@
     .post-content {
         font-size: 1.7rem;
     }
-}
\ No newline at end of file
+}
diff --git a/src/scss/layouts/_bottom-bar.scss b/src/scss/layouts/_bottom-bar.scss
index d765623..e428146 100755
--- a/src/scss/layouts/_bottom-bar.scss
+++ b/src/scss/layouts/_bottom-bar.scss
@@ -9,8 +9,11 @@
     border-top:         1px solid #eef2f8;
     padding:            0 15px;
     z-index:            map-get($z-indexes, c-post-bottom-bar);
-    transition:         transform .25s ease-in-out;
-    -webkit-transition: -webkit-transform .25s ease-in-out;
+    transition: transform .25s ease-in-out, width .25s ease-in-out;
+    -webkit-transition: -webkit-transform .25s ease-in-out, width .25s ease-in-out;
+    // Eliminate any flickering of elements while they are in a state of being animated
+    -webkit-backface-visibility: hidden;
+    -webkit-perspective:         1000;
 }
 
 @media #{$small-and-down} {
diff --git a/src/scss/layouts/_header.scss b/src/scss/layouts/_header.scss
index 6008759..04a4553 100755
--- a/src/scss/layouts/_header.scss
+++ b/src/scss/layouts/_header.scss
@@ -10,10 +10,7 @@
     // used to animate the header on small screen with javascript
     //@include prefix(transition, top 0.25s ease-in-out, 'webkit' 'moz' 'ms' 'o');
     z-index:                     map-get($z-indexes, l-header);
-    // Sidebar animation
-    // Transition style (push)
-    transition:                  transform .25s ease-in-out;
-    -webkit-transition:          -webkit-transform .25s ease-in-out;
+    @include sidebar-slide-animation;
     // Eliminate any flickering of elements while they are in a state of being animated
     -webkit-backface-visibility: hidden;
     -webkit-perspective:         1000;
@@ -34,6 +31,7 @@
         width:    30px;
         height:   30px;
         color:    map-get($header, color);
+        @include sidebar-slide-animation;
 
         .header-picture {
             display:       block;
@@ -54,6 +52,7 @@
         font-size:   $font-size-base;
         line-height: 55px;
         margin:      0;
+        @include sidebar-slide-animation;
 
         .header-title-link {
             color:       map-get($header, color);
diff --git a/src/scss/tranquilpeak.scss b/src/scss/tranquilpeak.scss
index 33bef81..f83e1bd 100755
--- a/src/scss/tranquilpeak.scss
+++ b/src/scss/tranquilpeak.scss
@@ -6,6 +6,7 @@
     'utils/mixins/bottom-bar',
     'utils/mixins/button',
     'utils/mixins/category',
+    'utils/mixins/figure',
     'utils/mixins/form',
     'utils/mixins/header',
     'utils/mixins/main',
@@ -20,14 +21,15 @@
     'base/base',
     'base/custom';
 
-@import 'layouts/about',
-'layouts/blog',
-'layouts/bottom-bar',
-'layouts/cover',
-'layouts/footer',
-'layouts/header',
-'layouts/main',
-'layouts/sidebar';
+@import
+    'layouts/about',
+    'layouts/blog',
+    'layouts/bottom-bar',
+    'layouts/cover',
+    'layouts/footer',
+    'layouts/header',
+    'layouts/main',
+    'layouts/sidebar';
 
 @import
     'components/alert',
@@ -64,4 +66,4 @@
 
 @import
     'themes/hljs-tranquilpeak',
-    'themes/hljs-custom';
\ No newline at end of file
+    'themes/hljs-custom';
diff --git a/src/scss/utils/mixins/_bottom-bar.scss b/src/scss/utils/mixins/_bottom-bar.scss
index 4552f3b..0f207ca 100755
--- a/src/scss/utils/mixins/_bottom-bar.scss
+++ b/src/scss/utils/mixins/_bottom-bar.scss
@@ -29,6 +29,7 @@
 @mixin bottom-bar-pushed-md {
     &.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);
     }
 }
 
@@ -36,11 +37,13 @@
 @mixin bottom-bar-pushed-lg {
     &.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);
     }
 }
 /// Mixin helper to pushed bottom bar from extra large sidebar size
 @mixin bottom-bar-pushed-xlg {
     &.pushed {
         @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz');
+        width: calc(100% - #{map-get($sidebar, xlg-screen-width)} - 15px * 2);
     }
 }
diff --git a/src/scss/utils/mixins/_figure.scss b/src/scss/utils/mixins/_figure.scss
new file mode 100644
index 0000000..71c720a
--- /dev/null
+++ b/src/scss/utils/mixins/_figure.scss
@@ -0,0 +1,17 @@
+@mixin figure-pushed-md {
+    &.figure--fullWidth img.figure-img {
+        width: calc(100% - #{map-get($sidebar, md-screen-width)});
+    }
+}
+
+@mixin figure-pushed-lg {
+    &.figure--fullWidth img.figure-img {
+        width: calc(100% - #{map-get($sidebar, lg-screen-width)});
+    }
+}
+
+@mixin figure-pushed-xlg {
+    &.figure--fullWidth img.figure-img {
+        width: calc(100% - #{map-get($sidebar, xlg-screen-width)});
+    }
+}
diff --git a/src/scss/utils/mixins/_header.scss b/src/scss/utils/mixins/_header.scss
index 4b0cd2f..03664e9 100755
--- a/src/scss/utils/mixins/_header.scss
+++ b/src/scss/utils/mixins/_header.scss
@@ -3,6 +3,18 @@
     &.pushed {
         @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz');
     }
+    @media #{$medium-and-up} {
+        .header-title {
+            &.pushed {
+                @include prefix(transform, translate3d(-#{(map-get($sidebar, md-screen-width) / 2) - 1}, 0, 0), 'webkit' 'moz');
+            }
+        }
+        .header-right-picture {
+            &.pushed {
+                @include prefix(transform, translate3d(-#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz');
+            }
+        }
+    }
 }
 
 /// Mixin helper to push header from large sidebar size
@@ -10,10 +22,32 @@
     &.pushed {
         @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz');
     }
+    @media #{$small-and-up} {
+        .header-title {
+            &.pushed {
+                @include prefix(transform, translate3d(-#{(map-get($sidebar, lg-screen-width) / 2) - 1}, 0, 0), 'webkit' 'moz');
+            }
+        }
+        .header-right-picture {
+            &.pushed {
+                @include prefix(transform, translate3d(-#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz');
+            }
+        }
+    }
 }
 /// Mixin helper to push header from extra large sidebar size
 @mixin header-pushed-xlg {
     &.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');
+        }
+    }
+    .header-right-picture {
+        &.pushed {
+            @include prefix(transform, translate3d(-#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz');
+        }
+    }
 }
diff --git a/src/scss/utils/mixins/_post-header-cover.scss b/src/scss/utils/mixins/_post-header-cover.scss
index b2af42d..0f1fd05 100755
--- a/src/scss/utils/mixins/_post-header-cover.scss
+++ b/src/scss/utils/mixins/_post-header-cover.scss
@@ -29,6 +29,7 @@
 @mixin post-header-cover-pushed-md {
     &.pushed {
         @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz');
+        width: calc(100% - #{map-get($sidebar, md-screen-width)});
     }
 }
 
@@ -36,6 +37,7 @@
 @mixin post-header-cover-pushed-lg {
     &.pushed {
         @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz');
+        width: calc(100% - #{map-get($sidebar, lg-screen-width)});
     }
 }
 
@@ -43,5 +45,6 @@
 @mixin post-header-cover-pushed-xlg {
     &.pushed {
         @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz');
+        width: calc(100% - #{map-get($sidebar, xlg-screen-width)});
     }
 }
diff --git a/src/scss/utils/mixins/_sidebar.scss b/src/scss/utils/mixins/_sidebar.scss
index d5ca2ec..f4b9b65 100755
--- a/src/scss/utils/mixins/_sidebar.scss
+++ b/src/scss/utils/mixins/_sidebar.scss
@@ -1,3 +1,9 @@
+// Mixin helper to animate sidebar transition (slide)
+@mixin sidebar-slide-animation {
+    transition:                  transform .25s ease-in-out;
+    -webkit-transition:          -webkit-transform .25s ease-in-out;
+}
+
 /// Mixin helper to display the sidebar in medium size
 @mixin sidebar-md {
     width: map-get($sidebar, md-screen-width);