overlay sidebar for list and form view

frappe/public/css/sidebar.css

@@ -250,8 +250,8 @@ body[data-route^="Module"] .main-menu .form-sidebar {
   margin-top: -15px;
 }
 @media (max-width: 991px) {
-  .layout-side-section .list-sidebar {
-    margin-top: 0;
+  .layout-side-section .overlay-sidebar {
+    margin-top: 0 !important;
     position: fixed;
     background: white;
     top: 0;
@@ -265,41 +265,35 @@ body[data-route^="Module"] .main-menu .form-sidebar {
     display: block !important;
     transition: transform 300ms ease-in-out;
   }
-  .layout-side-section .list-sidebar i.octicon-x {
-    margin: -12px;
-    padding: 12px;
-  }
-  .layout-side-section .list-sidebar div.close-sidebar {
-    opacity: 0;
-    transition: opacity 300ms ease 200ms;
-  }
-  .layout-side-section .list-sidebar.opened {
+  .layout-side-section .overlay-sidebar.opened {
     transform: translateX(0);
+    overflow-y: auto;
   }
-  .layout-side-section .list-sidebar.opened div.close-sidebar {
-    opacity: 0.5;
-    background: #000;
-    position: fixed;
-    top: 0;
-    right: -150%;
-    width: 150%;
-    height: 100%;
-    z-index: 9998;
-  }
-  .layout-side-section .list-sidebar .reports-dropdown {
+  .layout-side-section .overlay-sidebar .reports-dropdown {
     margin: 10px 0;
   }
-  .layout-side-section .list-sidebar .reports-dropdown li:not(.divider) {
+  .layout-side-section .overlay-sidebar .reports-dropdown li:not(.divider) {
     padding: 10px 0;
   }
 }
 @media (max-width: 767px) {
-  .layout-side-section .list-sidebar {
+  .layout-side-section .overlay-sidebar {
     width: 70%;
   }
-  .layout-side-section .list-sidebar.opened div.close-sidebar {
-    right: -42.857%;
-    width: 42.857%;
+}
+.layout-side-section div.close-sidebar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  opacity: 0.3;
+  background: #000;
+  z-index: 1041;
+  height: 100%;
+  width: 100%;
+}
+@media (max-width: 991px) {
+  .layout-side-section .sidebar-menu {
+    margin: 0;
   }
 }
 .sidebar-left .list-sidebar .stat-label,

frappe/public/js/frappe/form/sidebar.js

@@ -8,7 +8,7 @@ frappe.ui.form.Sidebar = Class.extend({
 		var sidebar_content = frappe.render_template("form_sidebar", {doctype: this.frm.doctype, frm:this.frm});
 
 		this.offcanvas_form_sidebar = $(".offcanvas .form-sidebar").html(sidebar_content);
-		this.page_sidebar = $('<div class="form-sidebar hidden-xs hidden-sm"></div>')
+		this.page_sidebar = $('<div class="form-sidebar overlay-sidebar hidden-xs hidden-sm"></div>')
 			.html(sidebar_content)
 			.appendTo(this.page.sidebar.empty());
 

frappe/public/js/frappe/list/list_sidebar.js

@@ -19,21 +19,10 @@ frappe.views.ListSidebar = Class.extend({
 		var sidebar_content = frappe.render_template("list_sidebar", {doctype: this.doclistview.doctype});
 
 		this.offcanvas_list_sidebar = $(".offcanvas .list-sidebar").html(sidebar_content);
-		this.page_sidebar = $('<div class="list-sidebar hidden-xs hidden-sm"></div>')
-			.html('<i class="octicon octicon-x close-sidebar visible-xs visible-sm pull-right"></i>')
-			.append('<div class="close-sidebar visible-xs visible-sm"></div>')
-			.append(sidebar_content)
+		this.page_sidebar = $('<div class="list-sidebar overlay-sidebar hidden-xs hidden-sm"></div>')
+			.html(sidebar_content)
 			.appendTo(this.page.sidebar.empty());
 
-		this.page_sidebar.find(".close-sidebar").click(function() {
-			var list_sidebar = $('.layout-side-section .list-sidebar');
-			list_sidebar.removeClass('opened');
-			list_sidebar.find('.dropdown-toggle').removeClass('text-muted');
-			setTimeout(function() {
-				list_sidebar.find('.reports-dropdown').addClass('dropdown-menu');
-			}, 300);
-		});
-
 		this.sidebar = this.page_sidebar.add(this.offcanvas_list_sidebar);
 
 		this.setup_reports();

frappe/public/js/frappe/ui/toolbar/toolbar.js

@@ -12,10 +12,27 @@ frappe.ui.toolbar.Toolbar = Class.extend({
 
 		// header.find(".toggle-sidebar").on("click", frappe.ui.toolbar.toggle_left_sidebar);
 		header.find(".toggle-sidebar").on("click", function () {
-			var list_sidebar = $('.layout-side-section .list-sidebar');
-			list_sidebar.addClass('opened');
-			list_sidebar.find('.reports-dropdown').removeClass('dropdown-menu').addClass('list-unstyled');
-			list_sidebar.find('.dropdown-toggle').addClass('text-muted').find('.caret').addClass('hidden-xs');
+			var layout_side_section = $('.layout-side-section');
+			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');
+
+			$('<div class="close-sidebar">').hide().appendTo(layout_side_section).fadeIn();
+
+			var offcanvas_container = $('body').find('.offcanvas-container');
+			offcanvas_container.css("overflow", "hidden");
+
+			var close_sidebar = layout_side_section.find(".close-sidebar");
+			close_sidebar.click(function() {
+				overlay_sidebar.removeClass('opened').find('.dropdown-toggle').removeClass('text-muted');
+				offcanvas_container.css("overflow", "auto");
+
+				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/sidebar.less

@@ -255,59 +255,57 @@ body[data-route^="Module"] .main-menu {
 	margin-top: -15px;
 }
 
-.layout-side-section .list-sidebar {
-	@media (max-width: 991px) {
-		margin-top: 0;
-		position: fixed;
-		background: white;
-		top: 0;
-		left: 0;
-		transform: translateX(-110%);
-		z-index: 9999;
-		box-shadow: 5px 0 25px 0px rgba(0,0,0,0.3);
-		height: 100%;
-		width: 40%;
-		padding: 25px;
-		display: block !important;
-		transition: transform 300ms ease-in-out;
+.layout-side-section {
 
-		i.octicon-x {
-			margin: -12px;
-			padding: 12px;
-		}
+	.overlay-sidebar {
+		@media (max-width: 991px) {
+			margin-top: 0 !important;
+			position: fixed;
+			background: white;
+			top: 0;
+			left: 0;
+			transform: translateX(-110%);
+			z-index: 9999;
+			box-shadow: 5px 0 25px 0px rgba(0,0,0,0.3);
+			height: 100%;
+			width: 40%;
+			padding: 25px;
+			display: block !important;
+			transition: transform 300ms ease-in-out;
+
+			&.opened {
+				transform: translateX(0);
+				overflow-y: auto;
+			}
 
-		div.close-sidebar {
-			opacity: 0;
-			transition: opacity 300ms ease 200ms;
-		}
+			.reports-dropdown {
+				margin: 10px 0;
 
-		&.opened {
-			transform: translateX(0);
-			div.close-sidebar {
-				opacity: 0.5;
-				background: #000;
-				position: fixed;
-				top: 0;
-				right: -150%;
-				width: 150%;
-				height: 100%;
-				z-index: 9998;
+				li:not(.divider) {
+					padding: 10px 0;
+				}
 			}
 		}
 
-		.reports-dropdown {
-			margin: 10px 0;
-
-			li:not(.divider) {
-				padding: 10px 0;
-			}
+		@media (max-width: 767px) {
+			width: 70%;
 		}
 	}
-	@media (max-width: 767px) {
-		width: 70%;
-		&.opened div.close-sidebar {
-			right: -42.857%;
-			width: 42.857%;
+
+	div.close-sidebar {
+		position: fixed;
+		top: 0;
+		right: 0;
+		opacity: 0.3;
+		background: #000;
+		z-index: 1041;
+		height: 100%;
+		width: 100%;
+	}
+
+	.sidebar-menu {
+		@media (max-width: 991px) {
+			margin: 0;
 		}
 	}
 }