Merge pull request #9 from CottaCush/features/component-styling

Handle empty data set form query; Fix clashing styles
CottaCush · Oct 8, 2018 · 4183023 · 4183023
2 parents 0d331cd + 405254a
commit 4183023
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 57 deletions.
diff --git a/composer.lock b/composer.lock
diff --git a/src/asset-files/css/styles.css b/src/asset-files/css/styles.css
diff --git a/src/asset-files/less/dashboard-widgets.less b/src/asset-files/less/dashboard-widgets.less
@@ -1,11 +1,12 @@
 @white: #fff;
 .cricket-wrapper {
-  .card {
+  .cricket-card {
+    border-radius: 4px;
     box-shadow: 0 2px 0 rgba(90, 97, 105, .07),
                 0 4px 8px rgba(90, 97, 105, .08),
                 0 10px 10px rgba(90, 97, 105, .03),
                 0 7px 70px rgba(90, 97, 105, .08);
-    .card-text {
+    .cricket-card-text {
       margin-bottom: 1.5625rem;
     }
     a {
@@ -14,41 +15,41 @@
       }
     }
   }
-  .card-small {
+  .cricket-card-small {
     box-shadow: 0 2px 0 rgba(90, 97, 105, .11),
                 0 4px 8px rgba(90, 97, 105, .12),
                 0 10px 10px rgba(90, 97, 105, .06),
                 0 7px 70px rgba(90, 97, 105, .1);
-    .card-body {
+    .cricket-card-body {
       padding: 1rem 1.5rem;
     }
-    .card-footer {
+    .cricket-card-footer {
       padding: 1rem 1.5rem;
     }
-    .card-header {
+    .cricket-card-header {
       padding: 1rem 1.5rem;
     }
   }
-  .card-body {
+  .cricket-card-body {
     > p {
       &:last-child {
         margin-bottom: 0;
       }
     }
   }
-  .card-title {
+  .cricket-card-title {
     font-weight: 500;
     margin-bottom: .75rem;
   }
-  .card-subtitle {
+  .cricket-card-subtitle {
     margin-top: -1.09375rem;
   }
-  .card-link {
-    & + .card-link {
+  .cricket-card-link {
+    & + .cricket-card-link {
       margin-left: 1.875rem;
     }
   }
-  .card-header {
+  .cricket-card-header {
     padding: 1.09375rem 1.875rem;
     background-color: @white;
     border-bottom: none;
@@ -58,7 +59,7 @@
       border-radius: 4px 4px 0 0;
     }
   }
-  .card-footer {
+  .cricket-card-footer {
     padding: 1.09375rem 1.875rem;
     background-color: @white;
     border-top: none;

diff --git a/src/asset-files/less/dashboard.less b/src/asset-files/less/dashboard.less
@@ -1,16 +1,11 @@
 .cricket-wrapper {
   .cricket-dashboard-view {
     &__count-widget {
-      border-radius: 4px;
-      box-shadow: 0 2px 0 rgba(90,97,105,.07),
-                0 4px 8px rgba(90,97,105,.08),
-                0 10px 10px rgba(90,97,105,.03),
-                0 7px 70px rgba(90,97,105,.08);
       background: #fff;
     }
 
     &__count-widget--data {
-      padding: 5px 0;
+      padding: 15px 0;
       text-align: center;
     }
 

diff --git a/src/assets/DashboardsAsset.php b/src/assets/DashboardsAsset.php
@@ -10,7 +10,7 @@
 class DashboardsAsset extends BaseDashboardsAsset
 {
     public $css = [
-        'css/styles.css',
+        'css/styles.css'
     ];
 
     public $depends = [

diff --git a/src/widgets/BaseChartsJsWidget.php b/src/widgets/BaseChartsJsWidget.php
@@ -77,14 +77,14 @@ public function init()
 
     protected function renderHeader()
     {
-        echo $this->beginDiv('card-header border-bottom');
+        echo $this->beginDiv('cricket-card-header border-bottom');
         echo Html::tag('span', $this->model->name, ['class' => 'h4']);
         echo $this->endDiv();
     }
 
     protected function renderBody()
     {
-        echo $this->beginDiv('card-body pt-0');
+        echo $this->beginDiv('cricket-card-body');
 
         $this->renderFilter();
         $this->renderChart();
@@ -138,7 +138,7 @@ protected function getRandomColors($count = 1, $format = 'rgb', $isRandom = fals
 
     protected function renderFooter()
     {
-        echo $this->beginDiv('card-footer border-top');
+        echo $this->beginDiv('cricket-card-footer border-top');
 
         echo $this->beginDiv('text-right ');
         echo '&nbsp;';

diff --git a/src/widgets/BaseDashboardWidget.php b/src/widgets/BaseDashboardWidget.php
@@ -38,9 +38,9 @@ abstract class BaseDashboardWidget extends Yii2BaseWidget
     protected $queryFunction = SQLGenerator::QUERY_ALL;
 
     public static $sizes = [
-        self::LOCATION_TOP => 'col-lg-2 col-md-3 col-sm-6 col-12 my-4',
-        self::LOCATION_MIDDLE => 'col-lg-4 col-md-6 col-12 my-4',
-        self::LOCATION_BOTTOM => 'col-md-6 col-sm-12 my-4',
+        self::LOCATION_TOP => 'col-lg-3 col-md-3 col-sm-6 col-12 form-group',
+        self::LOCATION_MIDDLE => 'col-lg-4 col-md-6 col-12 form-group',
+        self::LOCATION_BOTTOM => 'col-md-6 col-sm-12 form-group',
     ];
 
     public $dbConnection;
@@ -55,7 +55,7 @@ public function init()
     public function renderWidget()
     {
         echo $this->beginDiv($this->getSize());
-        echo $this->beginDiv('card card-small');
+        echo $this->beginDiv('cricket-card cricket-card-small equal-height');
 
         $this->renderHeader();
 
@@ -90,7 +90,7 @@ protected function getDataColumns($data = [])
 
     protected function renderHeader()
     {
-        echo $this->beginDiv('card-header border-bottom');
+        echo $this->beginDiv('cricket-card-header border-bottom');
         echo Html::tag('span', $this->model->name, ['class' => 'h4']);
         echo $this->endDiv();
     }
@@ -108,7 +108,7 @@ protected function renderFilter()
             return;
         }
 
-        echo $this->beginDiv('row border-bottom px-2 py-3 bg-light');
+        echo $this->beginDiv('row border-bottom bg-light');
         echo '';
         echo $this->endDiv();
     }

diff --git a/src/widgets/CountWidget.php b/src/widgets/CountWidget.php
@@ -22,13 +22,22 @@ protected function renderHeader()
         return;
     }
 
+    public function init()
+    {
+        parent::init();
+
+        if (empty($this->data)) {
+            $this->data = 0;
+        }
+    }
+
     protected function renderBody()
     {
-        echo $this->beginDiv('card-body cricket-dashboard-view__count-widget equal-height');
+        echo $this->beginDiv('cricket-card-body cricket-dashboard-view__count-widget');
         echo $this->beginDiv('cricket-dashboard-view__count-widget--data');
         echo Html::tag(
             'h1',
-            $this->getData(),
+            $this->data,
             ['class' => 'cricket-dashboard-view__count-widget--data-value']
         );
         echo Html::tag('span', $this->model->name, ['class' => 'cricket-dashboard-view__count-widget--data-label']);

diff --git a/src/widgets/DashboardListWidget.php b/src/widgets/DashboardListWidget.php
@@ -36,7 +36,7 @@ private function renderDashboards()
         echo $this->beginDiv('cricket-dashboard-list');
         echo $this->beginDiv('row');
         foreach ($this->dashboards as $dashboard) {
-            echo $this->beginDiv('col-lg-3 col-md-3 col-sm-4 col-xs-12');
+            echo $this->beginDiv('col-lg-3 col-md-3 col-sm-4 col-xs-12 form-group');
             echo $this->beginDiv('cricket-dashboard-list__item');
             echo Html::a(
                 ArrayHelper::getValue($dashboard, 'name'),