[design] navbar height, started offcanvas sidebar
This commit is contained in:
Anand Doshi
parent
940b62e2cf
commit
6113e17871
22 changed files with 6984 additions and 1729 deletions
6609
frappe/public/css/bootstrap.css
vendored
6609
frappe/public/css/bootstrap.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -6,9 +6,26 @@ body {
|
|||
height: 100%;
|
||||
margin: 0px;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
/* Prevent scroll on narrow devices */
|
||||
}
|
||||
.desk-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.desk-main-section {
|
||||
width: 100%;
|
||||
}
|
||||
a,
|
||||
.badge,
|
||||
.btn {
|
||||
.btn,
|
||||
.ui-menu .ui-menu-item {
|
||||
transition: 0.2s;
|
||||
-webkit-transition: 0.2s;
|
||||
}
|
||||
|
|
@ -63,7 +80,7 @@ a.form-link {
|
|||
}
|
||||
.link-btn {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
top: 2px;
|
||||
right: 4px;
|
||||
background-color: #f5f7fa;
|
||||
border-radius: 2px;
|
||||
|
|
@ -159,6 +176,32 @@ ul.linked-with-list li {
|
|||
.ui-autocomplete a {
|
||||
transition: none;
|
||||
}
|
||||
.ui-autocomplete .ui-menu-item a:hover,
|
||||
.ui-autocomplete .ui-menu-item a:focus,
|
||||
.ui-autocomplete .ui-menu-item a:active {
|
||||
color: inherit;
|
||||
}
|
||||
.ui-widget-content {
|
||||
border-radius: 0px 0px 4px 4px;
|
||||
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.176);
|
||||
border-color: #d1d8dd;
|
||||
padding: 0px;
|
||||
}
|
||||
.ui-widget-content .ui-state-focus,
|
||||
.ui-widget-content .ui-state-hover {
|
||||
background-color: #f0f4f7 !important;
|
||||
color: #36414c !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
.ui-widget-content .ui-state-active {
|
||||
background-color: #5e64ff !important;
|
||||
color: #fff !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
.ui-menu .ui-menu-item {
|
||||
padding: 7px;
|
||||
font-size: 12px;
|
||||
}
|
||||
/* z-index hack */
|
||||
.ui-datepicker {
|
||||
z-index: 9999999 !important;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
#page-desktop {
|
||||
position: absolute;
|
||||
min-width: 100%;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 50px;
|
||||
margin-bottom: -50px;
|
||||
padding-top: 40px;
|
||||
border: 0px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
.case-wrapper {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@media (max-width: 767px) {
|
||||
@media screen and (max-width: 767px) {
|
||||
.layout-main > div[class^="col-sm-"],
|
||||
.form-section {
|
||||
padding-left: 0px;
|
||||
|
|
@ -46,24 +46,95 @@
|
|||
.page-head {
|
||||
min-height: 1px;
|
||||
}
|
||||
.nav > li > a {
|
||||
padding: 10px 0px;
|
||||
}
|
||||
.toggle-navbar-new-comments {
|
||||
padding: 8px 0px !important;
|
||||
}
|
||||
.navbar > .container > .navbar-header,
|
||||
.navbar > .container > .navbar-left {
|
||||
float: left;
|
||||
}
|
||||
.navbar > .container > .navbar-right {
|
||||
float: right;
|
||||
}
|
||||
.navbar-brand .octicon-home {
|
||||
margin-top: 4px;
|
||||
}
|
||||
.navbar .breadcrumb-divider {
|
||||
margin-top: 14px;
|
||||
margin-top: 3px !important;
|
||||
margin-right: 3px;
|
||||
}
|
||||
#navbar-breadcrumbs {
|
||||
margin: 0px;
|
||||
display: inline-block;
|
||||
}
|
||||
#navbar-breadcrumbs > li {
|
||||
float: left;
|
||||
display: block;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#navbar-breadcrumbs li:not(:nth-last-child(-n+2)) {
|
||||
display: none;
|
||||
}
|
||||
.navbar-nav {
|
||||
margin: 0px;
|
||||
}
|
||||
.mobile-module-icon {
|
||||
padding: 17px 15px 0px;
|
||||
margin-bottom: -15px;
|
||||
}
|
||||
.offcanvas,
|
||||
.page-head,
|
||||
.sidebar-offcanvas-right,
|
||||
.sidebar-offcanvas-left,
|
||||
.navbar-fixed-top {
|
||||
-webkit-transition: 0.25s;
|
||||
-o-transition: 0.25s;
|
||||
transition: 0.25s;
|
||||
}
|
||||
.offcanvas {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.offcanvas.active-left,
|
||||
.offcanvas.active-left .page-head,
|
||||
.offcanvas.active-left .navbar-fixed-top {
|
||||
left: 75%;
|
||||
/* 9 columns */
|
||||
right: -25%;
|
||||
}
|
||||
.offcanvas.active-right,
|
||||
.offcanvas.active-right .page-head,
|
||||
.offcanvas.active-right .navbar-fixed-top {
|
||||
right: 75%;
|
||||
/* 9 columns */
|
||||
left: -25%;
|
||||
}
|
||||
.offcanvas .sidebar-offcanvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 75%;
|
||||
/* 9 columns */
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.offcanvas .sidebar-offcanvas-right {
|
||||
right: -75%;
|
||||
/* 9 columns */
|
||||
}
|
||||
.offcanvas .sidebar-offcanvas-left {
|
||||
left: -75%;
|
||||
/* 9 columns */
|
||||
}
|
||||
.offcanvas.active-left .sidebar-offcanvas-left {
|
||||
left: 0;
|
||||
}
|
||||
.offcanvas.active-right .sidebar-offcanvas-right {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,20 @@
|
|||
.navbar .dropdown-toggle {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
line-height: 24px !important;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.navbar-fixed-top {
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
.navbar a {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.navbar .breadcrumb-divider {
|
||||
margin-top: 15px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.navbar .breadcrumb-divider i {
|
||||
color: #c0c9d2;
|
||||
color: #9d9d9d;
|
||||
}
|
||||
.navbar-icon-home {
|
||||
vertical-align: middle;
|
||||
|
|
@ -27,7 +30,6 @@
|
|||
.navbar-user-image {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-top: -2px;
|
||||
margin-right: 3px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
|
@ -39,10 +41,9 @@
|
|||
background-color: #ff5858;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 0px 5px;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
#navbar-search {
|
||||
margin-top: 1px;
|
||||
width: 300px;
|
||||
}
|
||||
.navbar .navbar-search-icon {
|
||||
|
|
@ -60,9 +61,6 @@
|
|||
#navbar-notification > li > a:active .badge {
|
||||
background-color: #D8DFE5;
|
||||
}
|
||||
.navbar-form {
|
||||
margin: 8px -15px;
|
||||
}
|
||||
#navbar-search-results {
|
||||
left: auto;
|
||||
right: inherit;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.page-container {
|
||||
margin-top: 48px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.page-head {
|
||||
border-bottom: 1px solid #d1d8dd;
|
||||
|
|
|
|||
|
|
@ -89,7 +89,6 @@ frappe.views.DocListView = frappe.ui.Listing.extend({
|
|||
},
|
||||
|
||||
init_headers: function() {
|
||||
console.log(this.listview.columns);
|
||||
var main = frappe.render_template("list_item_main_head", {columns: this.listview.columns});
|
||||
$(frappe.render_template("list_item_row_head",
|
||||
{main:main, list:this})).appendTo(this.page.main.find(".list-headers"));
|
||||
|
|
@ -126,9 +125,10 @@ frappe.views.DocListView = frappe.ui.Listing.extend({
|
|||
added && me.run();
|
||||
});
|
||||
this.$page.on("click", ".doclist-row", function(e) {
|
||||
var checkbox = $(this).find("input[type='checkbox']");
|
||||
var star = $(this).find(".icon-star");
|
||||
if ((checkbox.length && e.target === checkbox.get(0)) || (star.length && e.target===star.get(0))) {
|
||||
// don't open in case of checkbox, star, filterable
|
||||
if ((e.target.class || "").indexOf("filterable")!==-1
|
||||
|| (e.target.class || "").indexOf("icon-star")!==-1
|
||||
|| e.target.type==="checkbox") {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -354,6 +354,7 @@ frappe.views.DocListView = frappe.ui.Listing.extend({
|
|||
var me = this;
|
||||
this.$page.on("click", ".star-action", function() {
|
||||
frappe.ui.toggle_star($(this), me.doctype, $(this).attr("data-name"));
|
||||
return false;
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -54,9 +54,9 @@ frappe.search = {
|
|||
return false;
|
||||
}
|
||||
}).data('ui-autocomplete')._renderItem = function(ul, d) {
|
||||
var html = "<span class='small'>" + __(d.value) + "</span>";
|
||||
var html = "<span>" + __(d.value) + "</span>";
|
||||
if(d.description && d.value!==d.description) {
|
||||
html += '<br><span class="small text-muted">' + __(d.description) + '</span>';
|
||||
html += '<br><span class="text-muted">' + __(d.description) + '</span>';
|
||||
}
|
||||
return $('<li></li>')
|
||||
.data('item.autocomplete', d)
|
||||
|
|
|
|||
|
|
@ -1,63 +1,61 @@
|
|||
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse"
|
||||
data-target=".navbar-responsive-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">
|
||||
<i class="octicon octicon-home visible-xs"></i>
|
||||
<span class="hidden-xs">Home</span>
|
||||
<a class="navbar-brand toggle-sidebar visible-xs">
|
||||
<i class="octicon octicon-three-bars"></i>
|
||||
</a>
|
||||
<a class="navbar-brand navbar-home hidden-xs" href="#">Home</a>
|
||||
<ul class="nav navbar-nav navbar-left" id="navbar-breadcrumbs">
|
||||
</ul>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse navbar-responsive-collapse">
|
||||
<ul class="nav navbar-nav navbar-right visible-xs">
|
||||
<li>
|
||||
<a class="toggle-navbar-new-comments" title="{%= __("Unread Messages") %}">
|
||||
<span class="navbar-new-comments">0</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="hidden-xs">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#"
|
||||
onclick="return false;">
|
||||
<img src="{%= frappe.user_info().image %}" class="navbar-user-image">
|
||||
<span>{%= frappe.user.full_name() %}</span>
|
||||
<b class="caret"></b></a>
|
||||
<ul class="dropdown-menu" id="toolbar-user">
|
||||
<li><a href="#Form/User/{%= encodeURIComponent(user) %}">
|
||||
{%= __("My Settings") %}</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>
|
||||
<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.frappe.io" target="_blank">
|
||||
{%= __("Forums") %}</a></li>
|
||||
<li><a href="https://github.com/frappe/erpnext/issues" target="_blank">
|
||||
{%= __("Report an Issue") %}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#" onclick="return frappe.app.logout();">
|
||||
{%= __("Logout") %}</a></li>
|
||||
</ul>
|
||||
<img src="{%= frappe.user_info().image %}" class="navbar-user-image">
|
||||
<span>{%= frappe.user.full_name() %}</span>
|
||||
<b class="caret"></b></a>
|
||||
<ul class="dropdown-menu" id="toolbar-user" role="menu">
|
||||
<li><a href="#Form/User/{%= encodeURIComponent(user) %}">
|
||||
{%= __("My Settings") %}</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>
|
||||
<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.frappe.io" target="_blank">
|
||||
{%= __("Forums") %}</a></li>
|
||||
<li><a href="https://github.com/frappe/erpnext/issues" target="_blank">
|
||||
{%= __("Report an Issue") %}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#" onclick="return frappe.app.logout();">
|
||||
{%= __("Logout") %}</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" href="#" data-toggle="dropdown"
|
||||
title="{%= __("Unread Messages") %}"
|
||||
onclick="return false;"><span class="navbar-new-comments">0</span></a>
|
||||
<ul class="dropdown-menu" id="navbar-notification">
|
||||
</ul>
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" href="#" data-toggle="dropdown"
|
||||
title="{%= __("Unread Messages") %}"
|
||||
onclick="return false;"><span class="navbar-new-comments">0</span></a>
|
||||
<ul class="dropdown-menu" id="navbar-notification" role="menu">
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
<form class="navbar-form navbar-right" role="search" onsubmit="return false;">
|
||||
<div class="form-group form-group-sm">
|
||||
<input id="navbar-search" type="text" class="form-control"
|
||||
placeholder="{%= __("Search or type a command") %}" aria-haspopup="true">
|
||||
<span class="octicon octicon-search navbar-search-icon"></span>
|
||||
<ul class="dropdown-menu" id="navbar-search-results" role="menu"
|
||||
aria-expanded="false" aria-labelledby="NavbarSearchResults"></ul>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,17 @@
|
|||
|
||||
frappe.ui.toolbar.Toolbar = Class.extend({
|
||||
init: function() {
|
||||
$('header').append(frappe.render_template("navbar", {}));
|
||||
var header = $('header').append(frappe.render_template("navbar", {}));
|
||||
|
||||
header.find(".toggle-sidebar").on("click", function() {
|
||||
$(".offcanvas").toggleClass("active-left").removeClass("active-right");
|
||||
return false;
|
||||
});
|
||||
|
||||
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.toolbar.update_notifications();
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
10
frappe/public/js/lib/jquery/jquery-ui.min.js
vendored
10
frappe/public/js/lib/jquery/jquery-ui.min.js
vendored
File diff suppressed because one or more lines are too long
8
frappe/public/js/lib/jquery/jquery.min.js
vendored
8
frappe/public/js/lib/jquery/jquery.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -10,10 +10,29 @@ body {
|
|||
margin: 0px;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
overflow-x: hidden; /* Prevent scroll on narrow devices */
|
||||
}
|
||||
|
||||
.desk-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.desk-main-section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// transition
|
||||
a,
|
||||
.badge,
|
||||
.btn {
|
||||
.btn,
|
||||
.ui-menu .ui-menu-item {
|
||||
transition: 0.2s;
|
||||
-webkit-transition: 0.2s;
|
||||
}
|
||||
|
|
@ -68,7 +87,7 @@ a.form-link {
|
|||
|
||||
.link-btn {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
top: 2px;
|
||||
right: 4px;
|
||||
background-color: @navbar-bg;
|
||||
border-radius: 2px;
|
||||
|
|
@ -187,6 +206,40 @@ ul.linked-with-list li {
|
|||
transition: none;
|
||||
}
|
||||
|
||||
.ui-autocomplete .ui-menu-item a& {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-widget-content {
|
||||
// only rounded bottoms
|
||||
border-radius: 0px 0px 4px 4px;
|
||||
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.176);
|
||||
border-color: @border-color;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.ui-widget-content .ui-state-focus,
|
||||
.ui-widget-content .ui-state-hover {
|
||||
background-color: @btn-bg !important;
|
||||
color: @text-color !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
.ui-widget-content .ui-state-active {
|
||||
background-color: @brand-primary !important;
|
||||
color: #fff !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
.ui-menu .ui-menu-item {
|
||||
padding: 7px;
|
||||
font-size: @font-size-medium;
|
||||
}
|
||||
|
||||
/* z-index hack */
|
||||
.ui-datepicker { z-index: 9999999 !important; }
|
||||
.ui-autocomplete {
|
||||
|
|
@ -237,7 +290,7 @@ ul.linked-with-list li {
|
|||
left: 2px;
|
||||
display:inline-block;
|
||||
background:#ff5858;
|
||||
font-size:12px;
|
||||
font-size: @font-size-medium;
|
||||
line-height:20px;
|
||||
padding:0 8px;
|
||||
color:#fff;
|
||||
|
|
@ -316,7 +369,7 @@ kbd {
|
|||
.dropdown-menu {
|
||||
min-width: 200px;
|
||||
padding: 0px;
|
||||
font-size: 12px;
|
||||
font-size: @font-size-medium;
|
||||
|
||||
// only rounded bottoms
|
||||
border-radius: 0px 0px 4px 4px;
|
||||
|
|
@ -325,5 +378,3 @@ kbd {
|
|||
.dropdown-menu .divider {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
// autocomplete
|
||||
|
|
|
|||
|
|
@ -4,12 +4,13 @@
|
|||
@icon-hover: #fff;
|
||||
|
||||
#page-desktop {
|
||||
position: absolute;
|
||||
min-width: 100%;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 50px;
|
||||
margin-bottom: -50px;
|
||||
padding-top: 40px;
|
||||
border: 0px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.case-wrapper {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@media (max-width: 767px) {
|
||||
@media screen and (max-width: 767px) {
|
||||
.layout-main > div[class^="col-sm-"],
|
||||
.form-section {
|
||||
padding-left: 0px;
|
||||
|
|
@ -59,21 +59,40 @@
|
|||
}
|
||||
|
||||
// navbar & breadcrumbs
|
||||
.nav > li > a {
|
||||
padding: 10px 0px;
|
||||
}
|
||||
|
||||
.toggle-navbar-new-comments {
|
||||
padding: 8px 0px !important;
|
||||
}
|
||||
|
||||
.navbar > .container > .navbar-header,
|
||||
.navbar > .container > .navbar-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.navbar > .container > .navbar-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.navbar-brand .octicon-home {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.navbar .breadcrumb-divider {
|
||||
margin-top: 14px;
|
||||
margin-top: 3px !important;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
#navbar-breadcrumbs {
|
||||
margin: 0px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#navbar-breadcrumbs > li {
|
||||
float: left;
|
||||
display: block;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// select all except last 2
|
||||
|
|
@ -81,8 +100,70 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.mobile-module-icon {
|
||||
padding: 17px 15px 0px;
|
||||
margin-bottom: -15px;
|
||||
}
|
||||
|
||||
// Off Canvas
|
||||
.offcanvas,
|
||||
.page-head,
|
||||
.sidebar-offcanvas-right,
|
||||
.sidebar-offcanvas-left,
|
||||
.navbar-fixed-top {
|
||||
-webkit-transition: 0.25s;
|
||||
-o-transition: 0.25s;
|
||||
transition: 0.25s;
|
||||
}
|
||||
|
||||
.offcanvas {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.offcanvas.active-left,
|
||||
.offcanvas.active-left .page-head,
|
||||
.offcanvas.active-left .navbar-fixed-top {
|
||||
left: 75%; /* 9 columns */
|
||||
right: -25%;
|
||||
}
|
||||
|
||||
.offcanvas.active-right,
|
||||
.offcanvas.active-right .page-head,
|
||||
.offcanvas.active-right .navbar-fixed-top {
|
||||
right: 75%; /* 9 columns */
|
||||
left: -25%;
|
||||
}
|
||||
|
||||
.offcanvas .sidebar-offcanvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 75%; /* 9 columns */
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.offcanvas .sidebar-offcanvas-right {
|
||||
right: -75%; /* 9 columns */
|
||||
}
|
||||
|
||||
.offcanvas .sidebar-offcanvas-left {
|
||||
left: -75%; /* 9 columns */
|
||||
}
|
||||
|
||||
.offcanvas.active-left .sidebar-offcanvas-left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.offcanvas.active-right .sidebar-offcanvas-right {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
@import "variables.less";
|
||||
|
||||
.navbar .dropdown-toggle {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
line-height: 24px !important;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.navbar-fixed-top {
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
|
|
@ -12,11 +16,11 @@
|
|||
}
|
||||
|
||||
.navbar .breadcrumb-divider {
|
||||
margin-top: 15px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.navbar .breadcrumb-divider i {
|
||||
color: @breadcrumb-divider-color;
|
||||
color: @navbar-inverse-color;
|
||||
}
|
||||
|
||||
.navbar-icon-home {
|
||||
|
|
@ -34,7 +38,6 @@
|
|||
.navbar-user-image {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-top: -2px;
|
||||
margin-right: 3px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
|
@ -47,11 +50,10 @@
|
|||
background-color: @indicator-red;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 0px 5px;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
|
||||
#navbar-search {
|
||||
margin-top: 1px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
|
|
@ -75,10 +77,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.navbar-form {
|
||||
margin: 8px -15px;
|
||||
}
|
||||
|
||||
#navbar-search-results {
|
||||
left: auto;
|
||||
right: inherit;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import "variables.less";
|
||||
|
||||
.page-container {
|
||||
margin-top: 48px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.page-head {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
@navbar-bg: #f5f7fa;
|
||||
@light-bg: #fafbfc;
|
||||
@text-extra-muted: @border-color;
|
||||
@font-size-medium: 12px;
|
||||
|
||||
@indicator-blue: #5e64ff;
|
||||
@indicator-red: #ff5858;
|
||||
|
|
@ -17,5 +18,4 @@
|
|||
@indicator-darkgrey: #b8c2cc;
|
||||
|
||||
@navbar-default-color: #6C7680;
|
||||
@breadcrumb-divider-color: #C0C9D2;
|
||||
|
||||
@navbar-inverse-color: #9D9D9D;
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
style="min-width: 20px; max-height: 20px; border-radius: 4px"/>
|
||||
<b class="full-name"></b><b class="caret"></b>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
{%- for child in post_login -%}
|
||||
<li {% if child.label %}data-label="{{ child.label }}" {% endif %}
|
||||
{% if child.class %} class="{{ child.class }}" {% endif %}>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
{%- if page.child_items -%}
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
{%- for child in page.child_items -%}
|
||||
<li data-label='{{ child.label }}'>
|
||||
<a {% if child.indent %} style="padding-left: {{((child.indent|int)+1)*15 }}px"{% endif %}
|
||||
|
|
|
|||
|
|
@ -14,10 +14,19 @@
|
|||
</head>
|
||||
<body>
|
||||
<div class="splash">{% include "public/images/frappe.svg" %}</div>
|
||||
<header></header>
|
||||
<div id="body_div">
|
||||
|
||||
<div class="desk-container">
|
||||
<div class="offcanvas">
|
||||
<div class="sidebar-offcanvas sidebar-offcanvas-left visible-xs">something</div>
|
||||
<div class="sidebar-offcanvas sidebar-offcanvas-right visible-xs">something</div>
|
||||
<div class="desk-main-section">
|
||||
<header></header>
|
||||
<div id="body_div"></div>
|
||||
<footer></footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer></footer>
|
||||
|
||||
<script type="text/javascript" src="/assets/frappe/js/lib/jquery/jquery.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
window._version_number = "{{ build_version }}";
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue