From e4673246589974284295e7b8e3479f1d1a6fea1c Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Wed, 24 May 2023 17:07:32 +0100
Subject: [PATCH] Updated image manager to use grid-based css

---
 resources/sass/_components.scss               | 43 ++++++++++++-------
 .../pages/parts/image-manager-form.blade.php  |  5 +++
 .../pages/parts/image-manager-list.blade.php  |  6 +--
 3 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss
index 5ba1286c0..459b41502 100644
--- a/resources/sass/_components.scss
+++ b/resources/sass/_components.scss
@@ -347,43 +347,61 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   display: none;
 }
 
+.image-manager-list {
+  padding: 3px;
+  overflow-y: scroll;
+  flex: 1;
+  display: grid;
+  grid-template-columns: repeat( auto-fit, minmax(140px, 1fr) );
+  gap: 3px;
+}
+
 .image-manager-list .image {
   display: block;
   position: relative;
   border-radius: 0;
-  float: left;
   margin: 0;
+  width: 100%;
+  text-align: start;
+  padding: 0;
   cursor: pointer;
-  width: math.div(100%, 6);
-  height: auto;
+  aspect-ratio: 1;
   @include lightDark(border-color, #ddd, #000);
-  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
-  transition: all cubic-bezier(.4, 0, 1, 1) 160ms;
+  transition: all linear 80ms;
   overflow: hidden;
   &.selected {
-    transform: scale3d(0.92, 0.92, 0.92);
-    outline: currentColor 2px solid;
+    background-color: var(--color-primary-light);
+    outline: currentColor 3px solid;
+    border-radius: 3px;
+    transform: scale3d(0.95, 0.95, 0.95);
   }
   img {
     width: 100%;
     max-width: 100%;
     display: block;
+    object-fit: cover;
+    height: auto;
   }
   .image-meta {
+    opacity: 0;
     position: absolute;
     width: 100%;
     bottom: 0;
     left: 0;
     color: #EEE;
-    background-color: rgba(0, 0, 0, 0.4);
+    background-color: rgba(0, 0, 0, 0.7);
     font-size: 10px;
     padding: 3px 4px;
+    pointer-events: none;
+    transition: opacity ease-in-out 80ms;
     span {
       display: block;
     }
   }
-  @include smaller-than($xl) {
-    width: math.div(100%, 4);
+  &.selected .image-meta,
+  &:hover .image-meta,
+  &:focus .image-meta {
+    opacity: 1;
   }
   @include smaller-than($m) {
     .image-meta {
@@ -434,11 +452,6 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   }
 }
 
-.image-manager-list {
-  overflow-y: scroll;
-  flex: 1;
-}
-
 .image-manager-content {
   display: flex;
   flex-direction: column;
diff --git a/resources/views/pages/parts/image-manager-form.blade.php b/resources/views/pages/parts/image-manager-form.blade.php
index aa21e31bb..a68d20b98 100644
--- a/resources/views/pages/parts/image-manager-form.blade.php
+++ b/resources/views/pages/parts/image-manager-form.blade.php
@@ -14,6 +14,11 @@
                      title="{{ $image->name }}">
             </a>
         </div>
+        <div>
+            <p class="text-muted text-small">
+                <span class="date">{{ trans('components.image_uploaded', ['uploadedDate' => $image->created_at->format('Y-m-d H:i:s')]) }}</span>
+            </p>
+        </div>
         <div class="form-group stretch-inputs">
             <label for="name">{{ trans('components.image_image_name') }}</label>
             <input id="name" class="input-base" type="text" name="name" value="{{ $image->name }}">
diff --git a/resources/views/pages/parts/image-manager-list.blade.php b/resources/views/pages/parts/image-manager-list.blade.php
index ccf79fb6d..d666725c5 100644
--- a/resources/views/pages/parts/image-manager-list.blade.php
+++ b/resources/views/pages/parts/image-manager-list.blade.php
@@ -1,6 +1,6 @@
 @foreach($images as $index => $image)
 <div>
-    <div component="event-emit-select"
+    <button component="event-emit-select"
          option:event-emit-select:name="image"
          option:event-emit-select:data="{{ json_encode($image) }}"
          class="image anim fadeIn text-link"
@@ -13,9 +13,9 @@
              title="{{ $image->name }}">
         <div class="image-meta">
             <span class="name">{{ $image->name }}</span>
-            <span class="date">{{ trans('components.image_uploaded', ['uploadedDate' => $image->created_at->format('Y-m-d H:i:s')]) }}</span>
+            <span class="date">{{ trans('components.image_uploaded', ['uploadedDate' => $image->created_at->format('Y-m-d')]) }}</span>
         </div>
-    </div>
+    </button>
 </div>
 @endforeach
 @if($hasMore)