Add back button to settings and content preview

Issue #149
- added back button to content preview and settings
- added hammer.js interactions
- needs some tweaking for mobile view
- problems with touch events (additional click event after 300ms)

core/client/assets/sass/layouts/manage.scss

@@ -188,6 +188,7 @@
             left: 100%;
             right: -100%;
             margin-left: 15px;
+            border:none;
         }
 
         .unfeatured {

core/client/assets/sass/layouts/settings.scss

@@ -219,6 +219,7 @@
             background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.90) 100%);
 
             @include breakpoint($netbook) { padding-left:15px; }
+            @include breakpoint($tablet) { padding-left:115px; }
             @include breakpoint($letterbox) {
                 height: auto;
                 padding: 5px;
@@ -230,6 +231,22 @@
 
                 .title { display:none; }
             }
+            @include breakpoint(650px) {
+                padding-left:15px;
+
+                .button-back {
+                    position: fixed;
+                    top: 5px;
+                    left: 14px;
+                    min-height: 0;
+                    height: 30px;
+
+                    &:before {
+                        left: -9px;
+                        border-width: 15px 9px 15px 0;
+                    }
+                }
+            }
 
         }//header
 

core/client/assets/sass/modules/forms.scss

@@ -259,6 +259,49 @@ input[type="reset"] {
     }
 }
 
+// Back button for pane animations
+.button-back {
+    @extend %button;
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    margin-right: 30px;
+    padding: 0.5em 1.37em 0.5em 1.10em;
+    display: none;
+    color: #fff;
+    background: $blue;
+    border: none;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+
+    &:before {
+        content: ' ';
+        position: absolute;
+        top: 0;
+        left: -10px;
+        width: 0;
+        height: 0;
+        border-width: 18px 10px 18px 0;
+        border-color: transparent $blue transparent transparent;
+        border-style: solid solid solid none;
+        @include transform(scale(0.9999));
+        @include transition(border-color 0.3s ease);
+    }
+
+    &:hover {
+        color: #fff;
+        background: darken($blue, 10%);
+        border-color: darken($blue, 10%);
+        &:before {
+            border-right-color: darken($blue, 10%);
+        }
+    }
+
+    @include breakpoint($tablet) {
+        display: inline-block;
+    }
+}
+
 
 /* =============================================================================
    Split Buttons

core/client/assets/sass/modules/global.scss

@@ -1168,6 +1168,23 @@ main {
         height: 20px;
         padding: 3px 4px;
         vertical-align: top;
+
+        &.button-back {
+            position: relative;
+            top: -2px;
+            left: 3px;
+            display: none;
+            padding: 0 6px 0 3px;
+
+            &:before {
+                left: -8px;
+                border-width: 10px 8px 10px 0;
+            }
+
+            @include breakpoint($tablet) {
+                display: inline-block;
+            }
+        }
     }
 
     a {

core/client/mobile-interactions.js

@@ -22,6 +22,16 @@
         }
     });
 
+    // ### Hide content preview
+    Hammer.on("tap", ".manage .content-preview .button-back", function (event) {
+        if (window.matchMedia('(max-width: 800px)').matches) {
+            event.gesture.preventDefault();
+            event.stopPropagation();
+            $(".content-list").animate({right: "0", left: "0", 'margin-right': "0"}, 300);
+            $(".content-preview").animate({right: "-100%", left: "100%", 'margin-left': "15px"}, 300);
+        }
+    });
+
     // ### Show settings options page when swiping left on settings menu link
     Hammer.on("tap", ".settings .settings-menu li", function (event) {
         if (window.matchMedia('(max-width: 800px)').matches) {
@@ -29,13 +39,25 @@
             event.stopPropagation();
             $(".settings-sidebar").animate({right: "100%", left: "-102%", 'margin-right': "15px"}, 300);
             $(".settings-content").animate({right: "0", left: "0", 'margin-left': "0"}, 300);
+            $(".settings-content .button-back, .settings-content .button-save").css("display", "inline-block");
+        }
+    });
+
+    // ### Hide settings options page
+    Hammer.on("tap", ".settings .settings-content .button-back", function (event) {
+        if (window.matchMedia('(max-width: 800px)').matches) {
+            event.gesture.preventDefault();
+            event.stopPropagation();
+            $(".settings-sidebar").animate({right: "0", left: "0", 'margin-right': "0"}, 300);
+            $(".settings-content").animate({right: "-100%", left: "100%", 'margin-left': "15"}, 300);
+            $(".settings-content .button-back, .settings-content .button-save").css("display", "none");
         }
     });
 
     // ### Toggle the sidebar menu
-    $('[data-off-canvas]').on('click', function (e) {
+    $('[data-off-canvas]').on('click', function (event) {
         if (window.matchMedia('(max-width: 650px)').matches) {
-            e.preventDefault();
+            event.preventDefault();
             $('body').toggleClass('off-canvas');
         }
     });

core/client/tpl/preview.hbs

@@ -1,4 +1,5 @@
 <header class="floatingheader">
+    <button class="button-back" href="#">Back</button>
     <a class="{{#if featured}}featured{{else}}unfeatured{{/if}}" href="#">
         <span class="hidden">Star</span>
     </a>

core/client/tpl/settings/general.hbs

@@ -1,4 +1,5 @@
 <header>
+    <button class="button-back">Cancel</button>
     <h2 class="title">General</h2>
     <section class="page-actions">
         <button class="button-save">Save</button>

core/client/tpl/settings/user-profile.hbs

@@ -1,4 +1,5 @@
 <header>
+    <button class="button-back">Cancel</button>
     <h2 class="title">Your Profile</h2>
     <section class="page-actions">
         <button class="button-save">Save</button>