Nicer broken image style

Use a broken image icon instead of a warning icon, because the image could just be missing. A bit more padding makes it look nicer in the thumbnail background.
AlchemyCMS · Jan 16, 2024 · 0511831 · 0511831
1 parent 1e3bad6
commit 0511831
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/app/assets/stylesheets/alchemy/archive.scss b/app/assets/stylesheets/alchemy/archive.scss
@@ -46,6 +46,10 @@
   &:hover {
     text-decoration: none;
   }
+
+  .icon.error {
+    padding: 2em;
+  }
 }
 
 .picture_thumbnail {

diff --git a/app/assets/stylesheets/alchemy/elements.scss b/app/assets/stylesheets/alchemy/elements.scss
@@ -605,10 +605,11 @@ alchemy-publish-element-button {
 
     .icon {
       font-size: 3em;
-      color: var(--color-grey_dark);
+      color: $default-border-color;
 
       &.error {
-        font-size: 1.2em;
+        font-size: 16px;
+        color: $icon-color;
       }
     }
   }

diff --git a/app/javascript/alchemy_admin/image_loader.js b/app/javascript/alchemy_admin/image_loader.js
@@ -40,7 +40,7 @@ export default class ImageLoader {
   onError(evt) {
     const message = `Could not load "${this.image.src}"`
     this.spinner.stop()
-    this.parent.innerHTML = `<span class="icon error ri-alert-line" title="${message}" />`
+    this.parent.innerHTML = `<span class="icon error ri-file-damage-line ri-xl" title="${message}" />`
     console.error(message, evt)
     this.unbind()
   }