Merge pull request #1881 from netchampfaris/remove-offcanvas

Remove offcanvas

frappe/desk/page/modules/modules.js

@@ -34,7 +34,6 @@ 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) {

frappe/public/build.json

@@ -128,7 +128,6 @@
 		"public/js/frappe/ui/toolbar/awesome_bar.js",
 		"public/js/frappe/ui/toolbar/about.js",
 		"public/js/frappe/ui/toolbar/navbar.html",
-		"public/js/frappe/ui/toolbar/offcanvas_left_sidebar.html",
 		"public/js/frappe/ui/toolbar/toolbar.js",
 		"public/js/frappe/ui/toolbar/notifications.js",
 		"public/js/frappe/views/communication.js",

frappe/public/css/docs.css

@@ -1,137 +1,3 @@
-html {
-  min-height: 100%;
-}
-body {
-  height: 100%;
-  /* The html and body elements cannot have any padding or margin. */
-  margin: 0px;
-  padding: 0px !important;
-}
-html,
-body {
-  overflow-x: hidden;
-  /* Prevent scroll on narrow devices */
-}
-.offcanvas-main-section-overlay {
-  display: none;
-  cursor: pointer;
-  opacity: 0.5;
-}
-.sidebar-padding {
-  padding: 12px 14px;
-}
-.offcanvas .sidebar .sidebar-menu > li > .btn-group,
-.offcanvas .sidebar .sidebar-menu > li > a,
-.offcanvas .sidebar .dropdown-menu > li > a {
-  padding: 12px 14px;
-  display: block;
-  whitespace: nowrap;
-  transition: 0.2s;
-  text-decoration: none !important;
-}
-.offcanvas .sidebar .dropdown-menu {
-  padding: 0px;
-  font-size: inherit;
-}
-.offcanvas .sidebar .dropdown-menu > li > a {
-  padding-left: 28px;
-}
-.offcanvas .sidebar .divider {
-  height: 1px;
-  overflow: hidden;
-  background-color: #EBEFF2;
-  width: 100%;
-  margin: 0px;
-}
-.offcanvas .sidebar .badge {
-  right: 15px !important;
-  top: 11px !important;
-}
-.offcanvas .sidebar .sidebar-menu > li > a:hover,
-.offcanvas .sidebar .dropdown-menu > li > a:hover,
-.offcanvas .sidebar .sidebar-menu > li > a:focus,
-.offcanvas .sidebar .dropdown-menu > li > a:focus,
-.offcanvas .sidebar .sidebar-menu > li > a:active,
-.offcanvas .sidebar .dropdown-menu > li > a:active {
-  background-color: #F0F4F7;
-}
-@media (max-width: 767px) {
-  .page-content {
-    min-height: 200px;
-  }
-  .offcanvas {
-    transition: 0.25s;
-  }
-  .offcanvas-main-section-overlay {
-    bottom: 0;
-    position: fixed;
-  }
-  .offcanvas-container,
-  .offcanvas,
-  .offcanvas-main-section {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-  }
-  .offcanvas.active-left,
-  .offcanvas.active-right {
-    position: fixed;
-  }
-  .offcanvas.active-left .offcanvas-main-section-overlay,
-  .offcanvas.active-right .offcanvas-main-section-overlay {
-    z-index: 1031;
-    display: block;
-    bottom: 0;
-  }
-  .offcanvas.active-left {
-    -webkit-transform: translate3d(75%, 0, 0);
-    transform: translate3d(75%, 0, 0);
-  }
-  .offcanvas.active-right {
-    -webkit-transform: translate3d(-75%, 0, 0);
-    transform: translate3d(-75%, 0, 0);
-  }
-  .offcanvas .sidebar {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    width: 75%;
-    /* 9 columns */
-    overflow-x: hidden;
-    overflow-y: auto;
-    font-size: 12px;
-  }
-  .offcanvas .sidebar-right {
-    left: 100%;
-    border-left: 1px solid #d1d8dd;
-  }
-  .offcanvas .sidebar-left {
-    right: 100%;
-    border-right: 1px solid #d1d8dd;
-  }
-  .offcanvas .sidebar-menu {
-    margin-bottom: 0;
-  }
-  .offcanvas .navbar-form {
-    margin: 0px;
-  }
-  .offcanvas .sidebar ul {
-    margin: 0px;
-  }
-  .offcanvas .sidebar-page-sidebar {
-    border-top: 1px solid #d1d8dd;
-  }
-  .offcanvas .sidebar-label {
-    text-transform: uppercase;
-    color: #8D99A6;
-    font-size: 85%;
-    margin: 0px;
-    font-weight: bold;
-    padding: 10px 15px 0px;
-  }
-}
 .navbar .dropdown-toggle {
   padding-top: 8px;
   padding-bottom: 8px;

frappe/public/css/mobile.css

@@ -3,57 +3,12 @@ html {
 }
 body {
   height: 100%;
-  /* The html and body elements cannot have any padding or margin. */
   margin: 0px;
   padding: 0px !important;
 }
 html,
 body {
   overflow-x: hidden;
-  /* Prevent scroll on narrow devices */
-}
-.offcanvas-main-section-overlay {
-  display: none;
-  cursor: pointer;
-  opacity: 0.5;
-}
-.sidebar-padding {
-  padding: 12px 14px;
-}
-.offcanvas .sidebar .sidebar-menu > li > .btn-group,
-.offcanvas .sidebar .sidebar-menu > li > a,
-.offcanvas .sidebar .dropdown-menu > li > a {
-  padding: 12px 14px;
-  display: block;
-  whitespace: nowrap;
-  transition: 0.2s;
-  text-decoration: none !important;
-}
-.offcanvas .sidebar .dropdown-menu {
-  padding: 0px;
-  font-size: inherit;
-}
-.offcanvas .sidebar .dropdown-menu > li > a {
-  padding-left: 28px;
-}
-.offcanvas .sidebar .divider {
-  height: 1px;
-  overflow: hidden;
-  background-color: #EBEFF2;
-  width: 100%;
-  margin: 0px;
-}
-.offcanvas .sidebar .badge {
-  right: 15px !important;
-  top: 11px !important;
-}
-.offcanvas .sidebar .sidebar-menu > li > a:hover,
-.offcanvas .sidebar .dropdown-menu > li > a:hover,
-.offcanvas .sidebar .sidebar-menu > li > a:focus,
-.offcanvas .sidebar .dropdown-menu > li > a:focus,
-.offcanvas .sidebar .sidebar-menu > li > a:active,
-.offcanvas .sidebar .dropdown-menu > li > a:active {
-  background-color: #F0F4F7;
 }
 @media (max-width: 991px) {
   .intro-area,
@@ -109,6 +64,11 @@ body {
     margin: 0px;
     display: inline-block;
   }
+  #navbar-breadcrumbs li {
+    max-width: 150px;
+    white-space: nowrap;
+    overflow: hidden;
+  }
   #navbar-breadcrumbs > li,
   #navbar-breadcrumbs > li > a {
     display: inline-block;
@@ -125,61 +85,6 @@ body {
   .navbar-nav {
     margin: 0px;
   }
-  .offcanvas {
-    transition: 0.25s;
-  }
-  .offcanvas-main-section-overlay {
-    bottom: 0;
-    position: fixed;
-  }
-  .offcanvas-container,
-  .offcanvas,
-  .offcanvas-main-section {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-  }
-  .offcanvas.active-left,
-  .offcanvas.active-right {
-    position: fixed;
-  }
-  .offcanvas.active-left .offcanvas-main-section-overlay,
-  .offcanvas.active-right .offcanvas-main-section-overlay {
-    z-index: 1031;
-    display: block;
-    bottom: 0;
-  }
-  .offcanvas.active-left {
-    -webkit-transform: translate3d(75%, 0, 0);
-    transform: translate3d(75%, 0, 0);
-  }
-  .offcanvas.active-right {
-    -webkit-transform: translate3d(-75%, 0, 0);
-    transform: translate3d(-75%, 0, 0);
-  }
-  .offcanvas .sidebar {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    width: 75%;
-    /* 9 columns */
-    overflow-x: hidden;
-    overflow-y: auto;
-    font-size: 12px;
-  }
-  .offcanvas .sidebar-right {
-    left: 100%;
-    border-left: 1px solid #d1d8dd;
-  }
-  .offcanvas .sidebar-left {
-    right: 100%;
-    border-right: 1px solid #d1d8dd;
-  }
-  .offcanvas .sidebar-menu {
-    margin-bottom: 0;
-  }
   .sidebar .form-group {
     margin-bottom: 0px;
   }

frappe/public/css/offcanvas-website.css

@@ -1,134 +1,2 @@
-html {
-  min-height: 100%;
-}
-body {
-  height: 100%;
-  /* The html and body elements cannot have any padding or margin. */
-  margin: 0px;
-  padding: 0px !important;
-}
-html,
-body {
-  overflow-x: hidden;
-  /* Prevent scroll on narrow devices */
-}
-.offcanvas-main-section-overlay {
-  display: none;
-  cursor: pointer;
-  opacity: 0.5;
-}
-.sidebar-padding {
-  padding: 12px 14px;
-}
-.offcanvas .sidebar .sidebar-menu > li > .btn-group,
-.offcanvas .sidebar .sidebar-menu > li > a,
-.offcanvas .sidebar .dropdown-menu > li > a {
-  padding: 12px 14px;
-  display: block;
-  whitespace: nowrap;
-  transition: 0.2s;
-  text-decoration: none !important;
-}
-.offcanvas .sidebar .dropdown-menu {
-  padding: 0px;
-  font-size: inherit;
-}
-.offcanvas .sidebar .dropdown-menu > li > a {
-  padding-left: 28px;
-}
-.offcanvas .sidebar .divider {
-  height: 1px;
-  overflow: hidden;
-  background-color: #EBEFF2;
-  width: 100%;
-  margin: 0px;
-}
-.offcanvas .sidebar .badge {
-  right: 15px !important;
-  top: 11px !important;
-}
-.offcanvas .sidebar .sidebar-menu > li > a:hover,
-.offcanvas .sidebar .dropdown-menu > li > a:hover,
-.offcanvas .sidebar .sidebar-menu > li > a:focus,
-.offcanvas .sidebar .dropdown-menu > li > a:focus,
-.offcanvas .sidebar .sidebar-menu > li > a:active,
-.offcanvas .sidebar .dropdown-menu > li > a:active {
-  background-color: #F0F4F7;
-}
 @media (max-width: 767px) {
-  .page-content {
-    min-height: 200px;
-  }
-  .offcanvas {
-    transition: 0.25s;
-  }
-  .offcanvas-main-section-overlay {
-    bottom: 0;
-    position: fixed;
-  }
-  .offcanvas-container,
-  .offcanvas,
-  .offcanvas-main-section {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-  }
-  .offcanvas.active-left,
-  .offcanvas.active-right {
-    position: fixed;
-  }
-  .offcanvas.active-left .offcanvas-main-section-overlay,
-  .offcanvas.active-right .offcanvas-main-section-overlay {
-    z-index: 1031;
-    display: block;
-    bottom: 0;
-  }
-  .offcanvas.active-left {
-    -webkit-transform: translate3d(75%, 0, 0);
-    transform: translate3d(75%, 0, 0);
-  }
-  .offcanvas.active-right {
-    -webkit-transform: translate3d(-75%, 0, 0);
-    transform: translate3d(-75%, 0, 0);
-  }
-  .offcanvas .sidebar {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    width: 75%;
-    /* 9 columns */
-    overflow-x: hidden;
-    overflow-y: auto;
-    font-size: 12px;
-  }
-  .offcanvas .sidebar-right {
-    left: 100%;
-    border-left: 1px solid #d1d8dd;
-  }
-  .offcanvas .sidebar-left {
-    right: 100%;
-    border-right: 1px solid #d1d8dd;
-  }
-  .offcanvas .sidebar-menu {
-    margin-bottom: 0;
-  }
-  .offcanvas .navbar-form {
-    margin: 0px;
-  }
-  .offcanvas .sidebar ul {
-    margin: 0px;
-  }
-  .offcanvas .sidebar-page-sidebar {
-    border-top: 1px solid #d1d8dd;
-  }
-  .offcanvas .sidebar-label {
-    text-transform: uppercase;
-    color: #8D99A6;
-    font-size: 85%;
-    margin: 0px;
-    font-weight: bold;
-    padding: 10px 15px 0px;
-  }
 }

frappe/public/css/offcanvas.css

@@ -1,57 +0,0 @@
-html {
-  min-height: 100%;
-}
-body {
-  height: 100%;
-  /* The html and body elements cannot have any padding or margin. */
-  margin: 0px;
-  padding: 0px !important;
-}
-html,
-body {
-  overflow-x: hidden;
-  /* Prevent scroll on narrow devices */
-}
-.offcanvas-main-section-overlay {
-  display: none;
-  cursor: pointer;
-  opacity: 0.5;
-}
-.sidebar-padding {
-  padding: 12px 14px;
-}
-.offcanvas .sidebar .sidebar-menu > li > .btn-group,
-.offcanvas .sidebar .sidebar-menu > li > a,
-.offcanvas .sidebar .dropdown-menu > li > a {
-  padding: 12px 14px;
-  display: block;
-  whitespace: nowrap;
-  transition: 0.2s;
-  text-decoration: none !important;
-}
-.offcanvas .sidebar .dropdown-menu {
-  padding: 0px;
-  font-size: inherit;
-}
-.offcanvas .sidebar .dropdown-menu > li > a {
-  padding-left: 28px;
-}
-.offcanvas .sidebar .divider {
-  height: 1px;
-  overflow: hidden;
-  background-color: #EBEFF2;
-  width: 100%;
-  margin: 0px;
-}
-.offcanvas .sidebar .badge {
-  right: 15px !important;
-  top: 11px !important;
-}
-.offcanvas .sidebar .sidebar-menu > li > a:hover,
-.offcanvas .sidebar .dropdown-menu > li > a:hover,
-.offcanvas .sidebar .sidebar-menu > li > a:focus,
-.offcanvas .sidebar .dropdown-menu > li > a:focus,
-.offcanvas .sidebar .sidebar-menu > li > a:active,
-.offcanvas .sidebar .dropdown-menu > li > a:active {
-  background-color: #F0F4F7;
-}

frappe/public/css/sidebar.css

@@ -3,61 +3,19 @@ html {
 }
 body {
   height: 100%;
-  /* The html and body elements cannot have any padding or margin. */
   margin: 0px;
   padding: 0px !important;
 }
 html,
 body {
   overflow-x: hidden;
-  /* Prevent scroll on narrow devices */
 }
-.offcanvas-main-section-overlay {
-  display: none;
-  cursor: pointer;
-  opacity: 0.5;
+.hide-form-sidebar .form-sidebar {
+  display: none !important;
 }
 .sidebar-padding {
   padding: 12px 14px;
 }
-.offcanvas .sidebar .sidebar-menu > li > .btn-group,
-.offcanvas .sidebar .sidebar-menu > li > a,
-.offcanvas .sidebar .dropdown-menu > li > a {
-  padding: 12px 14px;
-  display: block;
-  whitespace: nowrap;
-  transition: 0.2s;
-  text-decoration: none !important;
-}
-.offcanvas .sidebar .dropdown-menu {
-  padding: 0px;
-  font-size: inherit;
-}
-.offcanvas .sidebar .dropdown-menu > li > a {
-  padding-left: 28px;
-}
-.offcanvas .sidebar .divider {
-  height: 1px;
-  overflow: hidden;
-  background-color: #EBEFF2;
-  width: 100%;
-  margin: 0px;
-}
-.offcanvas .sidebar .badge {
-  right: 15px !important;
-  top: 11px !important;
-}
-.offcanvas .sidebar .sidebar-menu > li > a:hover,
-.offcanvas .sidebar .dropdown-menu > li > a:hover,
-.offcanvas .sidebar .sidebar-menu > li > a:focus,
-.offcanvas .sidebar .dropdown-menu > li > a:focus,
-.offcanvas .sidebar .sidebar-menu > li > a:active,
-.offcanvas .sidebar .dropdown-menu > li > a:active {
-  background-color: #F0F4F7;
-}
-.hide-form-sidebar .form-sidebar {
-  display: none !important;
-}
 body[data-route=""] .main-menu .desk-sidebar,
 body[data-route="desk"] .main-menu .desk-sidebar {
   display: block !important;

frappe/public/css/website.css

@@ -764,140 +764,6 @@ a.active {
 .docs-attr-desc {
   padding-left: 30px;
 }
-html {
-  min-height: 100%;
-}
-body {
-  height: 100%;
-  /* The html and body elements cannot have any padding or margin. */
-  margin: 0px;
-  padding: 0px !important;
-}
-html,
-body {
-  overflow-x: hidden;
-  /* Prevent scroll on narrow devices */
-}
-.offcanvas-main-section-overlay {
-  display: none;
-  cursor: pointer;
-  opacity: 0.5;
-}
-.sidebar-padding {
-  padding: 12px 14px;
-}
-.offcanvas .sidebar .sidebar-menu > li > .btn-group,
-.offcanvas .sidebar .sidebar-menu > li > a,
-.offcanvas .sidebar .dropdown-menu > li > a {
-  padding: 12px 14px;
-  display: block;
-  whitespace: nowrap;
-  transition: 0.2s;
-  text-decoration: none !important;
-}
-.offcanvas .sidebar .dropdown-menu {
-  padding: 0px;
-  font-size: inherit;
-}
-.offcanvas .sidebar .dropdown-menu > li > a {
-  padding-left: 28px;
-}
-.offcanvas .sidebar .divider {
-  height: 1px;
-  overflow: hidden;
-  background-color: #EBEFF2;
-  width: 100%;
-  margin: 0px;
-}
-.offcanvas .sidebar .badge {
-  right: 15px !important;
-  top: 11px !important;
-}
-.offcanvas .sidebar .sidebar-menu > li > a:hover,
-.offcanvas .sidebar .dropdown-menu > li > a:hover,
-.offcanvas .sidebar .sidebar-menu > li > a:focus,
-.offcanvas .sidebar .dropdown-menu > li > a:focus,
-.offcanvas .sidebar .sidebar-menu > li > a:active,
-.offcanvas .sidebar .dropdown-menu > li > a:active {
-  background-color: #F0F4F7;
-}
-@media (max-width: 767px) {
-  .page-content {
-    min-height: 200px;
-  }
-  .offcanvas {
-    transition: 0.25s;
-  }
-  .offcanvas-main-section-overlay {
-    bottom: 0;
-    position: fixed;
-  }
-  .offcanvas-container,
-  .offcanvas,
-  .offcanvas-main-section {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-  }
-  .offcanvas.active-left,
-  .offcanvas.active-right {
-    position: fixed;
-  }
-  .offcanvas.active-left .offcanvas-main-section-overlay,
-  .offcanvas.active-right .offcanvas-main-section-overlay {
-    z-index: 1031;
-    display: block;
-    bottom: 0;
-  }
-  .offcanvas.active-left {
-    -webkit-transform: translate3d(75%, 0, 0);
-    transform: translate3d(75%, 0, 0);
-  }
-  .offcanvas.active-right {
-    -webkit-transform: translate3d(-75%, 0, 0);
-    transform: translate3d(-75%, 0, 0);
-  }
-  .offcanvas .sidebar {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    width: 75%;
-    /* 9 columns */
-    overflow-x: hidden;
-    overflow-y: auto;
-    font-size: 12px;
-  }
-  .offcanvas .sidebar-right {
-    left: 100%;
-    border-left: 1px solid #d1d8dd;
-  }
-  .offcanvas .sidebar-left {
-    right: 100%;
-    border-right: 1px solid #d1d8dd;
-  }
-  .offcanvas .sidebar-menu {
-    margin-bottom: 0;
-  }
-  .offcanvas .navbar-form {
-    margin: 0px;
-  }
-  .offcanvas .sidebar ul {
-    margin: 0px;
-  }
-  .offcanvas .sidebar-page-sidebar {
-    border-top: 1px solid #d1d8dd;
-  }
-  .offcanvas .sidebar-label {
-    text-transform: uppercase;
-    color: #8D99A6;
-    font-size: 85%;
-    margin: 0px;
-    font-weight: bold;
-    padding: 10px 15px 0px;
-  }
-}
 @media (min-width: 768px) {
   .login-wrapper {
     border-right: 1px solid #f2f2f2;

frappe/public/js/docs.js

@@ -7,21 +7,6 @@ $(function() {
 		});
 	}
 
-	$(".toggle-sidebar").on("click", function() {
-		$(".offcanvas").addClass("active-right");
-		return false;
-	});
-
-	// collapse offcanvas sidebars!
-	$(".offcanvas .sidebar").on("click", "a", function() {
-		$(".offcanvas").removeClass("active-left active-right");
-	});
-
-	$(".offcanvas-main-section-overlay").on("click", function() {
-		$(".offcanvas").removeClass("active-left active-right");
-		return false;
-	});
-
 	// search
 	$('.sidebar-navbar-items .octicon-search, .navbar .octicon-search').parent().on("click", function() {
 		var modal = frappe.get_modal("Search",

frappe/public/js/frappe/desk.js

@@ -217,14 +217,6 @@ frappe.Application = Class.extend({
 			frappe.frappe_toolbar = new frappe.ui.toolbar.Toolbar();
 		}
 
-		// collapse offcanvas sidebars!
-		$(".offcanvas .sidebar").on("click", "a", function() {
-			$(".offcanvas").removeClass("active-left active-right");
-		});
-
-		$(".offcanvas-main-section-overlay").on("click", function() {
-			$(".offcanvas").removeClass("active-left active-right");
-		});
 	},
 	logout: function() {
 		var me = this;

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

@@ -7,12 +7,10 @@ frappe.ui.form.Sidebar = Class.extend({
 	make: function() {
 		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 overlay-sidebar hidden-xs hidden-sm"></div>')
+		this.sidebar = $('<div class="form-sidebar overlay-sidebar hidden-xs hidden-sm"></div>')
 			.html(sidebar_content)
 			.appendTo(this.page.sidebar.empty());
 
-		this.sidebar = this.page_sidebar.add(this.offcanvas_form_sidebar);
 		this.comments = this.sidebar.find(".sidebar-comments");
 		this.user_actions = this.sidebar.find(".user-actions");
 		this.image_section = this.sidebar.find(".sidebar-image-section");
@@ -37,7 +35,6 @@ frappe.ui.form.Sidebar = Class.extend({
 
 		// scroll to comments
 		this.comments.on("click", function() {
-			$(".offcanvas").removeClass("active-left active-right");
 			frappe.utils.scroll_to(me.frm.footer.wrapper.find(".form-comments"), true);
 		});
 

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

@@ -18,13 +18,10 @@ frappe.views.ListSidebar = Class.extend({
 	make: function() {
 		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 overlay-sidebar hidden-xs hidden-sm"></div>')
+		this.sidebar = $('<div class="list-sidebar overlay-sidebar hidden-xs hidden-sm"></div>')
 			.html(sidebar_content)
 			.appendTo(this.page.sidebar.empty());
 
-		this.sidebar = this.page_sidebar.add(this.offcanvas_list_sidebar);
-
 		this.setup_reports();
 		this.setup_assigned_to_me();
 		this.setup_list_view_switching();
@@ -80,10 +77,6 @@ frappe.views.ListSidebar = Class.extend({
 		this.page.sidebar.find(".assigned-to-me a").on("click", function() {
 			me.doclistview.assigned_to_me();
 		});
-
-		this.offcanvas_list_sidebar.find(".assigned-to-me a").on("click", function() {
-			me.doclistview.assigned_to_me();
-		});
 	},
 	setup_list_view_switching: function() {
 		var me = this;
@@ -169,7 +162,6 @@ frappe.views.ListSidebar = Class.extend({
 				var fieldname = $(this).attr('data-field');
 				var label = $(this).attr('data-label');
 				me.set_filter(fieldname, label);
-				return false;
 			})
 			.appendTo(this.sidebar);
 	},

frappe/public/js/frappe/ui/toolbar/offcanvas_left_sidebar.html

@@ -1,48 +0,0 @@
-<div class="main-menu">
-	<form role="search" onsubmit="return false;">
-		<div class="form-group form-group-sm">
-			<input id="sidebar-search" type="text" class="form-control"
-				placeholder="{%= __("Search or type a command") %}" aria-haspopup="true">
-			<span class="octicon octicon-search navbar-search-icon"></span>
-		</div>
-	</form>
-	<ul class="list-unstyled sidebar-menu">
-		<li class="divider"></li>
-		<li><a href="#" class="strong">{%= __("Home") %}</a></li>
-	</ul>
-	<div class="form-sidebar" style="display: none">
-
-	</div>
-	<div class="list-sidebar" style="display: none">
-
-	</div>
-	<div class="module-sidebar" style="display: none">
-
-	</div>
-	<ul class="desk-sidebar list-unstyled sidebar-menu" style="display: none">
-		<li class="divider"></li>
-		<li><a href="#" onclick="return frappe.ui.toolbar.show_about();">
-			{%= __("About") %}</a></li>
-		<li><a href="https://frappe.io" target="_blank" data-link="docs">
-			{%= __("Documentation") %}</a></li>
-		<li><a href="https://discuss.erpnext.com" target="_blank">
-			{%= __("Forums") %}</a></li>
-		<li><a href="https://github.com/frappe/frappe/issues" target="_blank" data-link="issues">
-			{%= __("Report an Issue") %}</a></li>
-		<li><a href="#" onclick="return frappe.ui.toolbar.clear_cache();">
-	        {%= __("Reload") %}</a></li>
-	    <li><a href="/index" target="_blank">
-	        {%= __("View Website") %}</a></li>
-	</ul>
-</div>
-<div class="user-menu clearfix">
-	<div class="pull-left text-ellipsis" style="max-width: 75%;">
-		<a href="#Form/User/{%= encodeURIComponent(user) %}">
-			<img src="{%= frappe.user_info().image %}" class="navbar-user-image" alt="{%= frappe.user.abbr() %}">
-			<span>{%= frappe.user.full_name() %}</span>
-		</a>
-	</div>
-	<div class="pull-right" style="margin-top: 4px;">
-		<a onclick="return frappe.app.logout();"><i class="octicon octicon-sign-out"></i></a>
-	</div>
-</div>

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

@@ -8,9 +8,7 @@ frappe.ui.toolbar.Toolbar = Class.extend({
 		var header = $('header').append(frappe.render_template("navbar", {
 			avatar: frappe.avatar(frappe.session.user)
 		}));
-		var sidebar = $('.offcanvas .sidebar-left').append(frappe.render_template("offcanvas_left_sidebar", {}));
 
-		// header.find(".toggle-sidebar").on("click", frappe.ui.toolbar.toggle_left_sidebar);
 		header.find(".toggle-sidebar").on("click", function () {
 			var layout_side_section = $('.layout-side-section');
 			var overlay_sidebar = layout_side_section.find('.overlay-sidebar');
@@ -20,28 +18,22 @@ frappe.ui.toolbar.Toolbar = Class.extend({
 
 			$('<div class="close-sidebar">').hide().appendTo(layout_side_section).fadeIn();
 
-			var offcanvas_container = $('body').find('.offcanvas-container');
-			offcanvas_container.css("overflow-y", "hidden");
+			var scroll_container = $('html');
+			scroll_container.css("overflow-y", "hidden");
 
 			layout_side_section.find(".close-sidebar").on('click', close_sidebar);
+			layout_side_section.on("click", "a", 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-y", "visible");
+			function close_sidebar(e) {
+				scroll_container.css("overflow-y", "");
 
 				layout_side_section.find(".close-sidebar").fadeOut(function() {
+					overlay_sidebar.removeClass('opened').find('.dropdown-toggle').removeClass('text-muted');
 					overlay_sidebar.find('.reports-dropdown').addClass('dropdown-menu');
 				});
 			}
 		});
 
-		header.find(".toggle-navbar-new-comments").on("click", function() {
-			$(".offcanvas").toggleClass("active-right").removeClass("active-left");
-			return false;
-		});
-
 		$(document).on("notification-update", function() {
 			frappe.ui.notifications.update_notifications();
 		});
@@ -83,10 +75,6 @@ $.extend(frappe.ui.toolbar, {
 			frappe.ui.toolbar.get_menu(menu) : menu;
 
 		$('<li class="divider custom-menu"></li>').prependTo(menu);
-	},
-	toggle_left_sidebar: function() {
-		$(".offcanvas").toggleClass("active-left").removeClass("active-right");
-		return false;
 	}
 });
 

frappe/public/js/legacy/form.js

@@ -114,6 +114,7 @@ _f.Frm.prototype.setup = function() {
 			frm: this,
 			parent: $('<div>').appendTo(this.page.main.parent())
 		})
+		$("body").attr("data-sidebar", 1);	
 	}
 	this.setup_drag_drop();
 

frappe/public/less/docs.less

@@ -1,5 +1,4 @@
 @import "variables.less";
-@import "offcanvas-website.less";
 @import "navbar.less";
 
 body {
@@ -391,15 +390,6 @@ a.edit, a.edit:hover, a.edit:focus, a.edit:visited, .edit-container .icon {
  font-size:16px;
 }
 
-// @media (max-width: 767px) {
-//   .offcanvas-container,
-//   .offcanvas,
-//   .offcanvas-main-section {
-//     position: relative;
-//    width:50%;
-//   }
-// }
-
 .hero-and-content [data-html-block="hero"] {
 	overflow-y: hidden;
 }

frappe/public/less/mobile.less

@@ -1,6 +1,21 @@
 @import "variables.less";
 @import "mixins.less";
-@import "offcanvas.less";
+
+html {
+	min-height: 100%;
+}
+
+body {
+	height: 100%;
+	 // The html and body elements cannot have any padding or margin. 
+	margin: 0px;
+	padding: 0px !important;
+}
+
+html,
+body {
+	overflow-x: hidden;  //Prevent scroll on narrow devices 
+}
 
 @media(max-width: 991px) {
 	.intro-area,
@@ -72,6 +87,12 @@
 	#navbar-breadcrumbs {
 		margin: 0px;
 		display: inline-block;
+
+		li {
+			max-width: 150px;
+			white-space: nowrap;
+			overflow: hidden;
+		}
 	}
 
 	#navbar-breadcrumbs > li,
@@ -93,8 +114,6 @@
 		margin: 0px;
 	}
 
-	.offcanvas-mobile-mixin();
-
 	.sidebar .form-group {
 		margin-bottom: 0px;
 	}

frappe/public/less/offcanvas-website.less

@@ -1,31 +0,0 @@
-@import "offcanvas.less";
-
-@media (max-width: 767px) {
-	.page-content {
-		min-height: 200px;
-	}
-
-	.offcanvas-mobile-mixin();
-
-	.offcanvas {
-		.navbar-form {
-			margin: 0px;
-		}
-		.sidebar ul {
-			margin: 0px;
-		}
-
-		.sidebar-page-sidebar {
-			border-top: 1px solid @border-color;
-		}
-
-		.sidebar-label {
-			text-transform: uppercase;
-			color: @text-muted;
-			font-size: 85%;
-			margin: 0px;
-			font-weight: bold;
-			padding: 10px 15px 0px;
-		}
-	}
-}

frappe/public/less/offcanvas.less

@@ -1,138 +0,0 @@
-@import "variables.less";
-
-html {
-	min-height: 100%;
-}
-
-body {
-	height: 100%;
-	/* The html and body elements cannot have any padding or margin. */
-	margin: 0px;
-	padding: 0px !important;
-}
-
-html,
-body {
-	overflow-x: hidden; /* Prevent scroll on narrow devices */
-}
-
-.offcanvas-main-section-overlay {
-	display: none;
-	cursor: pointer;
-	opacity: 0.5;
-}
-
-.sidebar-padding {
-	padding: 12px 14px;
-}
-
-.offcanvas .sidebar {
-	.sidebar-menu > li > .btn-group,
-	.sidebar-menu > li > a,
-	.dropdown-menu > li > a {
-		.sidebar-padding;
-		display: block;
-		whitespace: nowrap;
-		transition: 0.2s;
-		text-decoration: none !important;
-	}
-
-	.dropdown-menu {
-		padding: 0px;
-		font-size: inherit;
-	}
-
-	.dropdown-menu > li > a {
-		padding-left: 28px;
-	}
-
-	.divider {
-	    height: 1px;
-	    overflow: hidden;
-	    background-color: @navbar-default-border;
-		width: 100%;
-		margin: 0px;
-	}
-
-	.badge {
-		right: 15px !important;
-		top: 11px !important;
-	}
-}
-
-.offcanvas .sidebar .sidebar-menu > li > a&,
-.offcanvas .sidebar .dropdown-menu > li > a& {
-	&:hover,
-	&:focus,
-	&:active {
-		background-color: @btn-bg;
-	}
-}
-
-.offcanvas-mobile-mixin() {
-	.offcanvas {
-		transition: 0.25s;
-	}
-
-	.offcanvas-main-section-overlay {
-		bottom: 0;
-		position: fixed;
-	}
-
-	.offcanvas-container,
-	.offcanvas,
-	.offcanvas-main-section {
-		position: absolute;
-		left: 0;
-		right: 0;
-		top: 0;
-		bottom: 0;
-	}
-
-	.offcanvas.active-left,
-	.offcanvas.active-right {
-		position: fixed;
-	}
-
-	.offcanvas.active-left .offcanvas-main-section-overlay,
-	.offcanvas.active-right .offcanvas-main-section-overlay {
-		z-index: 1031;
-		display: block;
-		bottom: 0;
-	}
-
-	.offcanvas.active-left {
-		-webkit-transform: translate3d(75%, 0, 0);
-		transform: translate3d(75%, 0, 0);
-	}
-
-	.offcanvas.active-right {
-		-webkit-transform: translate3d(-75%, 0, 0);
-		transform: translate3d(-75%, 0, 0);
-	}
-
-	.offcanvas .sidebar {
-		position: fixed;
-		// position: absolute;
-		top: 0;
-		bottom: 0;
-		width: 75%; /* 9 columns */
-		overflow-x: hidden;
-		overflow-y: auto;
-		font-size: 12px;
-	}
-
-	.offcanvas .sidebar-right {
-		left: 100%;
-		border-left: 1px solid @border-color;
-	}
-
-	.offcanvas .sidebar-left {
-		right: 100%;
-		border-right: 1px solid @border-color;
-	}
-
-	.offcanvas .sidebar-menu {
-		margin-bottom: 0;
-	}
-}

frappe/public/less/sidebar.less

@@ -1,6 +1,21 @@
 @import "variables.less";
 @import "mixins.less";
-@import "offcanvas.less";
+
+html {
+	min-height: 100%;
+}
+
+body {
+	height: 100%;
+	 // The html and body elements cannot have any padding or margin. 
+	margin: 0px;
+	padding: 0px !important;
+}
+
+html,
+body {
+	overflow-x: hidden;  //Prevent scroll on narrow devices 
+}
 
 .hide-form-sidebar {
 	.form-sidebar {
@@ -8,6 +23,10 @@
 	}
 }
 
+.sidebar-padding {
+	padding: 12px 14px;
+}
+
 body[data-route=""] .main-menu,
 body[data-route="desk"] .main-menu {
 	.desk-sidebar {

frappe/public/less/website.less

@@ -496,8 +496,6 @@ a.active {
 	padding-left: 30px;
 }
 
-@import "offcanvas-website.less";
-
 @media (min-width: 768px) {
 	.login-wrapper {
 		border-right: 1px solid #f2f2f2;

frappe/templates/autodoc/base_template.html

@@ -36,74 +36,62 @@
 	{%- endblock -%}
 </head>
 <body data-path="{{ path }}">
-	<div class="offcanvas-container">
-		<div class="offcanvas">
-			<div class="offcanvas-main-section">
-				<div>
-					{%- block banner -%}
-					{% include "templates/includes/banner_extension.html" ignore missing %}
-						{% if banner_html -%}
-						<header class="container">{{ banner_html or "" }}</header>
-						{%- endif %}
-					{%- endblock -%}
+	<div class="main-section">
+		<div>
+			{%- block banner -%}
+			{% include "templates/includes/banner_extension.html" ignore missing %}
+				{% if banner_html -%}
+				<header class="container">{{ banner_html or "" }}</header>
+				{%- endif %}
+			{%- endblock -%}
 
-					{%- block navbar -%}
-                        {% include "templates/includes/navbar/navbar.html" %}
-                    {%- endblock -%}
-                    <div class="hero-and-content">
-                        <div data-html-block="hero">
-    					{%- block hero -%}{%- endblock -%}
-                        </div>
-                        <div class="container" data-html-block="content">
-                        {% block content %}{% endblock %}
-						<!-- edit-link -->
-                        </div>
-                    </div>
-					<footer class="docs-footer">
-						<div class="container">
-						{%- if footer is defined -%}{{ footer }}{%- endif -%}
+			{%- block navbar -%}
+                {% include "templates/includes/navbar/navbar.html" %}
+            {%- endblock -%}
+            <div class="hero-and-content">
+                <div data-html-block="hero">
+				{%- block hero -%}{%- endblock -%}
+                </div>
+                <div class="container" data-html-block="content">
+                {% block content %}{% endblock %}
+				<!-- edit-link -->
+                </div>
+            </div>
+			<footer class="docs-footer">
+				<div class="container">
+				{%- if footer is defined -%}{{ footer }}{%- endif -%}
 
-                        <div class="built-with-frappe text-center">
-                            <img class="frappe-bird" src="{{ docs_base_url }}/assets/img/frappe-bird-grey.svg">
-                            <h3>By {{ app.publisher }}</h3>
-                        </div>
-                        <div class="text-center">
-                            <ul class="list-unstyled">
-                                <li>
-                                    <a href="{{ app.source_link }}">
-                                    Source</a>
-                                </li>
-                                <li>
-                                    <a href="{{ app.source_link }}/issues">
-                                    Issues</a>
-                                </li>
-                                <li>
-                                    <a href="{{ docs_base_url }}/license.html">
-                                    License</a>
-                                </li>
-                                <li>
-                                    <a href="https://discuss.erpnext.com">
-                                    Forum</a>
-                                </li>
-                                <li>
-                                    <a href="https://frappe.io/apps">
-                                    Frappe Apps</a>
-                                </li>
-                            </ul>
-                        </div>
+                <div class="built-with-frappe text-center">
+                    <img class="frappe-bird" src="{{ docs_base_url }}/assets/img/frappe-bird-grey.svg">
+                    <h3>By {{ app.publisher }}</h3>
+                </div>
+                <div class="text-center">
+                    <ul class="list-unstyled">
+                        <li>
+                            <a href="{{ app.source_link }}">
+                            Source</a>
+                        </li>
+                        <li>
+                            <a href="{{ app.source_link }}/issues">
+                            Issues</a>
+                        </li>
+                        <li>
+                            <a href="{{ docs_base_url }}/license.html">
+                            License</a>
+                        </li>
+                        <li>
+                            <a href="https://discuss.erpnext.com">
+                            Forum</a>
+                        </li>
+                        <li>
+                            <a href="https://frappe.io/apps">
+                            Frappe Apps</a>
+                        </li>
+                    </ul>
+                </div>
 
-                    </div>
-					</footer>
-				</div>
-			</div>
-			<div class="modal-backdrop offcanvas-main-section-overlay"></div>
-			<div class="sidebar sidebar-right visible-xs">
-				{% block offcanvas_sidebar -%}
-				<div class="sidebar-navbar-items">
-					{% include "templates/includes/navbar/navbar_items.html" %}
-				</div>
-				{%- endblock %}
-			</div>
+            </div>
+			</footer>
 		</div>
 	</div>
 

frappe/templates/base.html

@@ -46,48 +46,36 @@
     </script>
 </head>
 <body data-path="{{ path }}">
-	<div class="offcanvas-container">
-		<div class="offcanvas">
-			<div class="offcanvas-main-section">
-				<div>
-					{%- block banner -%}
-					{% include "templates/includes/banner_extension.html" ignore missing %}
-						{% if banner_html -%}
-						<header class="container">{{ banner_html or "" }}</header>
-						{%- endif %}
-					{%- endblock -%}
+	<div class="main-section">
+		<div>
+			{%- block banner -%}
+			{% include "templates/includes/banner_extension.html" ignore missing %}
+				{% if banner_html -%}
+				<header class="container">{{ banner_html or "" }}</header>
+				{%- endif %}
+			{%- endblock -%}
 
-					{%- block navbar -%}
-                        {% include "templates/includes/navbar/navbar.html" %}
-                    {%- endblock -%}
-                    <div class="hero-and-content">
-                        <div data-html-block="hero">
-    					{%- block hero -%}{%- endblock -%}
-                        </div>
-                        <div class="container" data-html-block="content">
-                        {% block content %}{% endblock %}
-                        </div>
-                    </div>
-					{%- if footer is defined -%}
-					<footer class="page-footer">
-						<div class="container">
-							{{ footer }}
-						</div>
-					</footer>
-					{%- endif -%}
+			{%- block navbar -%}
+                {% include "templates/includes/navbar/navbar.html" %}
+            {%- endblock -%}
+            <div class="hero-and-content">
+                <div data-html-block="hero">
+				{%- block hero -%}{%- endblock -%}
+                </div>
+                <div class="container" data-html-block="content">
+                {% block content %}{% endblock %}
+                </div>
+            </div>
+			{%- if footer is defined -%}
+			<footer class="page-footer">
+				<div class="container">
+					{{ footer }}
 				</div>
-				<div>
-					{%- block footer -%}{% include "templates/includes/footer/footer.html" %}{%- endblock -%}
-				</div>
-			</div>
-			<div class="modal-backdrop offcanvas-main-section-overlay"></div>
-			<div class="sidebar sidebar-right visible-xs">
-				{% block offcanvas_sidebar -%}
-				<div class="sidebar-navbar-items">
-					{% include "templates/includes/navbar/navbar_items.html" %}
-				</div>
-				{%- endblock %}
-			</div>
+			</footer>
+			{%- endif -%}
+		</div>
+		<div>
+			{%- block footer -%}{% include "templates/includes/footer/footer.html" %}{%- endblock -%}
 		</div>
 	</div>
 

frappe/website/js/website.js

@@ -296,7 +296,6 @@ $.extend(frappe, {
 			if(e.which===13 && val) {
 				$(this).val("").blur();
 				frappe.do_search(val);
-				$(".offcanvas").removeClass("active-left active-right");
 				return false;
 			}
 		});
@@ -375,21 +374,6 @@ $(document).ready(function() {
 
 	frappe.bind_navbar_search();
 
-	$(".toggle-sidebar").on("click", function() {
-		$(".offcanvas").addClass("active-right");
-		return false;
-	});
-
-	// collapse offcanvas sidebars!
-	$(".offcanvas .sidebar").on("click", "a", function() {
-		$(".offcanvas").removeClass("active-left active-right");
-	});
-
-	$(".offcanvas-main-section-overlay").on("click", function() {
-		$(".offcanvas").removeClass("active-left active-right");
-		return false;
-	});
-
 	// switch to app link
 	if(getCookie("system_user")==="yes" && logged_in) {
 		$("#website-post-login .dropdown-menu").append('<li><a href="/desk">Switch To Desk</a></li>');

frappe/www/desk.html

@@ -22,19 +22,10 @@
 	<div class="centered splash" style="width: 200px; height: 200px;">
         <img src="{{ splash_image or "/assets/frappe/images/frappe-bird-thin.svg" }}">
     </div>
-	<div class="offcanvas-container">
-		<div class="offcanvas">
-			<div class="offcanvas-main-section">
-				<header></header>
-				<div id="body_div"></div>
-				<footer></footer>
-			</div>
-			<div class="modal-backdrop offcanvas-main-section-overlay"></div>
-			<div class="sidebar sidebar-left visible-xs visible-sm"></div>
-			<div class="sidebar sidebar-right visible-xs visible-sm">
-				<ul class="list-unstyled sidebar-menu" id="sidebar-notification"></ul>
-			</div>
-		</div>
+	<div class="main-section">
+		<header></header>
+		<div id="body_div"></div>
+		<footer></footer>
 	</div>
 
 	<!-- hack! load background image asap, before desktop is rendered -->