dashboard changes

client/res/templates/dashboard.tpl

@@ -23,5 +23,5 @@
         </div>
     </div>
 </div>
-<div class="dashlets grid-stack grid-stack-4 row">{{{dashlets}}}</div>
+<div class="dashlets grid-stack grid-stack-4">{{{dashlets}}}</div>
 

client/src/views/dashboard.js

@@ -193,8 +193,24 @@ define('views/dashboard', ['view', 'lib!gridstack'], function (Dep, Gridstack) {
             this.initGridstack();
         },
 
+        initFallbackMode: function () {
+            var $dashboard =  this.$dashboard = this.$el.find('> .dashlets');
+            $dashboard.addClass('fallback');
+
+            this.currentTabLayout.forEach(function (o) {
+                var $item = this.prepareFallbackItem(o);
+                $dashboard.append($item);
+            }, this);
+
+            this.currentTabLayout.forEach(function (o) {
+                if (!o.id || !o.name) return;
+                this.createDashletView(o.id, o.name);
+            }, this);
+        },
+
         initGridstack: function () {
             var $gridstack = this.$gridstack = this.$el.find('> .dashlets');
+            $gridstack.removeClass('fallback');
 
             var draggable = false;
             var resizable = false;
@@ -281,6 +297,26 @@ define('views/dashboard', ['view', 'lib!gridstack'], function (Dep, Gridstack) {
             return $item;
         },
 
+        prepareFallbackItem: function (o) {
+            var $item = $('<div></div>');
+            var $container = $('<div class="dashlet-container"></div>');
+
+            $container.attr('data-id', o.id);
+            $container.attr('data-name', o.name);
+            $container.attr('data-x', o.x);
+            $container.attr('data-y', o.y);
+            $container.attr('data-height', o.height);
+            $container.attr('data-width', o.width);
+            $container.css('min-height', (o.height * this.getThemeManager().getParam('dashboardCellHeight')) + 'px');
+
+            $item.attr('data-id', o.id);
+            $item.attr('data-name', o.name);
+
+            $item.append($container);
+
+            return $item;
+        },
+
         saveLayout: function () {
             if (this.layoutReadOnly) return;
 

frontend/less/espo/custom.less

@@ -1567,13 +1567,19 @@ table.less-padding td.cell[data-name="buttons"] > .btn-group {
     padding-right: @padding-small-horizontal;
 }
 
-.panel.dashlet {
-    height: inherit;
-}
-.dashlet-container {
-    overflow-y: hidden;
+.dashlets {
+    .panel.dashlet {
+        height: inherit;
+    }
+
+    .dashlet-container {
+        overflow-y: hidden;
+    }
+    margin-left: -8px;
+    margin-right: -8px;
 }
 
+
 .panel.dashlet > .panel-body {
     overflow-y: auto;
     overflow-x: hidden;