Add a new picture thumbnail style

Slightly updates the look of pictures in the archive and element editor to reduce the boxy visual clutter.
AlchemyCMS · Dec 4, 2023 · 4081392 · 4081392
1 parent dfbc336
commit 4081392
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 51 deletions.
diff --git a/app/assets/stylesheets/alchemy/archive.scss b/app/assets/stylesheets/alchemy/archive.scss
@@ -46,61 +46,48 @@ div#image_assign_filter_and_image_sizing {
   align-items: center;
   justify-content: center;
   background-color: $thumbnail-background-color;
-  width: 100%;
-  height: 120px;
 
   &:hover {
     text-decoration: none;
   }
 }
 
 .picture_thumbnail {
+  --picture-thumbnail-border-radius: var(--border-radius_medium);
+  max-width: 100%;
   margin: 2 * $default-margin;
   background-color: #fff;
   position: relative;
-  box-shadow: 0 0 0 1px $default-border-color;
-  width: 160px;
+  box-shadow: 1px 1px 1px 0 $default-border-color;
+  border-radius: var(--picture-thumbnail-border-radius);
+  padding-bottom: 2.5em;
 
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
+  img,
+  .thumbnail_background {
+    border-top-right-radius: var(--picture-thumbnail-border-radius);
+    border-top-left-radius: var(--picture-thumbnail-border-radius);
+  }
 
+  img {
     &[src$=".svg"] {
       width: auto;
       height: auto;
     }
   }
 
   .picture_name {
-    display: block;
+    position: absolute;
     width: 100%;
     text-align: center;
     white-space: nowrap;
     overflow: hidden;
     bottom: 0;
     left: 0;
-    line-height: 2;
+    line-height: 2.5;
     padding: 0 $default-padding;
     text-overflow: ellipsis;
   }
 
-  &.small {
-    width: 80px;
-
-    .thumbnail_background {
-      height: 60px;
-    }
-  }
-
-  &.large {
-    width: 240px;
-
-    .thumbnail_background {
-      height: 180px;
-    }
-  }
-
   &:hover {
     .picture_tool,
     .picture_tags {
@@ -114,6 +101,7 @@ div#image_assign_filter_and_image_sizing {
 #overlay_picture_list {
   display: flex;
   flex-wrap: wrap;
+  align-items: end;
 }
 
 #pictures {

diff --git a/app/assets/stylesheets/alchemy/elements.scss b/app/assets/stylesheets/alchemy/elements.scss
@@ -286,6 +286,10 @@
       width: 100%;
     }
 
+    .ingredient-editor.picture {
+      padding-right: 1px;
+    }
+
     .picture_thumbnail {
       margin: 0;
     }
@@ -455,14 +459,6 @@
   flex-wrap: wrap;
 }
 
-.picture_thumbnail .picture_image {
-  overflow: hidden;
-
-  img.img_paddingtop {
-    @extend .disable-user-select;
-  }
-}
-
 #fixed-elements {
   min-height: 100px;
 }
@@ -563,25 +559,50 @@
 
 .ingredient-editor.picture {
   position: relative;
+  width: 50%;
+  padding-left: 1px; // Compensate the box shadow
+
+  + .picture {
+    padding-left: $default-padding;
+    padding-right: 1px; // Compensate the box shadow
+  }
 
   .picture_thumbnail {
     display: inline-block;
     width: 160px;
     margin: $default-margin 0;
     padding-bottom: 28px;
+
+    .picture_image {
+      overflow: hidden;
+      border-top-right-radius: var(--picture-thumbnail-border-radius);
+      border-top-left-radius: var(--picture-thumbnail-border-radius);
+
+      img.img_paddingtop {
+        @extend .disable-user-select;
+      }
+    }
+
+    img {
+      --picture-thumbnail-border-radius: 0;
+    }
   }
 
   &.validation_failed .picture_thumbnail {
     border-color: $error_border_color;
   }
 
-  .thumbnail_background .icon {
-    font-size: 4em;
-    color: $medium-gray;
-    vertical-align: top;
+  .thumbnail_background {
+    height: 120px;
+
+    .icon {
+      font-size: 4em;
+      color: $medium-gray;
+      vertical-align: top;
 
-    &.error {
-      font-size: 1.2em;
+      &.error {
+        font-size: 1.2em;
+      }
     }
   }
 
@@ -839,17 +860,6 @@ select.long {
       }
     }
   }
-
-  &.picture {
-    width: 50%;
-    padding-left: 1px; // Compensate the box shadow
-    padding-right: $default-padding;
-
-    + .picture {
-      padding-left: $default-padding;
-      padding-right: 1px; // Compensate the box shadow
-    }
-  }
 }
 
 div.pictures_for_element {