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

[design] sidebar + desktop

Browse source
This commit is contained in:
Anand Doshi 2015-01-22 15:00:59 +05:30
parent d3bf12e77f
commit dcdd91c2c3
10 changed files with 73 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frappe/public/css/desk.css
View file

@ -7,7 +7,8 @@ body {
margin: 0px;
}
html,
body {
body,
.desk-container {
overflow-x: hidden;
/* Prevent scroll on narrow devices */
}
@ -22,6 +23,10 @@ body {
.desk-main-section {
width: 100%;
}
.desk-main-section-overlay {
display: none;
cursor: pointer;
}
a,
.badge,
.btn,
@ -225,6 +230,7 @@ ul.linked-with-list li {
}
.modal-backdrop {
opacity: 0.5;
position: fixed;
}
.form-group {
margin-bottom: 7px;

22
frappe/public/css/desktop.css
View file

@ -1,11 +1,11 @@
body[data-route=""] .navbar-default,
body[data-route="desktop"] .navbar-default {
background-color: rgba(255, 255, 255, 0.5);
border-color: transparent;
background-color: rgba(255, 255, 255, 0.9);
border-color: rgba(54, 65, 76, 0.1);
}
#page-desktop {
min-width: 100%;
padding-top: 80px;
padding-top: calc(55px);
margin-top: 0px;
border: 0px;
position: absolute;
@ -18,7 +18,7 @@ body[data-route="desktop"] .navbar-default {
margin: 0px;
float: left;
width: 138px;
height: 120px;
height: 140px;
}
.case-label {
font-size: 12px;
@ -26,21 +26,19 @@ body[data-route="desktop"] .navbar-default {
letter-spacing: 0.4px;
color: #fff;
text-align: center;
margin-top: -10px;
margin-top: 10px;
transition: 0.2s;
-webkit-transition: 0.2s;
text-shadow: 1px 1px 1px #000000, 0px 1px 5px rgba(0, 0, 0, 0.5);
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}
.app-icon {
/* border-radius: 5px;*/
overflow: hidden;
padding: 20px;
display: inline-block;
margin: auto;
margin-bottom: 7px;
text-align: center;
border-radius: 5px;
border-radius: 16px;
cursor: pointer;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
}
.app-icon i {
font-size: 32px;
@ -68,9 +66,9 @@ body[data-route="desktop"] .navbar-default {
color: #fff;
background-color: #ff5858;
padding: 6px;
border-radius: 50%;
font-size: 12px;
line-height: 1;
border-radius: 25px;
min-width: 25px;
text-align: center;
text-shadow: none;
@ -124,9 +122,11 @@ body[data-route="desktop"] .navbar-default {
.case-label {
font-size: 80%;
font-weight: normal;
margin-top: 7px;
}
.app-icon {
padding: 10px;
border-radius: 12px;
}
.app-icon i {
font-size: 32px;

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

@ -91,13 +91,22 @@
.navbar-fixed-top {
transition: 0.25s;
}
.offcanvas {
.offcanvas,
.desk-main-section-overlay {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow-y: auto;
overflow-x: hidden;
}
.offcanvas.active-left .desk-main-section-overlay,
.offcanvas.active-right .desk-main-section-overlay {
display: block;
background-color: #334143;
opacity: 0.5;
z-index: 1031;
}
.offcanvas.active-left,
.offcanvas.active-left .page-head,

9
frappe/public/js/frappe/desk.js
View file

@ -184,6 +184,15 @@ frappe.Application = Class.extend({
if(frappe.boot) {
frappe.frappe_toolbar = new frappe.ui.toolbar.Toolbar();
}
// collapse offcanvas sidebars!
$(".offcanvas .sidebar").on("click", "a", function() {
$(".offcanvas").removeClass("active-left active-right");
});
$(".desk-main-section-overlay").on("click", function() {
$(".offcanvas").removeClass("active-left active-right");
});
},
logout: function() {
var me = this;

3
frappe/public/js/frappe/router.js
View file

@ -47,9 +47,6 @@ frappe.route = function() {
if(frappe.route_titles[window.location.hash]) {
document.title = frappe.route_titles[window.location.hash];
}
// collapse offcanvas sidebars!
$(".offcanvas").removeClass("active-left active-right");
}
frappe.get_route = function(route) {

11
frappe/public/less/desk.less
View file

@ -11,7 +11,8 @@ body {
}
html,
body {
body,
.desk-container {
overflow-x: hidden; /* Prevent scroll on narrow devices */
}
@ -28,6 +29,11 @@ body {
width: 100%;
}
.desk-main-section-overlay {
display: none;
cursor: pointer;
}
// transition
a,
.badge,
@ -264,7 +270,8 @@ ul.linked-with-list li {
}
.modal-backdrop {
opacity: 0.5;
opacity: 0.5;
position: fixed;
}
.form-group {

23
frappe/public/less/desktop.less
View file

@ -4,13 +4,13 @@
@icon-hover: #fff;
body[data-route=""] .navbar-default, body[data-route="desktop"] .navbar-default {
background-color: rgba(255, 255, 255, 0.5);
border-color: transparent;
background-color: rgba(255, 255, 255, 0.9);
border-color: rgba(54, 65, 76, 0.1);
}
#page-desktop {
min-width: 100%;
padding-top: 80px;
padding-top: calc(40px + 15%);
margin-top: 0px;
border: 0px;
position: absolute;
@ -24,7 +24,7 @@ body[data-route=""] .navbar-default, body[data-route="desktop"] .navbar-default
margin: 0px;
float: left;
width: 138px;
height: 120px;
height: 140px;
}
.case-label {
@ -33,23 +33,20 @@ body[data-route=""] .navbar-default, body[data-route="desktop"] .navbar-default
letter-spacing: 0.4px;
color: #fff;
text-align: center;
margin-top: -10px;
margin-top: 10px;
transition: 0.2s;
-webkit-transition: 0.2s;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1), 0px 1px 5px rgba(0, 0, 0, 0.5);
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}
.app-icon {
/* border-radius: 5px;*/
overflow: hidden;
padding: 20px;
display: inline-block;
margin: auto;
margin-bottom: 7px;
text-align: center;
// background-color: @btn-bg;
border-radius: 5px;
border-radius: 16px;
cursor: pointer;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
}
.app-icon i {
@ -80,9 +77,9 @@ body[data-route=""] .navbar-default, body[data-route="desktop"] .navbar-default
color: #fff;
background-color: @indicator-red;
padding: 6px;
border-radius: 50%;
font-size: 12px;
line-height: 1;
border-radius: 25px;
min-width: 25px;
text-align: center;
text-shadow: none;
@ -152,10 +149,12 @@ body[data-route=""] .navbar-default, body[data-route="desktop"] .navbar-default
.case-label {
font-size: 80%;
font-weight: normal;
margin-top: 7px;
}
.app-icon {
padding: 10px;
border-radius: 12px;
}
.app-icon i {

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

@ -120,14 +120,23 @@
transition: 0.25s;
}
.offcanvas {
// position: fixed;
.offcanvas,
.desk-main-section-overlay {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow-y: auto;
overflow-x: hidden;
}
.offcanvas.active-left .desk-main-section-overlay,
.offcanvas.active-right .desk-main-section-overlay {
display: block;
background-color: @modal-backdrop-bg;
opacity: 0.5;
z-index: 1031;
}
.offcanvas.active-left,

1
frappe/public/less/variables.less
View file

@ -7,6 +7,7 @@
@grey-link-color: #212a33;
@navbar-bg: #f5f7fa;
@light-bg: #fafbfc;
@modal-backdrop-bg: #334143;
@text-extra-muted: @border-color;
@font-size-medium: 12px;

4
frappe/templates/pages/desk.html
View file

@ -5,6 +5,9 @@
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<meta name="mobile-web-app-capable" content="yes">
<link rel="shortcut icon"
href="{{ favicon or "/assets/frappe/images/favicon.ico" }}" type="image/x-icon">
<link rel="icon"
@ -23,6 +26,7 @@
<div id="body_div"></div>
<footer></footer>
</div>
<div class="desk-main-section-overlay"></div>
<div class="sidebar sidebar-left visible-xs"></div>
<div class="sidebar sidebar-right visible-xs">
<ul class="sidebar-menu" id="sidebar-notification"></ul>