Improved mobile interactions

This is simply a commit which improves the mobile interactions. This does not fix UI problems on mobiles.

New interactions;

Menu
* Swipe right on header to show sidebar
* Swipe left on sidebar to hide

Content
* Tap / Swipe left on item to show preview
* Swipe right to show content list

Settings
* Tap / Swipe left on link to show settings
* Swipe right on settings to show links

core/client/assets/lib/jquery-utils.js

@@ -5,7 +5,7 @@
 (function () {
     "use strict";
 
-    // UTILS
+    // ## UTILS
 
     /**
      * Allows to check contents of each element exactly
@@ -80,7 +80,9 @@
         return this;
     };
 
-    $('.overlay').hideAway(); // TODO: Move to a more sensible global file.
+    // ## GLOBALS
+
+    $('.overlay').hideAway();
 
     /**
      * Adds appropriate inflection for pluralizing the singular form of a word when appropriate.

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

@@ -44,6 +44,10 @@
   background-color:#fff;
   box-shadow: $shadow;
 
+  @include breakpoint($mobile) {
+      width: 100%;
+  }
+
   .widget-content {
     @include box-sizing(border-box);
     margin-bottom: 40px;

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

@@ -19,6 +19,10 @@
         position: relative;
         height: 100%;
         width: 100%;
+
+        @include breakpoint($tablet) {
+            overflow-x: hidden;
+        }
     }
     .content-list {
         @include box-sizing(border-box);
@@ -32,9 +36,6 @@
         background: #fff;
         box-shadow: $shadow;
 
-        @include breakpoint(900px) {
-            width:300px;
-        }
         @include breakpoint($tablet) {
             width:auto;
             right:0;
@@ -182,9 +183,11 @@
         border-left:$lightbrown 2px solid;
         background: #fff;
         box-shadow: $shadow;
-        @include breakpoint(900px) {
+        @include breakpoint($tablet) {
             width: auto;
-            left: 300px;
+            left: 100%;
+            right: -100%;
+            margin-left: 15px;
         }
 
         .unfeatured {

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

@@ -23,6 +23,10 @@
         height: 100%;
         margin:0;
         padding:0;
+
+        @include breakpoint($tablet) {
+            overflow-x: hidden;
+        }
     }
 
     .title {
@@ -48,6 +52,7 @@
         left:0;
         bottom:0;
         z-index: 700;
+        background: #FFFFFF;
         box-shadow: $lightbrown 1px 0 0;
         @include breakpoint($tablet) {
             width:100%;
@@ -157,7 +162,15 @@
         right:0;
         left:20%;
         bottom:0;
-        @include breakpoint($tablet) { display: none; }
+        background: #FFFFFF;
+
+        @include breakpoint($tablet) {
+            display: none;
+            width: 100%;
+            left: 100%;
+            right: -100%;
+            margin-left: 15px;
+        }
 
         display: none;
         &.active {display:block;}

core/client/mobile-interactions.js

@@ -0,0 +1,82 @@
+// # Ghost Mobile Interactions
+
+/*global window, document, $ */
+
+(function () {
+    "use strict";
+
+    // ## Touch Gestures
+
+    // Initiate Hammer.js
+    // `touchAction: true` Potentially fix problems in IE10 [Ref](https://github.com/EightMedia/hammer.js/wiki/Tips-&-Tricks)
+    // `drag: false` Removes the Hammer drag event listeners, as they were clashing with jQueryUI Draggable
+    var Hammer = $(document).hammer({stop_browser_behavior: { touchAction: true }, drag: false});
+
+    // ### Show left menu sidebar on right swipe
+    Hammer.on("swiperight", "#global-header", function (event) {
+        if (window.matchMedia('(max-width: 650px)').matches) {
+            event.gesture.preventDefault();
+            event.stopPropagation();
+            $('body').addClass('off-canvas');
+        }
+    });
+
+    // ### Hide left menu sidebar on swipe left
+    Hammer.on("swipeleft", "#main-menu", function (event) {
+        if (window.matchMedia('(max-width: 650px)').matches) {
+            event.gesture.preventDefault();
+            event.stopPropagation();
+            $('body').removeClass('off-canvas');
+        }
+    });
+
+    // ### Show content preview when swiping left on content list
+    Hammer.on("tap swipeleft", ".manage .content-list ol li", function (event) {
+        if (window.matchMedia('(max-width: 800px)').matches) {
+            event.gesture.preventDefault();
+            event.stopPropagation();
+            $(".content-list").animate({right: "100%", left: "-100%", 'margin-right': "15px"}, 300);
+            $(".content-preview").animate({right: "0", left: "0", 'margin-left': "0"}, 300);
+        }
+    });
+
+    // ### Show content list when swiping right on preview
+    Hammer.on("swiperight", ".content-preview", 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 swipeleft", ".settings .settings-menu li", function (event) {
+        if (window.matchMedia('(max-width: 800px)').matches) {
+            event.gesture.preventDefault();
+            event.stopPropagation();
+            $(".settings-sidebar").animate({right: "100%", left: "-102%", 'margin-right': "15px"}, 300);
+            $(".settings-content").animate({right: "0", left: "0", 'margin-left': "0"}, 300);
+        }
+    });
+
+    // ### Show settings menu when swiping right on settings options page
+    Hammer.on("swiperight", ".settings-content", 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': "15px"}, 300);
+        }
+    });
+
+    // ### Toggle the sidebar menu
+    $('[data-off-canvas]').on('click', function (e) {
+        if (window.matchMedia('(max-width: 650px)').matches) {
+            e.preventDefault();
+            $('body').toggleClass('off-canvas');
+        }
+    });
+
+}());

core/client/tagui.js

@@ -162,13 +162,6 @@
         $(e.currentTarget).remove();
     }
 
-    function handleClickOff(e) {
-        if (window.matchMedia('(max-width: 650px)').matches) {
-            e.preventDefault();
-            $('body').toggleClass('off-canvas');
-        }
-    }
-
     $(document).ready(function () {
         suggestions = $("ul.suggestions").hide(); // Initnialise suggestions overlay
 
@@ -182,7 +175,7 @@
             .on('keydown', handleTagKeyDown);
         $('ul.suggestions').on('click', "li", handleSuggestionClick);
         $('.categories').on('click', ".category", handleCategoryClick);
-        $('[data-off-canvas]').on('click', handleClickOff);
+
     });
 
 }());

core/client/views/dashboard.js

@@ -1,4 +1,4 @@
-/*global window, document, Ghost, $, _, Backbone, JST */
+/*global window, document, localStorage, Ghost, $, _, Backbone, JST */
 (function () {
     "use strict";
 

core/server/views/default.hbs

@@ -11,7 +11,7 @@
         <meta name="author" content="">
         <meta name="HandheldFriendly" content="True">
         <meta name="MobileOptimized" content="320">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
         <meta name="apple-mobile-web-app-capable" content="yes" />
 
         <link rel="shortcut icon" href="/favicon.ico">
@@ -59,12 +59,14 @@
         <script src="/public/vendor/countable.js"></script>
         <script src="/public/vendor/to-title-case.js"></script>
         <script src="/public/vendor/packery.pkgd.min.js"></script>
+        <script src="/public/vendor/jquery.hammer.min.js"></script>
 
         <script src="/public/init.js"></script>
 
         <script src="/public/assets/lib/uploader.js"></script>
 
         <script src="/public/tpl/hbs-tpl.js"></script>
+        <script src="/public/mobile-interactions.js"></script>
         <script src="/public/toggle.js"></script>
         <script src="/public/markdown-actions.js"></script>
         <script src="/public/tagui.js"></script>