overlay sidebar in modules view

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();

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}) }}

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;

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;
 }

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 {

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;

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;

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;

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() {

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 {

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;
 		}
 	}

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;

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;

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 {