fraport/fradrive-old
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

alert-tests on admin-demo-page and responsiveness fixes

Browse Source
This commit is contained in:
Felix Hamann 2018-06-29 23:49:29 +02:00
parent f92f8a1ed3
commit 6b24e7ab80
2 changed files with 28 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
templates/adminTest.hamlet
View File

@ -2,18 +2,17 @@
<div .alert> <div .alert>
<div .alert__content> <div .alert__content>
UniWorkY ist noch nicht abgeschlossen. UniWorkY ist noch nicht abgeschlossen.
<div .alert .alert-success> <div .alert .alert-success>
<div .alert__content> <div .alert__content>
Die Korrektoren wurden aktualisiert! Die Korrektoren wurden aktualisiert! (.alert-success)
<div .alert .alert-warning> <div .alert .alert-warning>
<div .alert__content> <div .alert__content>
Ich bin mir nicht ganz sicher ob das gerade gut war... willst dus nochmal probieren? ... willst dus nochmal probieren? (.alert-warning)
<div .alert .alert-danger> <div .alert .alert-danger>
<div .alert__content> <div .alert__content>
Nicht so gut! Egal was das war. Es hat mir nicht gefallen! Nicht so gut! Egal was das war. Es hat mir nicht gefallen! (.alert-error)
<div .container> <div .container>
<h1>Uniworky - Admin Demopage <h1>Uniworky - Admin Demopage

29
templates/standalone/alerts.lucius
View File

@ -4,13 +4,16 @@
bottom: 5%; bottom: 5%;
right: 0; right: 0;
z-index: 20; z-index: 20;
text-align: right;
display: flex;
flex-direction: column;
} }
.alert { .alert {
position: relative; position: relative;
display: inline-block;
background-color: var(--color-dark); background-color: var(--color-dark);
border-top-left-radius: 4px; border-top-left-radius: 4px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
text-align: right;
font-size: 1rem; font-size: 1rem;
color: #f3f3f3; color: #f3f3f3;
z-index: 0; z-index: 0;
@ -19,8 +22,9 @@
padding-left: 30px; padding-left: 30px;
margin-left: 20px; margin-left: 20px;
margin-right: 60px; margin-right: 60px;
box-shadow: 0 0 7px var(--color-dark);
+ .alert { + .alert:not(.alert--invisible) {
margin-top: 20px; margin-top: 20px;
} }
@ -35,8 +39,23 @@
} }
} }
@media (min-width: 425px) {
.alert {
margin-left: 80px;
}
}
@media (min-width: 768px) { @media (min-width: 768px) {
.alert {
margin-left: 40px;
min-width: 400px;
}
}
@media (min-width: 1024px) {
.alert { .alert {
min-width: 400px; min-width: 400px;
} }
@ -79,9 +98,9 @@
cursor: pointer; cursor: pointer;
text-align: right; text-align: right;
position: absolute; position: absolute;
left: 20px; left: 0px;
top: 0; top: 0;
width: 20px; width: 60px;
height: 100%; height: 100%;
/* TODO: remove next line as soon as messagerenderer-error in julius gets resolved */ /* TODO: remove next line as soon as messagerenderer-error in julius gets resolved */
color: var(--color-dark); color: var(--color-dark);
@ -134,6 +153,7 @@
.alert-warning { .alert-warning {
background-color: var(--color-warning); background-color: var(--color-warning);
color: var(--color-dark); color: var(--color-dark);
box-shadow: 0 0 7px var(--color-warning);
.alert__close { .alert__close {
color: var(--color-warning); color: var(--color-warning);
@ -161,6 +181,7 @@
.alert-error { .alert-error {
background-color: var(--color-error); background-color: var(--color-error);
color: var(--color-lightwhite); color: var(--color-lightwhite);
box-shadow: 0 0 7px var(--color-error);
.alert__close { .alert__close {
color: var(--color-error); color: var(--color-error);