add app sidebar toggle and swipe on mobile

2 files changed, 81 insertions, 0 deletions

diff --git a/core/css/mobile.css b/core/css/mobile.css
index 9cea0dddc8f..f36ec2e6f0f 100644
--- 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 b3cefa83bee..123c4ad8e81 100644
--- 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);