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

Add flash messages display

Browse Source
This commit is contained in:
cryptogopher 2023-04-05 02:29:21 +02:00
parent c611d57e91
commit 3c54867e51
4 changed files with 69 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/images/pictograms/check-circle-outline.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>check-circle-outline</title><g fill="white"><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z" /></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 323 B

1
app/assets/images/pictograms/information-slab-circle-outline.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>information-slab-circle-outline</title><g fill="white"><path d="M11 7V9H13V7H11M14 17V15H13V11H10V13H11V15H10V17H14M22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2C17.5 2 22 6.5 22 12M20 12C20 7.58 16.42 4 12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20C16.42 20 20 16.42 20 12Z" /></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 374 B

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

@ -18,10 +18,15 @@
font-family: system-ui;
}
.app-menu {
height: 2.1em;
body {
margin: 0 0.5em;
}
.app-menu a {
.application-menu {
height: 2.1em;
margin: 0.5em 0;
}
.application-menu a {
border: 0.1em solid;
border-color: #a0a0a0;
border-radius: 0.2em;
@ -31,7 +36,7 @@
font-weight: bold;
padding: 0.6em;
}
.app-menu a:hover {
.application-menu a:hover {
background-color: #009ade;
border-color: #009ade;
color: white;
@ -42,3 +47,49 @@
a:not(:hover) {
text-decoration: none;
}
.flashes {
height: 2.1em;
}
.flash {
align-items: center;
border-radius: 0.2em;
color: white;
display: flex;
font-size: 1.0em;
}
.flash.alert:before {
content: url('pictograms/check-circle-outline.svg');
height: 1.4em;
margin: 0 0.5em;
width: 1.4em;
}
.flash.alert {
border-color: #ff1f5b;
background-color: #ff1f5b;
}
.flash.notice:before {
content: url('pictograms/information-slab-circle-outline.svg');
height: 1.4em;
margin: 0 0.5em;
width: 1.4em;
}
.flash.notice {
border-color: #00cd6c;
background-color: #00cd6c;
}
.flash button {
background-color: inherit;
border: inherit;
border-radius: inherit;
color: inherit;
cursor: pointer;
font-size: 1.4em;
font-weight: bold;
margin-left:auto;
opacity: 0.6;
padding: 0.1em 0.2em;
}
.flash button:hover {
opacity: 1;
}

22
app/views/layouts/application.html.erb
View File

@ -11,19 +11,21 @@
</head>
<body>
<div class="app-menu">
<div class="application-menu">
<%= link_to_if user_signed_in?, t(:sign_out), destroy_user_session_path,
data: { turbo_method: :delete } do
link_to t(:sign_in), new_user_session_path
end %>
data: { turbo_method: :delete } do %>
<%= link_to t(:sign_in), new_user_session_path %>
<% end %>
</div>
<% if flash[:notice] %>
<div style="border: green"><%= flash[:notice] %></div>
<% end %>
<% if flash[:alert] %>
<div style="border: red"><%= flash[:alert] %></div>
<% end %>
<div class="flashes">
<% flash.each do |entry, message| %>
<div class="flash <%= entry %>">
<div><%= message %></div>
<button onclick="this.parentElement.style.display='none';">&times;</button>
</div>
<% end %>
</div>
<%= yield %>
</body>