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 · 136b6e9 · 136b6e9
1 parent 1e3bad6
commit 136b6e9
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
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/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()
   }