From 663100fe291ad5486be0ead6b5c8a49e64ebba97 Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Wed, 13 Jul 2016 18:45:57 +0530
Subject: [PATCH] overlay sidebar in modules view

---
 frappe/desk/page/modules/modules.js           | 13 +++++++------
 frappe/desk/page/modules/modules_sidebar.html |  2 +-
 frappe/public/css/docs.css                    |  5 +++++
 frappe/public/css/list.css                    |  5 +++++
 frappe/public/css/mobile.css                  | 12 ++++++++++++
 frappe/public/css/module.css                  |  6 ++++++
 frappe/public/css/navbar.css                  |  5 +++++
 frappe/public/css/sidebar.css                 | 11 ++++++++++-
 frappe/public/js/frappe/ui/toolbar/toolbar.js | 18 ++++++++++--------
 frappe/public/less/list.less                  |  4 ++++
 frappe/public/less/mobile.less                | 11 +++++++++++
 frappe/public/less/module.less                |  7 +++++++
 frappe/public/less/navbar.less                |  6 ++++++
 frappe/public/less/sidebar.less               | 13 ++++++++++++-
 14 files changed, 101 insertions(+), 17 deletions(-)

diff --git a/frappe/desk/page/modules/modules.js b/frappe/desk/page/modules/modules.js
index 0adc8efd7d..46ffde84dc 100644
--- a/frappe/desk/page/modules/modules.js
+++ b/frappe/desk/page/modules/modules.js
@@ -34,6 +34,7 @@ frappe.pages['modules'].on_page_load = function(wrapper) {
 		page.wrapper.find('.module-sidebar-item.active, .module-link.active').removeClass('active');
 		$(link).addClass('active').parent().addClass("active");
 		show_section($(link).attr('data-name'));
+		$('.module-sidebar-nav').trigger('close_sidebar');
 	}
 
 	var show_section = function(module_name) {
@@ -63,12 +64,12 @@ frappe.pages['modules'].on_page_load = function(wrapper) {
 		page.set_title(__(m.label));
 		page.main.html(frappe.render_template('modules_section', m));
 
-		if(frappe.utils.is_xs() || frappe.utils.is_sm()) {
-			// call this after a timeout, becuase a refresh will set the page to the top
-			setTimeout(function() {
-				$(document).scrollTop($('.module-body').offset().top - 100);
-			}, 100);
-		}
+		// if(frappe.utils.is_xs() || frappe.utils.is_sm()) {
+		// 	// call this after a timeout, becuase a refresh will set the page to the top
+		// 	setTimeout(function() {
+		// 		$(document).scrollTop($('.module-body').offset().top - 150);
+		// 	}, 100);
+		// }
 
 		//setup_section_toggle();
 		frappe.app.update_notification_count_in_modules();
diff --git a/frappe/desk/page/modules/modules_sidebar.html b/frappe/desk/page/modules/modules_sidebar.html
index 0c16818cb8..04719f271a 100644
--- a/frappe/desk/page/modules/modules_sidebar.html
+++ b/frappe/desk/page/modules/modules_sidebar.html
@@ -1,4 +1,4 @@
-<ul class="module-sidebar-nav nav nav-pills nav-stacked">
+<ul class="module-sidebar-nav overlay-sidebar nav nav-pills nav-stacked">
     {% for (var i=0, l= modules.length; i < l; i++) { var item = modules[i];
 			if(item.type==="module" && !item.blocked) { %}
 			{{ frappe.render_template("modules_sidebar_item", {"item": item}) }}
diff --git a/frappe/public/css/docs.css b/frappe/public/css/docs.css
index ac6ad24a15..57a9c4bf73 100644
--- a/frappe/public/css/docs.css
+++ b/frappe/public/css/docs.css
@@ -180,6 +180,11 @@ body {
     margin-left: 0 !important;
   }
 }
+@media (max-width: 767px) {
+  .navbar-desk {
+    width: 60% !important;
+  }
+}
 #searchModal .modal-dialog,
 #searchModal .modal-content {
   background: transparent;
diff --git a/frappe/public/css/list.css b/frappe/public/css/list.css
index a99cccd6a8..26e8b312f2 100644
--- a/frappe/public/css/list.css
+++ b/frappe/public/css/list.css
@@ -23,6 +23,11 @@
   padding-bottom: 4px;
   padding-right: 120px;
 }
+@media (max-width: 767px) {
+  .set-filters {
+    padding-right: 80px;
+  }
+}
 .set-filters .btn {
   margin-bottom: 10px;
 }
diff --git a/frappe/public/css/mobile.css b/frappe/public/css/mobile.css
index 22391378d7..294e04b158 100644
--- a/frappe/public/css/mobile.css
+++ b/frappe/public/css/mobile.css
@@ -279,6 +279,18 @@ body {
   }
   body[data-route=""] .navbar .navbar-home,
   body[data-route="desktop"] .navbar .navbar-home {
+    padding: 8px 10px;
+  }
+  body[data-route=""] .navbar .navbar-home:before,
+  body[data-route="desktop"] .navbar .navbar-home:before {
+    display: none;
+  }
+  body[data-route=""] .navbar .navbar-home img,
+  body[data-route="desktop"] .navbar .navbar-home img {
+    margin-top: 0;
+  }
+  body[data-route=""] .toggle-sidebar,
+  body[data-route="desktop"] .toggle-sidebar {
     display: none !important;
   }
   .linked-with-dialog {
diff --git a/frappe/public/css/module.css b/frappe/public/css/module.css
index 7e958c441a..9e937b0957 100644
--- a/frappe/public/css/module.css
+++ b/frappe/public/css/module.css
@@ -36,6 +36,12 @@
     border-top: 1px solid #d1d8dd;
   }
 }
+@media (max-width: 767px) {
+  .module-body {
+    margin-top: 0;
+    border-top: 1px solid transparent;
+  }
+}
 @media (max-width: 767px) {
   .module-section {
     border: none;
diff --git a/frappe/public/css/navbar.css b/frappe/public/css/navbar.css
index a91403f1b9..bbe20e52a3 100644
--- a/frappe/public/css/navbar.css
+++ b/frappe/public/css/navbar.css
@@ -46,6 +46,11 @@
     margin-left: 0 !important;
   }
 }
+@media (max-width: 767px) {
+  .navbar-desk {
+    width: 60% !important;
+  }
+}
 #searchModal .modal-dialog,
 #searchModal .modal-content {
   background: transparent;
diff --git a/frappe/public/css/sidebar.css b/frappe/public/css/sidebar.css
index 2a35f0497b..5c58f3fb02 100644
--- a/frappe/public/css/sidebar.css
+++ b/frappe/public/css/sidebar.css
@@ -263,7 +263,7 @@ body[data-route^="Module"] .main-menu .form-sidebar {
     width: 40%;
     padding: 25px;
     display: block !important;
-    transition: transform 300ms ease-in-out;
+    transition: transform 200ms ease-in-out;
   }
   .layout-side-section .overlay-sidebar.opened {
     transform: translateX(0);
@@ -296,6 +296,15 @@ body[data-route^="Module"] .main-menu .form-sidebar {
     margin: 0;
   }
 }
+@media (max-width: 991px) {
+  .layout-side-section .module-sidebar-nav {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .layout-side-section .module-sidebar-nav .module-link {
+    padding-left: 25px;
+  }
+}
 .sidebar-left .list-sidebar .stat-label,
 .sidebar-left .list-sidebar .stat-no-records {
   padding: 12px 14px;
diff --git a/frappe/public/js/frappe/ui/toolbar/toolbar.js b/frappe/public/js/frappe/ui/toolbar/toolbar.js
index ee543aeb22..1c7c07a1da 100644
--- a/frappe/public/js/frappe/ui/toolbar/toolbar.js
+++ b/frappe/public/js/frappe/ui/toolbar/toolbar.js
@@ -16,23 +16,25 @@ frappe.ui.toolbar.Toolbar = Class.extend({
 			var overlay_sidebar = layout_side_section.find('.overlay-sidebar');
 			overlay_sidebar.addClass('opened');
 			overlay_sidebar.find('.reports-dropdown').removeClass('dropdown-menu').addClass('list-unstyled');
-			overlay_sidebar.find('.dropdown-toggle').addClass('text-muted').find('.caret').addClass('hidden-xs');
+			overlay_sidebar.find('.dropdown-toggle').addClass('text-muted').find('.caret').addClass('hidden-xs hidden-sm');
 
 			$('<div class="close-sidebar">').hide().appendTo(layout_side_section).fadeIn();
 
 			var offcanvas_container = $('body').find('.offcanvas-container');
-			offcanvas_container.css("overflow", "hidden");
+			offcanvas_container.css("overflow-y", "hidden");
 
-			var close_sidebar = layout_side_section.find(".close-sidebar");
-			close_sidebar.click(function() {
+			layout_side_section.find(".close-sidebar").on('click', close_sidebar);
+
+			$('.module-sidebar-nav').on('close_sidebar', close_sidebar);
+
+			function close_sidebar() {
 				overlay_sidebar.removeClass('opened').find('.dropdown-toggle').removeClass('text-muted');
-				offcanvas_container.css("overflow", "auto");
+				offcanvas_container.css("overflow-y", "visible");
 
-				close_sidebar.fadeOut(function() {
+				layout_side_section.find(".close-sidebar").fadeOut(function() {
 					overlay_sidebar.find('.reports-dropdown').addClass('dropdown-menu');
-					close_sidebar.remove();
 				});
-			});
+			}
 		});
 
 		header.find(".toggle-navbar-new-comments").on("click", function() {
diff --git a/frappe/public/less/list.less b/frappe/public/less/list.less
index fa41bc68e8..676904231a 100644
--- a/frappe/public/less/list.less
+++ b/frappe/public/less/list.less
@@ -32,6 +32,10 @@
 .set-filters {
 	padding-bottom: 4px;
 	padding-right: 120px;
+
+	@media (max-width: @screen-xs) {
+		padding-right: 80px;
+	}
 }
 
 .set-filters .btn {
diff --git a/frappe/public/less/mobile.less b/frappe/public/less/mobile.less
index 61c561808c..7d0b983f91 100644
--- a/frappe/public/less/mobile.less
+++ b/frappe/public/less/mobile.less
@@ -193,6 +193,17 @@
 	body[data-route=""],
 	body[data-route="desktop"] {
 		.navbar .navbar-home {
+			// display: none !important;
+			padding: 8px 10px;
+			&:before {
+				display: none;
+			}
+			img {
+				margin-top: 0;
+			}
+		}
+
+		.toggle-sidebar {
 			display: none !important;
 		}
 	}
diff --git a/frappe/public/less/module.less b/frappe/public/less/module.less
index b016922bae..f924778864 100644
--- a/frappe/public/less/module.less
+++ b/frappe/public/less/module.less
@@ -49,6 +49,13 @@
 	}
 }
 
+@media(max-width: @screen-xs) {
+	.module-body {
+		margin-top: 0;
+		border-top: 1px solid transparent;
+	}
+}
+
 @media(max-width: @screen-xs) {
 	.module-section {
 		border: none;
diff --git a/frappe/public/less/navbar.less b/frappe/public/less/navbar.less
index 455c12dffe..2f25536e0e 100644
--- a/frappe/public/less/navbar.less
+++ b/frappe/public/less/navbar.less
@@ -57,6 +57,12 @@
 	}
 }
 
+@media (max-width: 767px) {
+	.navbar-desk {
+		width: 60% !important;
+	}
+}
+
 #searchModal {
 	.modal-dialog, .modal-content {
 		background: transparent;
diff --git a/frappe/public/less/sidebar.less b/frappe/public/less/sidebar.less
index 65d25397a4..8f61b576a4 100644
--- a/frappe/public/less/sidebar.less
+++ b/frappe/public/less/sidebar.less
@@ -271,7 +271,7 @@ body[data-route^="Module"] .main-menu {
 			width: 40%;
 			padding: 25px;
 			display: block !important;
-			transition: transform 300ms ease-in-out;
+			transition: transform 200ms ease-in-out;
 
 			&.opened {
 				transform: translateX(0);
@@ -308,6 +308,17 @@ body[data-route^="Module"] .main-menu {
 			margin: 0;
 		}
 	}
+
+	.module-sidebar-nav {
+		@media (max-width: 991px) {
+			padding-left: 0;
+			padding-right: 0;
+
+			.module-link {
+				padding-left: 25px;
+			}
+		}
+	}
 }
 
 .sidebar-left .list-sidebar {