chg: [instance:home] Slightly improved UI

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) {

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,

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

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'
 ]);
 
 ?>

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;
 }