From 05118318068f54a284d208505fe82a6e87b2e3c7 Mon Sep 17 00:00:00 2001 From: Thomas von Deyen Date: Tue, 16 Jan 2024 20:49:05 +0100 Subject: [PATCH] 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. --- app/assets/stylesheets/alchemy/archive.scss | 4 ++++ app/assets/stylesheets/alchemy/elements.scss | 5 +++-- app/javascript/alchemy_admin/image_loader.js | 2 +- 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/alchemy/archive.scss b/app/assets/stylesheets/alchemy/archive.scss index ea406d9667..03a342b1a5 100644 --- 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 index ba60f7e676..408f5197bc 100644 --- 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 index e7b86968ee..c18c8dd04b 100644 --- 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 = `` + this.parent.innerHTML = `` console.error(message, evt) this.unbind() }