From 4faecfbbd7ff86457d1a9f4ab0f8f11f2a64d2aa Mon Sep 17 00:00:00 2001
From: mokaddem <sami.mokaddem@circl.lu>
Date: Sat, 18 Sep 2021 10:22:59 +0200
Subject: [PATCH] chg: [instance:home] Slightly improved UI

---
 src/Model/Table/InstanceTable.php             |  2 +-
 templates/Instance/home.php                   |  4 ++--
 templates/element/charts/bar.php              |  2 +-
 templates/element/widgets/highlight-panel.php | 14 +++++++++-----
 webroot/css/main.css                          | 13 +++++++++++++
 5 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/Model/Table/InstanceTable.php b/src/Model/Table/InstanceTable.php
index 6de1cde..1110597 100644
--- a/src/Model/Table/InstanceTable.php
+++ b/src/Model/Table/InstanceTable.php
@@ -24,7 +24,7 @@ class InstanceTable extends AppTable
         return $validator;
     }
 
-    public function getStatistics($days=7): array
+    public function getStatistics($days=30): array
     {
         $models = ['Individuals', 'Organisations', 'Alignments', 'EncryptionKeys', 'SharingGroups', 'Users', 'Tags.Tags'];
         foreach ($models as $model) {
diff --git a/templates/Instance/home.php b/templates/Instance/home.php
index d574419..d576185 100644
--- a/templates/Instance/home.php
+++ b/templates/Instance/home.php
@@ -6,7 +6,7 @@
 <h2><?= __('Home') ?></h2>
 <div class="row">
     <?php foreach ($statistics as $modelName => $statistics): ?>
-        <div class="col-sm-6 col-md-4 col-l-3 col-xl-2 mb-2">
+        <div class="col-sm-6 col-md-5 col-l-4 col-xl-3 mb-3">
             <?php
                 $exploded = explode('.', $modelName);
                 $modelForDisplay = $exploded[count($exploded)-1];
@@ -16,7 +16,7 @@
                         'controller' => $modelForDisplay,
                         'action' => 'index',
                     ]),
-                    ['class' => 'text-white']
+                    ['class' => 'text-white text-decoration-none fw-light stretched-link']
                 );
                 echo $this->element('widgets/highlight-panel', [
                     'titleHtml' => $panelTitle,
diff --git a/templates/element/charts/bar.php b/templates/element/charts/bar.php
index ea3f56a..573a61b 100644
--- a/templates/element/charts/bar.php
+++ b/templates/element/charts/bar.php
@@ -38,7 +38,7 @@ foreach ($chartData as $i => $entry) {
             series: [{
                 data: <?= json_encode($data) ?>,
             }],
-            colors: ['var(--success)'],
+            colors: ['var(--bs-light)'],
             tooltip: {
                 x: {
                     show: false
diff --git a/templates/element/widgets/highlight-panel.php b/templates/element/widgets/highlight-panel.php
index 6f6881a..4aae72f 100644
--- a/templates/element/widgets/highlight-panel.php
+++ b/templates/element/widgets/highlight-panel.php
@@ -5,13 +5,13 @@ if ($variation == 0) {
     $variationIcon = 'minus';
 } elseif ($variation > 0) {
     $variationIcon = 'arrow-up';
-    $variationClass = 'text-success';
+    $variationClass = 'bg-success';
 } else {
     $variationIcon = 'arrow-down';
-    $variationClass = 'text-danger';
+    $variationClass = 'bg-danger';
 }
 
-$variationHtml = sprintf('<div class="%s"><span class="%s me-2"></span>%s</div>',
+$variationHtml = sprintf('<div class="badge %s fw-bold"><span class="%s me-2"></span>%s</div>',
     $variationClass,
     $this->FontAwesome->getClass($variationIcon),
     !empty($variation) ? h($variation) : ''
@@ -24,7 +24,10 @@ $leftContent = sprintf('<div class="">%s</div><h2 class="my-2">%s</h2>%s',
     $variationHtml
 );
 $rightContent = sprintf('<div class="">%s</div>', $this->element('charts/bar', [
-    'chartData' => $chartData
+    'chartData' => $chartData,
+    'chartOptions' => [
+        
+    ]
 ]));
 
 $cardContent = sprintf('<div class="highlight-panel-container d-flex align-items-center justify-content-between"><div class="number-container">%s</div><div class="chart-container w-50">%s</div></div>', $leftContent, $rightContent);
@@ -32,7 +35,8 @@ $cardContent = sprintf('<div class="highlight-panel-container d-flex align-items
 echo $this->Bootstrap->card([
     'variant' => 'secondary',
     'bodyHTML' => $cardContent,
-    'bodyClass' => 'p-3'
+    'bodyClass' => 'p-3',
+    'class' => 'grow-on-hover shadow-sm'
 ]);
 
 ?>
diff --git a/webroot/css/main.css b/webroot/css/main.css
index dcd9d20..dc8376c 100644
--- a/webroot/css/main.css
+++ b/webroot/css/main.css
@@ -171,4 +171,17 @@ input[type="checkbox"]:disabled.change-cursor {
 
 .select2-container {
     z-index: 1060;
+}
+
+.grow-on-hover {
+    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0, 0.90, 0.35, 1.00);
+    -moz-transition: -moz-transform 0.5s cubic-bezier(0, 0.90, 0.35, 1.00);
+    transition: all .2s cubic-bezier(0, 0.90, 0.35, 1.00);
+}
+
+.grow-on-hover:hover {
+    -webkit-transform: translateZ(0) scale(1.03, 1.03);
+    -moz-transform: translateZ(0) scale(1.03, 1.03);
+    transform: translateZ(0) scale(1.03, 1.03);
+    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%) !important;
 }
\ No newline at end of file