From dcec14b2e9675940326480831cf055ae57e7fac3 Mon Sep 17 00:00:00 2001
From: Ayumi Hamasaki <asianspawebsite@gmail.com>
Date: Thu, 6 Dec 2018 12:32:57 +0000
Subject: [PATCH] Update Dashboard Columns from 10 to 12

This PR has been re-coded to split the old PR into two separate PR's. This PR relates to github Issue: https://github.com/octobercms/october/issues/3823
---
 modules/backend/widgets/ReportContainer.php   | 12 ++++++----
 .../assets/css/reportcontainer.css            | 24 ++++++++++++-------
 .../assets/js/reportcontainer.js              |  2 +-
 .../assets/less/reportcontainer.less          | 22 +++++++++--------
 4 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/modules/backend/widgets/ReportContainer.php b/modules/backend/widgets/ReportContainer.php
index dc57bd8e7..1bb17c40a 100644
--- a/modules/backend/widgets/ReportContainer.php
+++ b/modules/backend/widgets/ReportContainer.php
@@ -49,7 +49,7 @@ class ReportContainer extends WidgetBase
      *         sortOrder: 1
      *         configuration:
      *             title: 'Traffic overview'
-     *             ocWidgetWidth: 10
+     *             ocWidgetWidth: 12
      */
     public $defaultWidgets = [];
 
@@ -177,8 +177,8 @@ class ReportContainer extends WidgetBase
     public function onLoadAddPopup()
     {
         $sizes = [];
-        for ($i = 1; $i <= 10; $i++) {
-            $sizes[$i] = $i < 10 ? $i : $i.' (' . Lang::get('backend::lang.dashboard.full_width') . ')';
+        for ($i = 1; $i <= 12; $i++) {
+            $sizes[$i] = $i < 12 ? $i : $i.' (' . Lang::get('backend::lang.dashboard.full_width') . ')';
         }
 
         $this->vars['sizes'] = $sizes;
@@ -383,7 +383,7 @@ class ReportContainer extends WidgetBase
 
         $property = [
             'property'          => 'ocWidgetWidth',
-            'title'             => Lang::get('backend::lang.dashboard.widget_columns_label', ['columns' => '(1-10)']),
+            'title'             => Lang::get('backend::lang.dashboard.widget_columns_label', ['columns' => '(1-12)']),
             'description'       => Lang::get('backend::lang.dashboard.widget_columns_description'),
             'type'              => 'dropdown',
             'validationPattern' => '^[0-9]+$',
@@ -398,7 +398,9 @@ class ReportContainer extends WidgetBase
                 7  => '7 ' . Lang::choice('backend::lang.dashboard.columns', 7),
                 8  => '8 ' . Lang::choice('backend::lang.dashboard.columns', 8),
                 9  => '9 ' . Lang::choice('backend::lang.dashboard.columns', 9),
-                10 => '10 ' . Lang::choice('backend::lang.dashboard.columns', 10)
+                10 => '10 ' . Lang::choice('backend::lang.dashboard.columns', 10),
+                11 => '11 ' . Lang::choice('backend::lang.dashboard.columns', 11),
+                12 => '12 ' . Lang::choice('backend::lang.dashboard.columns', 12)
             ]
         ];
         $result[] = $property;
diff --git a/modules/backend/widgets/reportcontainer/assets/css/reportcontainer.css b/modules/backend/widgets/reportcontainer/assets/css/reportcontainer.css
index 401799efc..b061ea162 100644
--- a/modules/backend/widgets/reportcontainer/assets/css/reportcontainer.css
+++ b/modules/backend/widgets/reportcontainer/assets/css/reportcontainer.css
@@ -93,33 +93,39 @@
   filter: alpha(opacity=100);
 }
 .report-container > ul .item.width-1 {
-  width: 9.95%;
+  width: 8.33%;
 }
 .report-container > ul .item.width-2 {
-  width: 19.95%;
+  width: 16.66%;
 }
 .report-container > ul .item.width-3 {
-  width: 29.95%;
+  width: 24.99%;
 }
 .report-container > ul .item.width-4 {
-  width: 39.95%;
+  width: 33.32%;
 }
 .report-container > ul .item.width-5 {
-  width: 49.95%;
+  width: 41.65%;
 }
 .report-container > ul .item.width-6 {
-  width: 59.95%;
+  width: 49.98%;
 }
 .report-container > ul .item.width-7 {
-  width: 69.95%;
+  width: 58.31%;
 }
 .report-container > ul .item.width-8 {
-  width: 79.95%;
+  width: 66.64%;
 }
 .report-container > ul .item.width-9 {
-  width: 89.95%;
+  width: 74.97%;
 }
 .report-container > ul .item.width-10 {
+  width: 83.3%;
+}
+.report-container > ul .item.width-11 {
+  width: 91.63%;
+}
+.report-container > ul .item.width-12 {
   width: 100%;
 }
 .report-container > ul .item.dragged {
diff --git a/modules/backend/widgets/reportcontainer/assets/js/reportcontainer.js b/modules/backend/widgets/reportcontainer/assets/js/reportcontainer.js
index 45d18ec6d..e943b6264 100644
--- a/modules/backend/widgets/reportcontainer/assets/js/reportcontainer.js
+++ b/modules/backend/widgets/reportcontainer/assets/js/reportcontainer.js
@@ -27,7 +27,7 @@
 
     ReportContainer.DEFAULTS = {
         breakpoint: 768,
-        columns: 10
+        columns: 12
     }
 
     ReportContainer.prototype.init = function() {
diff --git a/modules/backend/widgets/reportcontainer/assets/less/reportcontainer.less b/modules/backend/widgets/reportcontainer/assets/less/reportcontainer.less
index db0240d38..19d0031b3 100644
--- a/modules/backend/widgets/reportcontainer/assets/less/reportcontainer.less
+++ b/modules/backend/widgets/reportcontainer/assets/less/reportcontainer.less
@@ -96,16 +96,18 @@
                 }
             }
 
-            &.width-1 {width: 9.95%;}
-            &.width-2 {width: 19.95%;}
-            &.width-3 {width: 29.95%;}
-            &.width-4 {width: 39.95%;}
-            &.width-5 {width: 49.95%;}
-            &.width-6 {width: 59.95%;}
-            &.width-7 {width: 69.95%;}
-            &.width-8 {width: 79.95%;}
-            &.width-9 {width: 89.95%;}
-            &.width-10 {width: 100%;}
+            &.width-1 {width: 8.33%;}
+            &.width-2 {width: 16.66%;}
+            &.width-3 {width: 24.99%;}
+            &.width-4 {width: 33.32%;}
+            &.width-5 {width: 41.65%;}
+            &.width-6 {width: 49.98%;}
+            &.width-7 {width: 58.31%;}
+            &.width-8 {width: 66.64%;}
+            &.width-9 {width: 74.97%;}
+            &.width-10 {width: 83.3%;}
+            &.width-11 {width: 91.63%;}
+            &.width-12 {width: 100%;}			
 
             &.dragged {
                 .transition-duration(0s) !important;