From 563179bec7866658bc74b182cec49f2728da9ad2 Mon Sep 17 00:00:00 2001 From: yuri Date: Wed, 5 Aug 2015 13:18:33 +0300 Subject: [PATCH] vertical theme mobile --- frontend/client/src/views/site/navbar.js | 10 +- frontend/less/espo-vertical/custom.less | 8 - frontend/less/espo-vertical/layout.less | 270 +++++++++++---------- frontend/less/espo-vertical/variables.less | 3 +- 4 files changed, 154 insertions(+), 137 deletions(-) diff --git a/frontend/client/src/views/site/navbar.js b/frontend/client/src/views/site/navbar.js index 0e624ae436..ca52ff110a 100644 --- a/frontend/client/src/views/site/navbar.js +++ b/frontend/client/src/views/site/navbar.js @@ -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); diff --git a/frontend/less/espo-vertical/custom.less b/frontend/less/espo-vertical/custom.less index e9efd5cf1f..2f58c107c2 100644 --- a/frontend/less/espo-vertical/custom.less +++ b/frontend/less/espo-vertical/custom.less @@ -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; -} \ No newline at end of file diff --git a/frontend/less/espo-vertical/layout.less b/frontend/less/espo-vertical/layout.less index bda8ae2952..df777727d9 100644 --- a/frontend/less/espo-vertical/layout.less +++ b/frontend/less/espo-vertical/layout.less @@ -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; + } } diff --git a/frontend/less/espo-vertical/variables.less b/frontend/less/espo-vertical/variables.less index 8b13789179..defb516846 100644 --- a/frontend/less/espo-vertical/variables.less +++ b/frontend/less/espo-vertical/variables.less @@ -1 +1,2 @@ - +@navbarWidth: 150px; +@topBarHeight: 30px; \ No newline at end of file