barbie-bot/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
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;
}