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

@@ -3,7 +3,7 @@
  * used for previewing and reading existing content in Ghost.
  *
  * Table of Contents:
- * 
+ *
  * Manage
  * Preview
  *
@@ -29,9 +29,9 @@
         width: 35%;
         padding: 15px;
         position: absolute;
-        bottom:0; 
+        bottom:0;
         top:0;
-        left:0; 
+        left:0;
         border-right:$lightbrown 2px solid;
         background: #fff;
         box-shadow: $shadow;
@@ -115,13 +115,13 @@
                 position:relative;
 
                 a {
-                    
+
                     display:block;
                     padding:20px 15px;
                     color: $brown;
                     @include breakpoint($mobile) { padding:15px; }
                     @include breakpoint($tablet) { padding-right: 40px; }
-                    
+
                     @include icon-after($i-chevron) {
                         position:absolute;
                         top:50%;
@@ -142,7 +142,7 @@
 
                     border-bottom: lighten($midgrey, 40%) 1px solid;
                     background: lighten($midgrey, 45%);
-                    box-shadow: 
+                    box-shadow:
                         lighten($midgrey, 40%) 0 -1px 0, // top border
                         rgba(0,0,0,0.06) 7px 0 0 inset, // big left border
                         lighten($midgrey, 40%) 1px 0 0 inset; // small left border
@@ -178,8 +178,8 @@
         padding: 15px;
         position: absolute;
         bottom:0;
-        top:0; 
+        top:0;
-        right:0; 
+        right:0;
         border-left:$lightbrown 2px solid;
         background: #fff;
         box-shadow: $shadow;
@@ -188,6 +188,7 @@
             left: 100%;
             right: -100%;
             margin-left: 15px;
+            border:none;
         }
 
         .unfeatured {
@@ -218,7 +219,7 @@
             padding: 80px 40px;
             word-break: break-word;
             hyphens: auto;
-            
+
             .wrapper {
                 max-width: 700px;
                 margin:0 auto;
@@ -235,7 +236,7 @@
                 right:-10px;
             }
         }
-        
+
         .post-edit {
             @include icon($i-edit, 14px);
             margin-right:7px;

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

@@ -93,7 +93,7 @@
         overflow: auto;
         @include breakpoint($tablet) { right:0; };
 
-        // Create placeholder the same height as the floating header 
+        // Create placeholder the same height as the floating header
         // to push content down by the same amount
         &:before {
             display: block;
@@ -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
 
@@ -270,15 +287,15 @@
 
         .content {
             position: absolute;
-            top:0; 
+            top:0;
             right:0;
             left:0;
             bottom:0;
             padding:40px;
             overflow: auto;
             -webkit-overflow-scrolling: touch;
-            
+
-            // Create placeholder the same height as the floating header 
+            // Create placeholder the same height as the floating header
             // to push content down by the same amount
             &:before {
                 display: block;

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

@@ -43,7 +43,7 @@ form {
         font-weight: bold;
         color: $brown;
         text-align: right;
-        
+
         @include breakpoint(550px) {
             display: block;
             position: relative;
@@ -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

@@ -392,7 +392,7 @@ nav {
     padding:12px 15px;
     color: lighten($grey, 10%);
     @include box-sizing(border-box);
-    
+
     &:hover {text-decoration:none;}
 }
 
@@ -1162,12 +1162,29 @@ main {
     background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.90) 100%);
 
     button, .button {
-        display:inline-block;
+        display: inline-block;
         font-size: 10px;
         min-height: 20px;
         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>