From 7b40949ca04fd2bdf0bfce83a94d43db4853df10 Mon Sep 17 00:00:00 2001
From: Matthieu Napoli <matthieu@mnapoli.fr>
Date: Mon, 9 Mar 2015 12:29:33 +1300
Subject: [PATCH] The dashboard now uses Bootstrap's grid system
---
.../Dashboard/javascripts/dashboardObject.js | 45 +++++++++-
plugins/Dashboard/stylesheets/dashboard.less | 89 ++++++-------------
plugins/Morpheus/stylesheets/theme.less | 4 +-
3 files changed, 71 insertions(+), 67 deletions(-)
diff --git a/plugins/Dashboard/javascripts/dashboardObject.js b/plugins/Dashboard/javascripts/dashboardObject.js
index cd2d848253..f80f485fb8 100644
--- a/plugins/Dashboard/javascripts/dashboardObject.js
+++ b/plugins/Dashboard/javascripts/dashboardObject.js
@@ -297,8 +297,49 @@
}
}
- for (var i = 0; i < columnCount; i++) {
- $('.col', dashboardElement)[i].className = 'col width-' + columnWidth[i];
+ switch (layout) {
+ case '100':
+ $('.col', dashboardElement).removeClass()
+ .addClass('col col-md-12');
+ break;
+ case '50-50':
+ $('.col', dashboardElement).removeClass()
+ .addClass('col col-md-6');
+ break;
+ case '67-33':
+ $('.col', dashboardElement)[0].className = 'col col-md-8';
+ $('.col', dashboardElement)[1].className = 'col col-md-4';
+ break;
+ case '33-67':
+ $('.col', dashboardElement)[0].className = 'col col-md-4';
+ $('.col', dashboardElement)[1].className = 'col col-md-8';
+ break;
+ case '33-33-33':
+ $('.col', dashboardElement)[0].className = 'col col-md-4';
+ $('.col', dashboardElement)[1].className = 'col col-md-4';
+ $('.col', dashboardElement)[2].className = 'col col-md-4';
+ break;
+ case '40-30-30':
+ $('.col', dashboardElement)[0].className = 'col col-md-6';
+ $('.col', dashboardElement)[1].className = 'col col-md-3';
+ $('.col', dashboardElement)[2].className = 'col col-md-3';
+ break;
+ case '30-40-30':
+ $('.col', dashboardElement)[0].className = 'col col-md-3';
+ $('.col', dashboardElement)[1].className = 'col col-md-6';
+ $('.col', dashboardElement)[2].className = 'col col-md-3';
+ break;
+ case '30-30-40':
+ $('.col', dashboardElement)[0].className = 'col col-md-3';
+ $('.col', dashboardElement)[1].className = 'col col-md-3';
+ $('.col', dashboardElement)[2].className = 'col col-md-6';
+ break;
+ case '25-25-25-25':
+ $('.col', dashboardElement)[0].className = 'col col-md-3';
+ $('.col', dashboardElement)[1].className = 'col col-md-3';
+ $('.col', dashboardElement)[2].className = 'col col-md-3';
+ $('.col', dashboardElement)[3].className = 'col col-md-3';
+ break;
}
makeWidgetsSortable();
diff --git a/plugins/Dashboard/stylesheets/dashboard.less b/plugins/Dashboard/stylesheets/dashboard.less
index 775b7da56b..3d2b2ae32b 100644
--- a/plugins/Dashboard/stylesheets/dashboard.less
+++ b/plugins/Dashboard/stylesheets/dashboard.less
@@ -26,57 +26,41 @@
}
}
-.col {
- float: left;
- min-height: 100px;
-}
-
-.col.width-100 {
- width: 100%;
-}
-
-.col.width-75 {
- width: 75%;
-}
-
-.col.width-67 {
- width: 66.67%;
-}
-
-.col.width-50 {
- width: 50%;
-}
-
-.col.width-40 {
- width: 40%;
-}
-
-.col.width-33 {
- width: 33.33%;
-}
+#dashboard {
+ .col {
+ min-height: 100px;
+ // Customize Bootstrap gutter between columns
+ padding-right: 7px;
+ padding-left: 7px;
-.col.width-30 {
- width: 30%;
-}
+ >.sortable {
+ padding: 5px 0;
+ }
+ }
-.col.width-25 {
- width: 25%;
+ .widget {
+ background: @theme-color-background-base;
+ border: 1px solid #bbb6ad;
+ border-radius: 4px;
+ overflow: hidden;
+ font-size: 14px;
+ z-index: 1;
+
+ h3 {
+ font-size: 15px;
+ margin: 0;
+ font-weight: normal;
+ color: #0D0D0D;
+ text-shadow: none;
+ padding: 15px 15px 10px;
+ }
+ }
}
.hover {
border: 2px dashed #E3E3E3;
}
-.widget {
- background: @theme-color-background-base;
- border: 1px solid #bbb6ad;
- margin: 10px 7px;
- border-radius: 4px;
- overflow: hidden;
- font-size: 14px;
- z-index: 1;
-}
-
.widgetHover {
border: 1px solid #aba494;
}
@@ -112,18 +96,6 @@
padding-bottom: 4px;
}
-.widgetTopHover {
-}
-
-h3.widgetName {
- font-size: 15px;
- padding: 0px;
- margin: 0px;
- font-weight: normal;
- color: #0D0D0D;
- text-shadow: none;
-}
-
.widgetNameOffScreen {
overflow: hidden;
width:1px;
@@ -323,31 +295,24 @@ h3.widgetName {
#columnPreview .width-100 {
width: 120px;
}
-
#columnPreview .width-75 {
width: 90px;
}
-
#columnPreview .width-67 {
width: 80.4px;
}
-
#columnPreview .width-50 {
width: 60px;
}
-
#columnPreview .width-40 {
width: 48px;
}
-
#columnPreview .width-33 {
width: 40px;
}
-
#columnPreview .width-30 {
width: 36px;
}
-
#columnPreview .width-25 {
width: 30px;
}
diff --git a/plugins/Morpheus/stylesheets/theme.less b/plugins/Morpheus/stylesheets/theme.less
index 4ecc74ceb7..8d5205f6d4 100644
--- a/plugins/Morpheus/stylesheets/theme.less
+++ b/plugins/Morpheus/stylesheets/theme.less
@@ -574,11 +574,9 @@ div.sparkline {
.widgetTop {
background: @theme-color-widget-title-background;
border-bottom: 1px solid @color-silver-l80;
- .widgetName {
+ h3 {
.font-default(15px, 18px);
color: @theme-color-widget-title-text;
- text-shadow: none;
- padding: 15px 15px 10px;
}
}
--
GitLab