add app sidebar toggle and swipe on mobile

diff --git a/core/css/mobile.css b/core/css/mobile.css
index 9cea0dddc8f1e0bb1fd8d3bbe36dd8733df2bf3c..f36ec2e6f0fed8eb652b950352c439a272f34dfd 100644 (file)
--- a/core/css/mobile.css
+++ b/core/css/mobile.css
@@ -60,4 +60,70 @@
        box-sizing: border-box;
 }
 
+
+/* app sidebar toggle and swipe */
+#app-navigation,
+#app-content {
+       position: absolute;
+       top: 0;
+       left: 0;
+       right: 0;
+       bottom: 0;
+}
+
+#app-navigation {
+       width: 230px !important;
+}
+
+#app-content {
+       width: 100% !important;
+       left: 0 !important;
+       background-color: #fff;
+       overflow: hidden;
+}
+
+#app-navigation-toggle {
+       position: absolute;
+       display: inline-block !important;
+       top: 0;
+       left: 0;
+       width: 44px;
+       height: 44px;
+       z-index: 149;
+       background-color: rgba(255, 255, 255, .7);
+       cursor: pointer;
+       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+       filter: alpha(opacity=60);
+       opacity: .6;
+}
+#app-navigation-toggle:hover,
+#app-navigation-toggle:focus {
+       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+       filter: alpha(opacity=100);
+       opacity: 1;
+}
+
+
+/* fix controls bar for apps which don't use the standard */
+#body-user .app-files #controls,
+#user-controls {
+       left: 0 !important;
+       padding-left: 44px !important;
+}
+table.multiselect thead {
+       left: 0 !important;
+}
+
+/* fix controls bar jumping when navigation is slid out */
+.snapjs-left .app-files #controls,
+.snapjs-left #user-controls {
+       top: 0;
+}
+.snapjs-left table.multiselect thead {
+       top: 44px;
+}
+
+
+
+/* end of media query */
 }

diff --git a/core/js/js.js b/core/js/js.js
index b3cefa83beead1fdbdc23aff977871b065500d66..123c4ad8e817dd45028b463505d5bcdddaaa1707 100644 (file)
--- a/core/js/js.js
+++ b/core/js/js.js
@@ -1131,6 +1131,21 @@ function initCore() {
        }
 
        setupMainMenu();
+
+       // App sidebar on mobile
+       var snapper = new Snap({
+               element: document.getElementById('app-content'),
+               disable: 'right',
+               maxPosition: 230
+       });
+       $('#app-content').prepend('<div id="app-navigation-toggle" class="icon-menu" style="display:none;"></div>');
+       $('#app-navigation-toggle').click(function(){
+               if(snapper.state().state == 'left'){
+                       snapper.close();
+               } else {
+                       snapper.open('left');
+               }
+       });
 }
 
 $(document).ready(initCore);