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

replace offcanvas with overlay list-sidebar

Browse source
This commit is contained in:
Faris Ansari 2016-07-06 17:52:48 +05:30
parent b3546f1ebc
commit ccc2de5773
4 changed files with 129 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
frappe/public/css/sidebar.css
View file

@ -249,6 +249,59 @@ body[data-route^="Module"] .main-menu .form-sidebar {
.layout-side-section .list-sidebar {
margin-top: -15px;
}
@media (max-width: 991px) {
.layout-side-section .list-sidebar {
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 .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 {
transform: translateX(0);
}
.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 {
margin: 10px 0;
}
.layout-side-section .list-sidebar .reports-dropdown li:not(.divider) {
padding: 10px 0;
}
}
@media (max-width: 767px) {
.layout-side-section .list-sidebar {
width: 70%;
}
.layout-side-section .list-sidebar.opened div.close-sidebar {
right: -42.857%;
width: 42.857%;
}
}
.sidebar-left .list-sidebar .stat-label,
.sidebar-left .list-sidebar .stat-no-records {
padding: 12px 14px;

13
frappe/public/js/frappe/list/list_sidebar.js
View file

@ -20,9 +20,20 @@ frappe.views.ListSidebar = Class.extend({
this.offcanvas_list_sidebar = $(".offcanvas .list-sidebar").html(sidebar_content);
this.page_sidebar = $('<div class="list-sidebar hidden-xs hidden-sm"></div>')
.html(sidebar_content)
.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)
.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();

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

@ -10,7 +10,13 @@ frappe.ui.toolbar.Toolbar = Class.extend({
}));
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", 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');
});
header.find(".toggle-navbar-new-comments").on("click", function() {
$(".offcanvas").toggleClass("active-right").removeClass("active-left");

57
frappe/public/less/sidebar.less
View file

@ -255,6 +255,63 @@ 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;
i.octicon-x {
margin: -12px;
padding: 12px;
}
div.close-sidebar {
opacity: 0;
transition: opacity 300ms ease 200ms;
}
&.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;
}
}
.reports-dropdown {
margin: 10px 0;
li:not(.divider) {
padding: 10px 0;
}
}
}
@media (max-width: 767px) {
width: 70%;
&.opened div.close-sidebar {
right: -42.857%;
width: 42.857%;
}
}
}
.sidebar-left .list-sidebar {
.stat-label,
.stat-no-records {