vertical theme

.gitignore

@@ -11,6 +11,7 @@
 /main.html
 /frontend/client/css/bootstrap.css
 /frontend/client/css/espo.css
+/frontend/client/css/espo-vertical.css
 /frontend/client/css/sacura.css
 /tests/testData/cache/*
 composer.phar

Gruntfile.js

@@ -75,6 +75,14 @@ module.exports = function (grunt) {
                     'frontend/client/css/sacura.css': 'frontend/less/sacura/main.less',
                 },
             },
+            espoVertical: {
+                options: {
+                    yuicompress: true,
+                },
+                files: {
+                    'frontend/client/css/espo-vertical.css': 'frontend/less/espo-vertical/main.less',
+                },
+            },
         },
         cssmin: {
             minify: {

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

@@ -0,0 +1,4 @@
+{
+    "stylesheet": "client/css/espo-vertical.css",
+    "navbarHorizontalAdjustDisabled": true
+}

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

@@ -1,4 +1,4 @@
-<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+<div class="navbar navbar-inverse" role="navigation">
 
     <div class="navbar-header">
         <a class="navbar-brand" href="#"><img src="{{logoSrc}}"></a>

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

@@ -112,86 +112,96 @@ Espo.define('Views.Site.Navbar', 'View', function (Dep) {
             this.selectTab(this.getRouter().getLast().controller);
 
             var self = this;
-            var $tabs = this.$el.find('ul.tabs');
-            var $more = $tabs.find('li.dropdown > ul');
 
-            $(window).on('resize.navbar', function() {
+            var theme = this.getConfig().get('theme');
-                updateWidth();
+            if (!this.getMetadata().get('themes.' + theme + '.navbarHorizontalAdjustDisabled')) {
-            });
+                var $tabs = this.$el.find('ul.tabs');
+                var $more = $tabs.find('li.dropdown > ul');
 
-
+                $(window).on('resize.navbar', function() {
-            var hideOneTab = function () {
+                    updateWidth();
-                var count = $tabs.children().size();
-                var $one = $tabs.children().eq(count - 2);
-                $one.prependTo($more);
-            };
-            var unhideOneTab = function () {
-                var count = $tabs.children().size();
-                var $one = $more.children().eq(0);
-                if ($one.size()) {
-                    $one.insertAfter($tabs.children().eq(count - 2));
-                }
-            };
-
-            var tabCount = this.tabList.length;
-
-            var $navbar = $('#navbar .navbar');
-
-            var navbarNeededHeight = 45;
-
-            var moreWidth = $('#nav-more-tabs-dropdown').width();
-
-
-            var updateWidth = function () {
-                var windowWidth = $(window.document).width();
-
-                var windowWidth = window.innerWidth;
-
-                $more.children('li').each(function (i, li) {
-                    unhideOneTab();
                 });
 
-                $more.parent().addClass('hide');
+                var hideOneTab = function () {
+                    var count = $tabs.children().size();
+                    var $one = $tabs.children().eq(count - 2);
+                    $one.prependTo($more);
+                };
+                var unhideOneTab = function () {
+                    var count = $tabs.children().size();
+                    var $one = $more.children().eq(0);
+                    if ($one.size()) {
+                        $one.insertAfter($tabs.children().eq(count - 2));
+                    }
+                };
 
-                if (windowWidth < 768) {
+                var tabCount = this.tabList.length;
-                    return;
+                var $navbar = $('#navbar .navbar');
+                var navbarNeededHeight = 45;
+                var moreWidth = $('#nav-more-tabs-dropdown').width();
+
+                var updateWidth = function () {
+                    var windowWidth = $(window.document).width();
+
+                    var windowWidth = window.innerWidth;
+
+                    $more.children('li').each(function (i, li) {
+                        unhideOneTab();
+                    });
+
+                    $more.parent().addClass('hide');
+
+                    if (windowWidth < 768) {
+                        return;
+                    }
+
+                    var headerWidth = this.$el.width();
+
+                    var maxWidth = headerWidth - 546 - moreWidth;
+
+                    var width = $tabs.width();
+                    while (width > maxWidth) {
+                        hideOneTab();
+                        width = $tabs.width();
+                    }
+
+                    if ($more.children().size() > 0) {
+                        $more.parent().removeClass('hide');
+                    }
+                }.bind(this);
+
+                var processUpdateWidth = function () {
+                    if ($navbar.height() > navbarNeededHeight) {
+                        updateWidth();
+                        setTimeout(function () {
+                            processUpdateWidth();
+                        }, 200);
+                    } else {
+                        setTimeout(function () {
+                            processUpdateWidth();
+                        }, 1000);
+                    }
+                };
+
+                if ($navbar.height() <= navbarNeededHeight) {
+                    $more.parent().addClass('hide');
                 }
 
-                var headerWidth = this.$el.width();
+                processUpdateWidth();
+            } else {
+                var $tabs = this.$el.find('ul.tabs');
+                var updateHeight = function () {
+                    var windowHeight = window.innerHeight;
 
-                var maxWidth = headerWidth - 546 - moreWidth;
+                    $tabs.css('height', (windowHeight - 130) + 'px');
+                }.bind(this);
 
-                var width = $tabs.width();
+                $(window).on('resize.navbar', function() {
-                while (width > maxWidth) {
+                    updateHeight();
-                    hideOneTab();
+                });
-                    width = $tabs.width();
+                updateHeight();
-                }
-
-                if ($more.children().size() > 0) {
-                    $more.parent().removeClass('hide');
-                }
-            }.bind(this);
-
-            var processUpdateWidth = function () {
-                if ($navbar.height() > navbarNeededHeight) {
-                    updateWidth();
-                    setTimeout(function () {
-                        processUpdateWidth();
-                    }, 200);
-                } else {
-                    setTimeout(function () {
-                        processUpdateWidth();
-                    }, 1000);
-                }
-            };
-
-            if ($navbar.height() <= navbarNeededHeight) {
-                $more.parent().addClass('hide');
             }
 
-
-            processUpdateWidth();
-
         },
 
         selectTab: function (name) {

frontend/less/espo-vertical/custom.less

@@ -0,0 +1 @@
+

frontend/less/espo-vertical/main.less

@@ -0,0 +1,11 @@
+@import "../espo/bootstrap/bootstrap.less";
+@import "../espo/variables.less";
+@import "variables.less";
+@import "../espo/mixins.less";
+
+@import "../espo/misc.less";
+@import "navbar.less";
+@import "../espo/custom.less";
+@import "custom.less";
+
+@import "../espo/bootstrap/utilities.less";

frontend/less/espo-vertical/navbar.less

@@ -0,0 +1,57 @@
+body {
+    padding-top: 0;
+}
+
+#header .navbar {
+  top: 0;
+  border-width: 0 0 0 0;
+}
+
+#header {
+    width: 200px;
+}
+
+body > .content {
+    margin-left: 200px;
+}
+
+#header .navbar {
+  position: fixed;
+  z-index: @zindex-navbar-fixed;
+  width: 200px;
+  margin-bottom: 0px;
+  height: 100%;
+}
+
+#header ul.tabs li {
+  float: none;
+}
+
+#header ul.tabs {
+  width: 190px;
+  margin-left: -8px;
+  overflow-y: auto;
+}
+
+#header ul.tabs li.dropdown {
+  display: none;
+}
+
+#header .navbar-right {
+  position: fixed;
+  bottom: 20px;
+}
+
+#header .navbar-right .global-search-container {
+  float: none;
+}
+
+#header ul.navbar-nav li > a {
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-left: 12px;
+}
+
+#footer {
+  margin-left: 190px;
+}

frontend/less/espo-vertical/variables.less

@@ -0,0 +1 @@
+

frontend/less/espo/custom.less

@@ -146,10 +146,6 @@ table.table > thead th {
   }
 }
 
-body {
-    padding-top: 55px;
-}
-
 .navbar-brand {
     padding: 0;
 }
@@ -321,15 +317,6 @@ ul.dropdown-menu > li.checkbox:last-child {
     }
 }
 
-@media screen and (max-width: @screen-sm-min) {
-    .navbar-fixed-top {
-        position: static;
-    }
-    body {
-        padding-top: 0;
-    }
-}
-
 table.table > tbody td > .list-row-buttons button {
     position: relative;
     margin-top: 2px;

frontend/less/espo/main.less

@@ -3,5 +3,6 @@
 @import "mixins.less";
 
 @import "misc.less";
+@import "navbar.less";
 @import "custom.less";
 @import "bootstrap/utilities.less";

frontend/less/espo/navbar.less

@@ -0,0 +1,45 @@
+#header .navbar {
+  .navbar-collapse {
+    max-height: @navbar-collapse-max-height;
+
+    @media (max-device-width: @screen-xs-min) and (orientation: landscape) {
+      max-height: 200px;
+    }
+  }
+}
+
+.navbar-collapse {
+  @media (min-width: @grid-float-breakpoint) {
+    .navbar & {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+}
+
+
+#header .navbar {
+  position: fixed;
+  right: 0;
+  left: 0;
+  z-index: @zindex-navbar-fixed;
+}
+
+#header .navbar {
+  top: 0;
+  border-width: 0 0 1px;
+}
+
+
+body {
+    padding-top: 55px;
+}
+
+@media screen and (max-width: @screen-sm-min) {
+  .navbar {
+      position: static;
+  }
+  body {
+      padding-top: 0;
+  }
+}

frontend/less/sacura/main.less

@@ -4,5 +4,6 @@
 @import "../espo/mixins.less";
 
 @import "../espo/misc.less";
+@import "../espo/navbar.less";
 @import "../espo/custom.less";
 @import "../espo/bootstrap/utilities.less";