Karavel/fixin.me
0
0
Fork 0
forked from fixin.me/fixin.me
Code Pull Requests Activity

Allow display of multiple flash messages

Browse Source
This commit is contained in:
cryptogopher 2024-03-15 02:29:58 +01:00
parent 69db87f9c6
commit 2c0466b51a
2 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/assets/stylesheets/application.css
View File

@ -213,20 +213,22 @@ input[type=text]:read-only {
#flashes { #flashes {
align-items: center; display: grid;
display: flex; gap: 0.2em;
flex-direction: column; grid-template-columns: 1fr auto auto auto 1fr;
left: 0; left: 0;
pointer-events: none; pointer-events: none;
position: fixed; position: fixed;
right: 0; right: 0;
top: 1em; top: 0.4em;
} }
.flash { .flash {
align-items: center; align-items: center;
border-radius: 0.2em; border-radius: 0.2em;
color: white; color: white;
display: flex; display: grid;
grid-column: 2/5;
grid-template-columns: subgrid;
pointer-events: auto; pointer-events: auto;
} }
.flash.alert:before { .flash.alert:before {
@ -249,18 +251,22 @@ input[type=text]:read-only {
border-color: #009ade; border-color: #009ade;
background-color: #009ade; background-color: #009ade;
} }
.flash > div {
grid-column: 2;
}
/* NOTE: currently flash button inherits some unnecessary styles from generic /* NOTE: currently flash button inherits some unnecessary styles from generic
* button. */ * button. */
.flash button { .flash > button {
border: none; border: none;
color: inherit; color: inherit;
cursor: pointer; cursor: pointer;
font-size: 1.4em; font-size: 1.4em;
font-weight: bold; font-weight: bold;
grid-column: 3;
opacity: 0.6; opacity: 0.6;
padding: 0.2em 0.4em; padding: 0.2em 0.4em;
} }
.flash button:hover { .flash > button:hover {
opacity: 1; opacity: 1;
} }

4
app/helpers/application_helper.rb
View File

@ -90,11 +90,13 @@ module ApplicationHelper
end end
def render_flash_messages def render_flash_messages
flash.map do |entry, message| flash.map do |entry, messages|
Array(messages).map do |message|
tag.div class: "flash #{entry}" do tag.div class: "flash #{entry}" do
tag.div(sanitize(message)) + tag.button(sanitize("×"), tabindex: -1, tag.div(sanitize(message)) + tag.button(sanitize("×"), tabindex: -1,
onclick: "this.parentElement.remove();") onclick: "this.parentElement.remove();")
end end
end
end.join.html_safe end.join.html_safe
end end