vertical theme

application/Espo/Resources/metadata/themes/EspoVertical.json

@@ -1,7 +1,7 @@
 {
     "stylesheet": "client/css/espo-vertical.css",
     "navbarIsVertical": true,
-    "navbarStaticItemsHeight": 44,
+    "navbarStaticItemsHeight": 65,
     "recordTopButtonsStickTop": 61,
     "recordTopButtonsBlockHeight": 21
 }

frontend/client/res/templates/site/navbar.tpl

@@ -1,7 +1,9 @@
 <div class="navbar navbar-inverse" role="navigation">
     <div class="navbar-header">
-        <a class="minimizer" href="javascript:"><span class="glyphicon glyphicon-menu-hamburger"></span></a>
-        <a class="navbar-brand" href="#"><img src="{{logoSrc}}"></a>
+        <a class="minimizer" href="javascript:">
+            <span class="glyphicon glyphicon-menu-hamburger"></span>
+        </a>
+        <a class="navbar-brand" href="#"><img src="{{logoSrc}}"><span class="home-icon glyphicon glyphicon-home"></span></a>
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-body">
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
@@ -11,8 +13,8 @@
 
     <div class="collapse navbar-collapse navbar-body">
         <ul class="nav navbar-nav tabs">
-            {{#each tabs}}
-            <li data-name="{{name}}"><a href="{{link}}"><span>{{label}}</span></a></li>
+            {{#each tabListDefs}}
+            <li data-name="{{name}}"><a href="{{link}}"><span class="full-label">{{label}}</span><span class="short-label" title="{{label}}">{{shortLabel}}</span></a></li>
             {{/each}}
             <li class="dropdown">
                 <a id="nav-more-tabs-dropdown" class="dropdown-toggle" data-toggle="dropdown" href="#">{{translate 'More'}} <b class="caret"></b></a>

frontend/client/src/views/site/navbar.js

@@ -29,7 +29,7 @@ Espo.define('Views.Site.Navbar', 'View', function (Dep) {
 
         data: function () {
             return {
-                tabs: this.tabDefs,
+                tabListDefs: this.tabListDefs,
                 title: this.options.title,
                 menu: this.getMenuDefs(),
                 quickCreateList: this.quickCreateList,
@@ -113,10 +113,11 @@ Espo.define('Views.Site.Navbar', 'View', function (Dep) {
                 el: this.options.el + ' .global-search-container'
             });
 
-            this.tabDefs = this.getTabDefs();
+            this.tabListDefs = this.getTabListDefs();
 
             this.once('remove', function () {
                 $(window).off('resize.navbar');
+                $(window).off('scroll.navbar');
             });
         },
 
@@ -130,6 +131,8 @@ Espo.define('Views.Site.Navbar', 'View', function (Dep) {
 
             var self = this;
 
+            $window = $(window);
+
             var navbarIsVertical = this.getThemeManager().getParam('navbarIsVertical');
             var navbarStaticItemsHeight = this.getThemeManager().getParam('navbarStaticItemsHeight') || 0;
 
@@ -139,7 +142,7 @@ Espo.define('Views.Site.Navbar', 'View', function (Dep) {
                 var $tabs = this.$el.find('ul.tabs');
                 var $more = $tabs.find('li.dropdown > ul');
 
-                $(window).on('resize.navbar', function() {
+                $window.on('resize.navbar', function() {
                     updateWidth();
                 });
 
@@ -212,6 +215,12 @@ Espo.define('Views.Site.Navbar', 'View', function (Dep) {
             } else {
                 var $tabs = this.$el.find('ul.tabs');
 
+                var minHeight = $tabs.height() + navbarStaticItemsHeight;
+                $('body').css('minHeight', minHeight + 'px');
+                $window.on('scroll.navbar', function () {
+                    $tabs.scrollTop($window.scrollTop());
+                }.bind(this));
+
                 var updateHeight = function () {
                     var windowHeight = window.innerHeight;
                     var windowWidth = window.innerWidth;
@@ -246,17 +255,19 @@ Espo.define('Views.Site.Navbar', 'View', function (Dep) {
             return this.tabList;
         },
 
-        getTabDefs: function () {
-            var tabDefs = [];
+        getTabListDefs: function () {
+            var tabListDefs = [];
             this.getTabList().forEach(function (tab, i) {
+                var label = this.getLanguage().translate(tab, 'scopeNamesPlural');
                 var o = {
                     link: '#' + tab,
-                    label: this.getLanguage().translate(tab, 'scopeNamesPlural'),
+                    label: label,
+                    shortLabel: label.substr(0, 2),
                     name: tab
                 };
-                tabDefs.push(o);
+                tabListDefs.push(o);
             }, this);
-            return tabDefs;
+            return tabListDefs;
         },
 
         getMenuDefs: function () {

frontend/less/espo-vertical/layout.less

@@ -17,49 +17,95 @@
   }
 }
 
+body > #header ul.tabs > li > a > span.short-label {
+  display: none;
+}
+body > #header ul.tabs > li > a > span.full-label {
+  display: inline;
+}
+
+body > #header .navbar-brand span.home-icon {
+  display: none;
+}
 
 @media screen and (min-width: @screen-sm-min) {
 
-  body.minimized > #header {
-    width: @navbar-minimized-width;
-  }
-  body.minimized > #header .navbar-brand img {
-    display: none;
-  }
-  body.minimized > #header .navbar-header {
+  body.minimized {
+    #header {
       width: @navbar-minimized-width;
-  }
-  body.minimized > #content {
-    margin-left: @navbar-minimized-width;
-  }
+    }
 
-  body.minimized > #footer {
-    margin-left: @navbar-minimized-width;
-  }
+    #header .navbar-brand img {
+      display: none;
+    }
 
-  body.minimized > #header .navbar {
-    width: @navbar-minimized-width;
-  }
+    #header a.navbar-brand {
+      position: fixed;
+      top: 30px;
+      height: 35px;
+      width: @navbar-minimized-width;
+      padding-top: 8px;
+      paddin-left: 12px;
+    }
 
-  body.minimized > #header ul.tabs {
-    width: @navbar-minimized-width;
-  }
+    #header a.navbar-brand span.home-icon {
+      margin-left: 10px;
+      display: inline;
+      font-size: 14px;
+    }
 
-  body.minimized > #login {
-    margin-left: -@navbar-minimized-width;
-  }
+    #header .navbar-brand img {
+      display: none;
+    }
 
-  body.minimized > #header .navbar-right {
-    margin-left: @navbar-minimized-width;
-    padding-right: @navbar-minimized-width;
-  }
+    #header .navbar-header {
+        width: @navbar-minimized-width;
+        height: 30px;
+    }
 
-  body.minimized > #header ul.tabs li a span {
-    visibility: hidden;
-    display: block;
-  }
-  body.minimized > #header ul.tabs li a span:first-letter {
-    visibility: visible;
+    #header .navbar-header > a.minimizer {
+      width: 30px;
+      height: 30px;
+      float: none;
+      display: block;
+    }
+
+    #header .navbar-header > a.minimizer span {
+      margin-left: 12px;
+    }
+
+    #content {
+      margin-left: @navbar-minimized-width;
+    }
+
+    #footer {
+      margin-left: @navbar-minimized-width;
+    }
+
+    #header .navbar {
+      width: @navbar-minimized-width;
+    }
+
+    #header ul.tabs {
+      width: @navbar-minimized-width;
+      margin-top: 35px;
+    }
+
+    #login {
+      margin-left: -@navbar-minimized-width;
+    }
+
+    #header .navbar-right {
+      margin-left: @navbar-minimized-width;
+      padding-right: @navbar-minimized-width;
+    }
+
+    #header ul.tabs > li > a > span.short-label {
+      display: inline;
+    }
+    #header ul.tabs > li > a > span.full-label {
+      display: none;
+    }
   }
 
   #header .navbar {
@@ -139,7 +185,7 @@
   #header ul.tabs {
     width: @navbar-width;
     margin-left: -8px;
-    overflow-y: auto;
+    overflow-y: hidden;
     overflow-x: hidden;
   }
 

frontend/less/espo/layout.less

@@ -17,7 +17,6 @@
   }
 }
 
-
 #header .navbar {
   position: fixed;
   right: 0;
@@ -80,3 +79,13 @@ body > footer {
 #header .navbar-header > a.minimizer {
   display: none;
 }
+
+body > #header ul.tabs > li > a > span.short-label {
+  display: none;
+}
+body > #header ul.tabs > li > a > span.full-label {
+  display: inline;
+}
+body > #header .navbar-brand span.home-icon {
+  display: none;
+}