diff --git a/client/res/templates/dashboard.tpl b/client/res/templates/dashboard.tpl index ab3cef8d64..e56a7a09cb 100644 --- a/client/res/templates/dashboard.tpl +++ b/client/res/templates/dashboard.tpl @@ -23,5 +23,5 @@ -
{{{dashlets}}}
+
{{{dashlets}}}
diff --git a/client/src/views/dashboard.js b/client/src/views/dashboard.js index f08ac8213c..7829c9f8d7 100644 --- a/client/src/views/dashboard.js +++ b/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 = $('
'); + var $container = $('
'); + + $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; diff --git a/frontend/less/espo/custom.less b/frontend/less/espo/custom.less index fee73bbf64..d81687de57 100644 --- a/frontend/less/espo/custom.less +++ b/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;