espocrm-extensions/espocrm-base
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

vertical theme mobile

Browse Source
This commit is contained in:
yuri
2015-08-05 13:18:33 +03:00
parent 386ada05d6
commit 563179bec7
4 changed files with 154 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/client/src/views/site/navbar.js
+9 -1
View File
@@ -119,6 +119,8 @@ Espo.define('Views.Site.Navbar', 'View', function (Dep) {
var navbarIsVertical = this.getThemeManager().getParam('navbarIsVertical');
var navbarStaticItemsHeight = this.getThemeManager().getParam('navbarStaticItemsHeight') || 0;
var smallScreenWidth = 768;
if (!navbarIsVertical) {
var $tabs = this.$el.find('ul.tabs');
var $more = $tabs.find('li.dropdown > ul');
@@ -156,7 +158,7 @@ Espo.define('Views.Site.Navbar', 'View', function (Dep) {
$more.parent().addClass('hide');
if (windowWidth < 768) {
if (windowWidth < smallScreenWidth) {
return;
}
@@ -198,6 +200,12 @@ Espo.define('Views.Site.Navbar', 'View', function (Dep) {
var updateHeight = function () {
var windowHeight = window.innerHeight;
var windowWidth = window.innerWidth;
if (windowWidth < smallScreenWidth) {
$tabs.css('height', 'none');
return;
}
$tabs.css('height', (windowHeight - navbarStaticItemsHeight) + 'px');
}.bind(this);
frontend/less/espo-vertical/custom.less
-8
View File
@@ -11,16 +11,8 @@
margin-top: 2px;
}
#login {
margin-left: -@navbarWidth;
}
#global-search-input {
border: 1px solid @main-gray;
font-size: 13px;
width: 200px;
}
#header .navbar-header {
width: @navbarWidth;
}
frontend/less/espo-vertical/layout.less
+143 -127
View File
@@ -1,138 +1,154 @@
#header .navbar {
top: 0;
border-width: 0 0 0 0;
}
@navbarWidth: 150px;
@topBarHeight: 30px;
#header {
width: @navbarWidth;
}
#header .navbar-brand img {
width: @navbarWidth;
}
body > .content {
margin-left: @navbarWidth;
}
body {
padding-top: @topBarHeight;
}
html, body {
height: 100%;
}
body > footer {
margin-top: -26x;
}
body > .content {
height: auto;
min-height: 100%;
padding-bottom: 42px;
}
body > footer {
clear: both;
position: relative;
height: 26px;
margin-top: -28px;
}
body > footer {
margin-left: @navbarWidth;
}
#header .navbar {
position: fixed;
z-index: @zindex-navbar-fixed;
width: @navbarWidth;
margin-bottom: 0px;
height: 100%;
}
#header ul.tabs li {
float: none;
}
#header ul.tabs {
width: @navbarWidth;
margin-left: -8px;
overflow-y: auto;
#header .navbar-collapse {
@media (min-width: @grid-float-breakpoint) {
.navbar & {
padding-left: 0;
padding-right: 0;
}
}
}
#header ul.tabs li.dropdown {
display: none;
}
#header .navbar-right {
position: fixed;
bottom: 20px;
position: fixed;
top: 0;
left: 0;
height: @topBarHeight;
width: 100%;
background-color: @main-gray;
margin-left: 150px;
padding-right: 150px;
}
#header .navbar-right .global-search-container {
position: fixed;
top: 0;
right: 105px;
}
@media screen and (min-width: @screen-sm-min) {
#header .navbar {
top: 0;
border-width: 0 0 0 0;
}
#header .navbar-right .global-search-container a.global-searcy-button {
padding: 5px 10px;
#header {
width: @navbarWidth;
}
#header .navbar-brand img {
width: @navbarWidth;
}
#header .navbar-header {
width: @navbarWidth;
}
body > .content {
margin-left: @navbarWidth;
}
body {
padding-top: @topBarHeight;
}
html, body {
height: 100%;
}
body > footer {
margin-top: -26x;
}
body > .content {
height: auto;
min-height: 100%;
padding-bottom: 42px;
}
body > footer {
clear: both;
position: relative;
height: 26px;
margin-top: -28px;
}
body > footer {
margin-left: @navbarWidth;
}
#header .navbar {
position: fixed;
z-index: @zindex-navbar-fixed;
width: @navbarWidth;
margin-bottom: 0px;
height: 100%;
}
#header ul.tabs li {
float: none;
}
#header ul.tabs {
width: @navbarWidth;
margin-left: -8px;
overflow-y: auto;
}
#header .navbar-right {
position: fixed;
bottom: 20px;
position: fixed;
top: 0;
left: 0;
height: @topBarHeight;
width: 100%;
background-color: @main-gray;
margin-left: 150px;
padding-right: 150px;
}
#header .navbar-right .global-search-container {
position: fixed;
top: 0;
right: 105px;
}
#header .navbar-right .global-search-container a.global-searcy-button {
padding: 5px 10px;
color: @gray-light;
}
#header .navbar-right .quick-create-container {
position: fixed;
top: 0;
right: 35px;
width: 35px;
}
#header .navbar-right .menu-container {
position: fixed;
top: 0;
right: 0;
width: 35px;
}
#header .navbar-right > li > a {
color: @gray-light;
}
#header .navbar-right .quick-create-container {
position: fixed;
top: 0;
right: 35px;
width: 35px;
}
#header .navbar-right .menu-container {
position: fixed;
top: 0;
right: 0;
width: 35px;
}
#header .navbar-right > li > a {
color: @gray-light;
padding: 5px 10px;
}
#header .navbar-right .notifications-badge-container {
position: fixed;
top: 0;
right: 70px;
width: 35px;
}
#header ul.tabs li > a {
padding-top: 8px;
padding-bottom: 8px;
padding-left: 12px;
}
#header .navbar-form {
margin-top: 0px;
margin-bottom: 0px;
}
#global-search-input {
height: @topBarHeight !important;
margin-top: 0 !important;
padding: 5px 10px;
}
#header .navbar-right .notifications-badge-container {
position: fixed;
top: 0;
right: 70px;
width: 35px;
}
#header ul.tabs li > a {
padding-top: 8px;
padding-bottom: 8px;
padding-left: 12px;
}
#header .navbar-form {
margin-top: 0px;
margin-bottom: 0px;
}
#global-search-input {
height: @topBarHeight !important;
margin-top: 0 !important;
}
#login {
margin-left: -@navbarWidth;
}
}
frontend/less/espo-vertical/variables.less
+2 -1
View File
@@ -1 +1,2 @@
@navbarWidth: 150px;
@topBarHeight: 30px;