Allow swiping nav menus

camptocamp · Oct 7, 2019 · 2f9afa0 · 2f9afa0
1 parent 52bc6d8
commit 2f9afa0
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/contribs/gmf/apps/mobile_alt/index.html.ejs b/contribs/gmf/apps/mobile_alt/index.html.ejs
@@ -24,6 +24,12 @@
         gmf-map-map="mainCtrl.map"
         gmf-map-manage-resize="mainCtrl.manageResize"
         gmf-map-resize-transition="mainCtrl.resizeTransition"></gmf-map>
+
+      <span ng-show="!mainCtrl.leftNavVisible && !mainCtrl.rightNavVisible">
+        <div class="nav-swipper nav-swipper-left" ng-swipe-right="mainCtrl.toggleLeftNavVisibility()"></div>
+        <div class="nav-swipper nav-swipper-right" ng-swipe-left="mainCtrl.toggleRightNavVisibility()"></div>
+      </span>
+
       <ngeo-query
         active="mainCtrl.queryActive"
         map="::mainCtrl.map">
@@ -98,7 +104,7 @@
         </div>
       </div>
     </main>
-    <nav class="gmf-mobile-nav-left" gmf-mobile-nav>
+    <nav class="gmf-mobile-nav-left" gmf-mobile-nav ng-swipe-left="mainCtrl.toggleLeftNavVisibility()">
       <header>
         <a class="gmf-mobile-nav-go-back" href>{{'Back' | translate}}</a>
         <span class="gmf-mobile-nav-header-title">{{'Data' | translate}}</span>
@@ -135,7 +141,7 @@
         gmf-mobile-nav-back-on-click>
       </gmf-themeselector>
     </nav>
-    <nav class="gmf-mobile-nav-right" gmf-mobile-nav>
+    <nav class="gmf-mobile-nav-right" gmf-mobile-nav ng-swipe-right="mainCtrl.toggleRightNavVisibility()">
       <header>
         <a class="gmf-mobile-nav-go-back" href>{{'Back' | translate}}</a>
         <span class="gmf-mobile-nav-header-title">{{'Tools' | translate}}</span>

diff --git a/contribs/gmf/src/controllers/mobile.scss b/contribs/gmf/src/controllers/mobile.scss
@@ -189,3 +189,18 @@ gmf-search {
     }
   }
 }
+
+.nav-swipper {
+  width: 20px;
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  height: 100%;
+  &.nav-swipper-left {
+    float: left;
+  }
+  &.nav-swipper-right {
+    float: right;
+    right: 0;
+  }
+}