diff --git a/app/assets/stylesheets/components/form.css b/app/assets/stylesheets/components/form.css index 738a51c..5db9d26 100644 --- a/app/assets/stylesheets/components/form.css +++ b/app/assets/stylesheets/components/form.css @@ -31,6 +31,27 @@ input[type=submit], input[type=button] { gap: var(--spacing-2); } +.flash-message { + flex: 1; +} + +.flash-close { + margin-left: auto; + border: 0; + background: transparent; + color: inherit; + font: inherit; + cursor: pointer; + padding: 0; + line-height: 1; + opacity: 0.8; + + &:hover, + &:focus-visible { + opacity: 1; + } +} + .flash.alert { background-color: var(--color-danger-soft); color: var(--color-danger); diff --git a/app/javascript/controllers/flash_controller.js b/app/javascript/controllers/flash_controller.js new file mode 100644 index 0000000..763da70 --- /dev/null +++ b/app/javascript/controllers/flash_controller.js @@ -0,0 +1,7 @@ +import { Controller } from "@hotwired/stimulus" + +export default class extends Controller { + dismiss() { + this.element.remove() + } +} diff --git a/app/views/layouts/application.html.slim b/app/views/layouts/application.html.slim index 492a1ac..4d93bda 100644 --- a/app/views/layouts/application.html.slim +++ b/app/views/layouts/application.html.slim @@ -134,14 +134,16 @@ html data-theme="light" .layout-sidebar-overlay data-sidebar-target="overlay" data-action="click->sidebar#closeMobile" main.container - flash.each do |type, message| - .flash class=type + .flash class=type data-controller="flash" = flash_icon(type) - = message + span.flash-message = message + button.flash-close type="button" aria-label="Dismiss message" data-action="flash#dismiss" x = yield - else main.container - flash.each do |type, message| - .flash class=type + .flash class=type data-controller="flash" = flash_icon(type) - = message + span.flash-message = message + button.flash-close type="button" aria-label="Dismiss message" data-action="flash#dismiss" x = yield