Revert "Merge pull request #318 from matthojo/mobile-interactions"

This reverts commit f18c7f22c3, reversing
changes made to 4ea9d77b11.

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,66 +80,6 @@
         return this;
     };
 
-    // ## GLOBALS
-
-    /**
-     * Hammer.js
-     */
-    var Hammer = $(document).hammer({stop_browser_behavior: { touchAction: true }});
-    Hammer.on("swiperight", "#global-header", function (event) {
-        if (window.matchMedia('(max-width: 400px)').matches) {
-            event.gesture.preventDefault();
-            $('body').addClass('off-canvas');
-        }
-    });
-
-    Hammer.on("swipeleft", "#main-menu", function (event) {
-        if (window.matchMedia('(max-width: 400px)').matches) {
-            event.gesture.preventDefault();
-            $('body').removeClass('off-canvas');
-        }
-    });
-
-    Hammer.on("tap swipeleft", ".manage .content-list ol li", function (event) {
-        if (window.matchMedia('(max-width: 800px)').matches) {
-            event.gesture.preventDefault();
-            $(".content-list").animate({right: "100%", left: "-100%", 'margin-right': "15px"}, 300);
-            $(".content-preview").animate({right: "0", left: "0", 'margin-left': "0"}, 300);
-        }
-    });
-
-    Hammer.on("swiperight", ".content-preview", function (event) {
-        if (window.matchMedia('(max-width: 800px)').matches) {
-            event.gesture.preventDefault();
-            $(".content-list").animate({right: "0", left: "0", 'margin-right': "0"}, 300);
-            $(".content-preview").animate({right: "-100%", left: "100%", 'margin-left': "15px"}, 300);
-        }
-    });
-
-    Hammer.on("tap swipeleft", ".settings .settings-menu li", function (event) {
-        if (window.matchMedia('(max-width: 800px)').matches) {
-            event.gesture.preventDefault();
-            $(".settings-sidebar").animate({right: "100%", left: "-102%", 'margin-right': "15px"}, 300);
-            $(".settings-content").animate({right: "0", left: "0", 'margin-left': "0"}, 300);
-        }
-    });
-
-    Hammer.on("swiperight", ".settings-content", function (event) {
-        if (window.matchMedia('(max-width: 800px)').matches) {
-            event.gesture.preventDefault();
-            $(".settings-sidebar").animate({right: "0", left: "0", 'margin-right': "0"}, 300);
-            $(".settings-content").animate({right: "-100%", left: "100%", 'margin-left': "15px"}, 300);
-        }
-    });
-
-
-    $('[data-off-canvas]').on('click', function (e) {
-        if (window.matchMedia('(max-width: 650px)').matches) {
-            e.preventDefault();
-            $('body').toggleClass('off-canvas');
-        }
-    });
-
-    $('.overlay').hideAway();
+    $('.overlay').hideAway(); // TODO: Move to a more sensible global file.
 
 }());

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

@@ -32,6 +32,9 @@
         background: #fff;
         box-shadow: $shadow;
 
+        @include breakpoint(900px) {
+            width:300px;
+        }
         @include breakpoint($tablet) {
             width:auto;
             right:0;
@@ -179,11 +182,9 @@
         border-left:$lightbrown 2px solid;
         background: #fff;
         box-shadow: $shadow;
-        @include breakpoint($tablet) {
+        @include breakpoint(900px) {
             width: auto;
-            left: 100%;
-            right: -100%;
-            margin-left: 15px;
+            left: 300px;
         }
 
         .unfeatured {

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

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

core/client/tagui.js

@@ -162,6 +162,13 @@
         $(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
 
@@ -175,7 +182,7 @@
             .on('keydown', handleTagKeyDown);
         $('ul.suggestions').on('click', "li", handleSuggestionClick);
         $('.categories').on('click', ".category", handleCategoryClick);
-
+        $('[data-off-canvas]').on('click', handleClickOff);
     });
 
 }());

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="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta name="apple-mobile-web-app-capable" content="yes" />
 
         <link rel="shortcut icon" href="/favicon.ico">
@@ -53,7 +53,6 @@
         <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/lib/jquery-utils.js"></script>
         <script src="/public/init.js"></script>