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

[design] module sidebar

Browse source
This commit is contained in:
Anand Doshi 2015-01-28 13:21:04 +05:30
parent f398754c6f
commit 9ac20f20ff
12 changed files with 91 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
frappe/public/css/mobile.css
View file

@ -3,9 +3,6 @@
padding-left: 0px;
padding-right: 0px;
}
.module-sidebar-nav {
margin-right: 0px;
}
.layout-main-section {
border-left: none;
border-right: none;
@ -78,10 +75,6 @@
.navbar-nav {
margin: 0px;
}
.mobile-module-icon {
padding: 17px 15px 0px;
margin-bottom: -15px;
}
.offcanvas,
.page-head,
.sidebar-right,
@ -193,4 +186,9 @@
.sidebar .user-menu img {
margin-top: -1px;
}
body[data-route^="Module"] .navbar-center {
display: block !important;
position: absolute;
top: 10px;
}
}

3
frappe/public/css/module.css
View file

@ -30,9 +30,6 @@
margin-top: 2px;
display: block !important;
}
.module-sidebar-nav {
margin-right: -15px;
}
.module-item-progress {
margin-bottom: 10px;
height: 17px;

5
frappe/public/css/navbar.css
View file

@ -65,3 +65,8 @@
overflow-y: auto;
overflow-x: hidden;
}
.navbar-center {
float: left;
font-weight: bold;
color: #6c7680;
}

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

