From 629631c36c13bee0239e57ccf052abaef1477a85 Mon Sep 17 00:00:00 2001 From: Faris Ansari Date: Wed, 13 Jul 2016 14:52:46 +0530 Subject: [PATCH] overlay sidebar for list and form view --- frappe/public/css/sidebar.css | 48 +++++----- frappe/public/js/frappe/form/sidebar.js | 2 +- frappe/public/js/frappe/list/list_sidebar.js | 15 +--- frappe/public/js/frappe/ui/toolbar/toolbar.js | 25 +++++- frappe/public/less/sidebar.less | 88 +++++++++---------- 5 files changed, 88 insertions(+), 90 deletions(-) diff --git a/frappe/public/css/sidebar.css b/frappe/public/css/sidebar.css index d551eb74a3..2a35f0497b 100644 --- a/frappe/public/css/sidebar.css +++ b/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, diff --git a/frappe/public/js/frappe/form/sidebar.js b/frappe/public/js/frappe/form/sidebar.js index a3ccd8c74e..d0ad1c8f7d 100644 --- a/frappe/public/js/frappe/form/sidebar.js +++ b/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 = $('') + this.page_sidebar = $('') .html(sidebar_content) .appendTo(this.page.sidebar.empty()); diff --git a/frappe/public/js/frappe/list/list_sidebar.js b/frappe/public/js/frappe/list/list_sidebar.js index 6a84925d33..aa353fedef 100644 --- a/frappe/public/js/frappe/list/list_sidebar.js +++ b/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 = $('') - .html('') - .append('
') - .append(sidebar_content) + this.page_sidebar = $('') + .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(); diff --git a/frappe/public/js/frappe/ui/toolbar/toolbar.js b/frappe/public/js/frappe/ui/toolbar/toolbar.js index 899983adc3..ee543aeb22 100644 --- a/frappe/public/js/frappe/ui/toolbar/toolbar.js +++ b/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'); + + $('
').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() { diff --git a/frappe/public/less/sidebar.less b/frappe/public/less/sidebar.less index 86394588d6..65d25397a4 100644 --- a/frappe/public/less/sidebar.less +++ b/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; } } }