vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

refactor: overlay sidebar for smaller screens

Browse source
This commit is contained in:
prssanna 2020-12-09 18:47:59 +05:30
parent 48786b7d99
commit d5f1d99368
5 changed files with 31 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
frappe/public/js/frappe/form/templates/form_sidebar.html
View file

@ -1,10 +1,3 @@
<ul class="list-unstyled sidebar-menu visible-sm visible-xs">
<li>
<a class="navbar-home" href="#">
<img class="app-logo" src="{{ frappe.app.logo_url }}">
</a>
</li>
</ul>
<ul class="list-unstyled sidebar-menu user-actions hidden"></ul>
<ul class="list-unstyled sidebar-menu sidebar-image-section hidden-xs hidden-sm hide">
<li class="sidebar-image-wrapper">
@ -165,7 +158,3 @@
{% if(frappe.get_form_sidebar_extension) { %}
{{ frappe.get_form_sidebar_extension() }}
{% } %}
<ul class="list-unstyled visible-xs visible-sm">
<li class="close-sidebar">Close</li>
</ul>

2
frappe/public/js/frappe/list/list_sidebar_group_by.js
View file

@ -55,7 +55,7 @@ frappe.views.ListGroupBy = class ListGroupBy {
<div class="list-group-by-fields">
</div>
<li class="add-list-group-by sidebar-action">
<a class="add-group-by hidden-xs">
<a class="add-group-by">
${__('Edit Filters')}
</a>
</li>

26
frappe/public/js/frappe/ui/page.js
View file

@ -163,12 +163,36 @@ frappe.ui.Page = Class.extend({
} else {
sidebar_toggle.attr("title", __("Toggle Sidebar")).tooltip();
sidebar_toggle.click(() => {
sidebar_wrapper.toggle();
if (frappe.utils.is_xs() || frappe.utils.is_sm()) {
this.setup_overlay_sidebar();
} else {
sidebar_wrapper.toggle();
}
this.update_sidebar_icon();
});
}
},
setup_overlay_sidebar() {
let overlay_sidebar = this.sidebar.find('.overlay-sidebar')
.addClass('opened');
$('<div class="close-sidebar">').hide().appendTo(this.sidebar).fadeIn();
let scroll_container = $('html')
.css("overflow-y", "hidden");
this.sidebar.find(".close-sidebar").on('click', (e) => close_sidebar(e));
this.sidebar.on("click", "button:not(.dropdown-toggle)", (e) => close_sidebar(e));
let close_sidebar = (e) => {
scroll_container.css("overflow-y", "");
this.sidebar.find("div.close-sidebar").fadeOut(() => {
overlay_sidebar.removeClass('opened')
.find('.dropdown-toggle')
.removeClass('text-muted');
});
}
},
update_sidebar_icon() {
let sidebar_toggle = $('.page-head').find('.sidebar-toggle-btn');
let sidebar_wrapper = this.wrapper.find('.layout-side-section');

37
frappe/public/js/frappe/ui/toolbar/toolbar.js
View file

@ -18,7 +18,7 @@ frappe.ui.toolbar.Toolbar = class {
}
make () {
this.setup_sidebar();
// this.setup_sidebar();
this.setup_help();
this.bind_events();
@ -44,41 +44,6 @@ frappe.ui.toolbar.Toolbar = class {
});
}
setup_sidebar () {
var header = $('header');
header.find(".toggle-sidebar").on("click", function() {
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 hidden-sm');
$('<div class="close-sidebar">').hide().appendTo(layout_side_section).fadeIn();
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:not(.dropdown-toggle)", close_sidebar);
function close_sidebar(e) {
scroll_container.css("overflow-y", "");
layout_side_section.find("div.close-sidebar").fadeOut(function() {
overlay_sidebar.removeClass('opened')
.find('.dropdown-toggle')
.removeClass('text-muted');
overlay_sidebar.find('.reports-dropdown')
.addClass('dropdown-menu');
});
}
});
}
setup_help () {
frappe.provide('frappe.help');

43
frappe/public/scss/desk/sidebar.scss
View file

@ -205,16 +205,17 @@ body[data-route^="Module"] .main-menu {
@media (max-width: 991px) {
margin-top: 0 !important;
position: fixed;
background: white;
background: var(--fg-color);
top: 0;
left: 0;
transform: translateX(-110%);
z-index: 9999;
box-shadow: 5px 0 25px 0px rgba(0, 0, 0, 0.3);
box-shadow: var(--shadow-base);
height: 100%;
width: 40%;
display: block !important;
transition: transform 200ms ease-in-out;
padding: var(--padding-md);
&.opened {
transform: translateX(0);
@ -227,40 +228,10 @@ body[data-route^="Module"] .main-menu {
opacity: 0.7;
}
li:not(.divider):not(.tagit-new):not(.module-sidebar-item) {
padding: 10px 15px;
}
.modified-by,
.created-by {
margin: 0;
}
.badge {
top: 9px;
right: 15px;
}
.reports-dropdown {
margin-top: 10px;
margin-bottom: -10px;
li:not(.divider) {
padding: 12.5px 0 !important;
}
li.divider {
height: 0;
}
}
.sidebar-menu {
padding: 2px 0px 5px 0px;
}
}
@media (max-width: 767px) {
width: 70%;
width: 60%;
}
}
@ -275,12 +246,6 @@ body[data-route^="Module"] .main-menu {
width: 100%;
}
.sidebar-menu {
@media (max-width: 991px) {
margin: 0;
}
}
.module-sidebar-nav {
@media (max-width: 991px) {
padding-left: 0;