chg: [layout:event-view] Slightly improved spacing and added new css helper shadow-md

templates/Events/view.php

@@ -4,7 +4,7 @@
     <?= $this->element('Events/event-critical-notices') ?>
 </div>
 
-<div class="d-flex flex-row gap-2 mb-2">
+<div class="d-flex flex-row gap-2 mb-3">
     <div style="flex-basis: 33%;">
         <?= $this->element('Events/event-metadata') ?>
     </div>
@@ -13,7 +13,7 @@
     </div>
 </div>
 
-<div class="mb-2">
+<div class="mb-3">
     <?= $this->element('Events/event-stats') ?>
 </div>
 

templates/element/Events/event-context.php

@@ -300,4 +300,5 @@ $content = $listTable;
 echo $this->Bootstrap->card([
     'bodyHTML' => $content,
     'bodyClass' => 'p-0',
+    'class' => ['shadow-md'],
 ]);

templates/element/Events/event-metadata.php

@@ -153,6 +153,7 @@ $content = $eventInfo . $listTable;
 echo $this->Bootstrap->card([
     'bodyHTML' => $content,
     'bodyClass' => 'p-0',
+    'class' => ['shadow-md'],
 ]);
 ?>
 

templates/element/Events/event-notices.php

@@ -2,6 +2,6 @@
 echo $this->Bootstrap->alert([
     'text' => 'notice for empty event, ...',
     'class' => [''],
-    'dismissible' => false,
+    'dismissible' => true,
     'variant' => 'warning',
 ]);

webroot/css/themes/additional/bootstrap-additional.css

@@ -809,6 +809,10 @@
   box-shadow: 0 0.1rem 0.15rem #00000038;
 }
 
+.shadow-md {
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 0.25em 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px 0px;
+}
+
 .multi-metafields-container {
   position: relative;
 }

webroot/css/themes/theme-darkly.css

@@ -12710,6 +12710,10 @@ textarea.form-control-lg {
   box-shadow: 0 0.1rem 0.15rem #00000038;
 }
 
+.shadow-md {
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 0.25em 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px 0px;
+}
+
 .multi-metafields-container {
   position: relative;
 }

webroot/css/themes/theme-default.css

@@ -12708,6 +12708,10 @@ textarea.form-control-lg {
   box-shadow: 0 0.1rem 0.15rem #00000038;
 }
 
+.shadow-md {
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 0.25em 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px 0px;
+}
+
 .multi-metafields-container {
   position: relative;
 }

webroot/css/themes/theme-flatly.css

@@ -12709,6 +12709,10 @@ textarea.form-control-lg {
   box-shadow: 0 0.1rem 0.15rem #00000038;
 }
 
+.shadow-md {
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 0.25em 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px 0px;
+}
+
 .multi-metafields-container {
   position: relative;
 }

webroot/css/themes/theme-lumen.css

@@ -12709,6 +12709,10 @@ textarea.form-control-lg {
   box-shadow: 0 0.1rem 0.15rem #00000038;
 }
 
+.shadow-md {
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 0.25em 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px 0px;
+}
+
 .multi-metafields-container {
   position: relative;
 }

webroot/css/themes/theme-minty.css

@@ -12709,6 +12709,10 @@ textarea.form-control-lg {
   box-shadow: 0 0.1rem 0.15rem #00000038;
 }
 
+.shadow-md {
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 0.25em 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px 0px;
+}
+
 .multi-metafields-container {
   position: relative;
 }

webroot/css/themes/theme-quartz.css

@@ -12708,6 +12708,10 @@ textarea.form-control-lg {
   box-shadow: 0 0.1rem 0.15rem #00000038;
 }
 
+.shadow-md {
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 0.25em 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px 0px;
+}
+
 .multi-metafields-container {
   position: relative;
 }

webroot/css/themes/theme-slate.css

@@ -12709,6 +12709,10 @@ textarea.form-control-lg {
   box-shadow: 0 0.1rem 0.15rem #00000038;
 }
 
+.shadow-md {
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 0.25em 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px 0px;
+}
+
 .multi-metafields-container {
   position: relative;
 }

webroot/css/themes/theme-vapor.css

@@ -12709,6 +12709,10 @@ textarea.form-control-lg {
   box-shadow: 0 0.1rem 0.15rem #00000038;
 }
 
+.shadow-md {
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 0.25em 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px 0px;
+}
+
 .multi-metafields-container {
   position: relative;
 }

webroot/theme/scss/additional/bootstrap-additional.scss

@@ -222,4 +222,8 @@ $toast-color-level:                 70% !default;
     box-shadow: 0 0.1rem 0.15rem #00000038;
 }
 
+.shadow-md {
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 0.25em 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px 0px;
+}
+
 @import '../../../scss/custom.scss';