@ -7,6 +7,9 @@
border-bottom: 1px solid #212a33;
color: #212a33;
}
.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;
@ -21,24 +24,30 @@ body[data-route^="List"] .main-menu .list-sidebar {
body[data-route^="List"] .main-menu .form-sidebar {
display: none !important;
}
body[data-route^="Module"] .main-menu .module-sidebar {
display: block !important;
}
body[data-route^="Module"] .main-menu .form-sidebar {
display: none !important;
}
.sidebar-padding {
padding: 12px 14px;
}
.sidebar-left .sidebar-menu > li > a {
.offcanvas .sidebar .sidebar-menu > li > a {
padding: 12px 14px;
display: block;
whitespace: nowrap;
transition: 0.2s;
}
.sidebar-left .divider {
.offcanvas .sidebar .divider {
height: 1px;
overflow: hidden;
background-color: #ebeff2;
width: 100%;
}
.sidebar-left .sidebar-menu > li > a:hover,
.sidebar-left .sidebar-menu > li > a:focus,
.sidebar-left .sidebar-menu > li > a:active {
.offcanvas .sidebar .sidebar-menu > li > a:hover,
.offcanvas .sidebar .sidebar-menu > li > a:focus,
.offcanvas .sidebar .sidebar-menu > li > a:active {
background-color: #f0f4f7;
}
.layout-side-section {
@ -65,6 +74,7 @@ body[data-route^="List"] .main-menu .form-sidebar {
.sidebar-menu .badge {
position: absolute;
right: 15px;
font-weight: normal;
}
.sidebar-menu .octicon {
font-size: 12px;
@ -144,3 +154,6 @@ a.close:active,
a.close:focus {
border-color: transparent !important;
}
.layout-side-section .module-sidebar-nav {
margin-top: 15px;
}

1
frappe/public/js/frappe/ui/toolbar/navbar.html
View file

@ -8,6 +8,7 @@
<ul class="nav navbar-nav text-ellipsis" id="navbar-breadcrumbs">
</ul>
</div>
<div class="navbar-center" style="display: none; left: calc(50% - 42px);"></div>
<ul class="nav navbar-nav navbar-right visible-xs visible-sm">
<li>
<a class="toggle-navbar-new-comments" title="{%= __("Unread Messages") %}">

3
frappe/public/js/frappe/ui/toolbar/offcanvas_left_sidebar.html
View file

@ -15,6 +15,9 @@
</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>

5
frappe/public/js/frappe/views/module/module_sidebar.html
View file

@ -1,6 +1,7 @@
<ul class="nav nav-pills nav-stacked module-sidebar-nav hidden-xs">
<ul class="module-sidebar-nav">
<li class="divider"></li>
{% for (var i=0, l= data.data.length; i < l; i++) { var item = data.data[i]; %}
<li data-label="{%= item.label %}" class="h6 module-sidebar-item">
<li data-label="{%= item.label %}" class="strong module-sidebar-item">
<a class="module-link">
<i class="icon icon-chevron-right pull-right" style="display: none;"></i>
<span>{%= item.label %}</span></a>

41
frappe/public/js/frappe/views/module/moduleview.js
View file

@ -57,10 +57,12 @@ frappe.get_module = function(m) {
frappe.views.moduleview.ModuleView = Class.extend({
init: function(module) {
this.module = module;
this.module_info = frappe.get_module(module);
this.module_info = frappe.get_module(module) || {};
this.module_label = __(this.module_info.label || this.module);
this.sections = {};
this.current_section = null;
this.make();
$(".navbar-center").html(this.module_label);
},
make: function() {
@ -76,8 +78,6 @@ frappe.views.moduleview.ModuleView = Class.extend({
frappe.views.moduleview[me.module] = me.parent;
me.page = me.parent.page;
me.parent.moduleview = me;
me.page.set_title(__(frappe.modules[me.module]
&& frappe.modules[me.module].label || me.module));
me.render();
}
});
@ -95,22 +95,18 @@ frappe.views.moduleview.ModuleView = Class.extend({
this.activate(this.data.data[0].label);
},
make_title: function(name) {
this.page_title = this.page.wrapper.find(".page-title").addClass("hidden-xs hidden-sm");
this.page.wrapper.find(".mobile-title, .mobile-module-icon").remove();
$(frappe.render_template("module_title", {
title: this.page_title.find("h1").html(),
section_name: name,
data: this.data
})).insertAfter(this.page_title);
},
make_sidebar: function(name) {
var me = this;
$(frappe.render_template("module_sidebar", {data:this.data})).appendTo(this.page.sidebar);
var sidebar_content = frappe.render_template("module_sidebar", {data:this.data});
var module_sidebar = $(sidebar_content)
.addClass("nav nav-pills nav-stacked")
.appendTo(this.page.sidebar.addClass("hidden-xs hidden-sm"));
var offcanvas_module_sidebar = $(sidebar_content)
.addClass("list-unstyled sidebar-menu")
.appendTo($(".sidebar-left .module-sidebar"));
this.page.wrapper.on("click", ".module-link", function() {
this.sidebar = offcanvas_module_sidebar.add(module_sidebar);
this.sidebar.on("click", ".module-link", function() {
me.activate($(this).parent().attr("data-label"));
});
},
@ -131,15 +127,18 @@ frappe.views.moduleview.ModuleView = Class.extend({
});
});
}
// set title
this.page.set_title(repl('<span class="hidden-xs hidden-sm">%(module)s</span>\
<span class="hidden-md hidden-lg">%(section)s</span>',
{module: this.module_label, section: name}));
this.current_section = this.sections[name];
this.current_section.removeClass("hide");
// active
this.page.sidebar.find("li.active").removeClass("active");
this.page.sidebar.find('[data-label="'+ name +'"]').addClass("active");
// make mobile title
this.make_title(name);
this.sidebar.find("li.active").removeClass("active");
this.sidebar.find('[data-label="'+ name +'"]').addClass("active");
frappe.app.update_notification_count_in_modules();
},

17
frappe/public/less/mobile.less
View file

@ -7,10 +7,6 @@
padding-right: 0px;
}
.module-sidebar-nav {
margin-right: 0px;
}
.layout-main-section {
border-left: none;
border-right: none;
@ -105,11 +101,6 @@
margin: 0px;
}
.mobile-module-icon {
padding: 17px 15px 0px;
margin-bottom: -15px;
}
// Off Canvas
.offcanvas,
.page-head,
@ -239,4 +230,12 @@
margin-top: -1px;
}
// module view
body[data-route^="Module"] {
.navbar-center {
display: block !important;
position: absolute;
top: 10px;
}
}
}

4
frappe/public/less/module.less
View file

@ -39,10 +39,6 @@
display: block !important;
}
.module-sidebar-nav {
margin-right: -15px;
}
.module-item-progress {
margin-bottom: 10px;
height: 17px;

5
frappe/public/less/navbar.less
View file

@ -79,3 +79,8 @@
overflow-x: hidden;
}
.navbar-center {
float: left;
font-weight: bold;
color: @navbar-default-color;
}

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

@ -1,15 +1,19 @@
@import "variables.less";
@import "mixins.less";
.hide-form-sidebar {
.form-sidebar {
display: none !important;
}
}
body[data-route=""] .main-menu,
body[data-route="desk"] .main-menu {
.desk-sidebar {
display: block !important;
}
.form-sidebar {
display: none !important;
}
.hide-form-sidebar;
}
body[data-route^="List"] .main-menu {
@ -17,16 +21,22 @@ body[data-route^="List"] .main-menu {
display: block !important;
}
.form-sidebar {
display: none !important;
.hide-form-sidebar;
}
body[data-route^="Module"] .main-menu {
.module-sidebar {
display: block !important;
}
.hide-form-sidebar;
}
.sidebar-padding {
padding: 12px 14px;
}
.sidebar-left {
.offcanvas .sidebar {
.sidebar-menu > li > a {
.sidebar-padding;
display: block;
@ -42,7 +52,7 @@ body[data-route^="List"] .main-menu {
}
}
.sidebar-left .sidebar-menu > li > a& {
.offcanvas .sidebar .sidebar-menu > li > a& {
&:hover,
&:focus,
&:active {
@ -79,6 +89,7 @@ body[data-route^="List"] .main-menu {
.badge {
position: absolute;
right: 15px;
font-weight: normal;
}
.octicon {
@ -188,3 +199,8 @@ a.close {
border-color: transparent !important;
}
}
// module sidebar
.layout-side-section .module-sidebar-nav {
margin-top: 15px;
}