Merge branch 'feat/alert-rework'
This commit is contained in:
Felix Hamann
commit
c3fb06fa67
@ -24,11 +24,12 @@
|
||||
^{pageactionprime}
|
||||
|
||||
<!-- alerts -->
|
||||
$forall (status, msg) <- mmsgs
|
||||
$with status2 <- bool status "info" (status == "")
|
||||
<div class="alert alert-#{status2}">
|
||||
<div .alert__content>
|
||||
#{msg}
|
||||
<div .alerts>
|
||||
$forall (status, msg) <- mmsgs
|
||||
$with status2 <- bool status "info" (status == "")
|
||||
<div class="alert alert-#{status2}">
|
||||
<div .alert__content>
|
||||
#{msg}
|
||||
|
||||
<!-- actual content -->
|
||||
|
||||
|
||||
@ -2,13 +2,13 @@
|
||||
<h3>
|
||||
Re-Implementierung von <a href="https://uniworx.ifi.lmu.de/">UniWorX</a>
|
||||
|
||||
<div .alert .alert-danger>
|
||||
<div .alert__content>
|
||||
Vorabversion!
|
||||
Die Implementierung von
|
||||
UniWorkY ist noch nicht abgeschlossen.
|
||||
<div .alerts>
|
||||
<div .alert .alert-danger>
|
||||
<div .alert__content>
|
||||
Vorabversion!
|
||||
Die Implementierung von
|
||||
UniWorkY ist noch nicht abgeschlossen.
|
||||
|
||||
<h1>Kurse mit offener Registrierung
|
||||
<div .container>
|
||||
^{courseTable}
|
||||
|
||||
|
||||
@ -2,11 +2,12 @@
|
||||
<h3>
|
||||
Re-Implementierung von <a href="https://uniworx.ifi.lmu.de/">UniWorX</a>
|
||||
|
||||
<div .alert .alert-danger>
|
||||
<div .alert__content>
|
||||
Vorabversion!
|
||||
Die Implementierung von
|
||||
UniWorkY ist noch nicht abgeschlossen.
|
||||
<div .alerts>
|
||||
<div .alert .alert-danger>
|
||||
<div .alert__content>
|
||||
Vorabversion!
|
||||
Die Implementierung von
|
||||
UniWorkY ist noch nicht abgeschlossen.
|
||||
|
||||
<h1>Anstehende Übungsblätter
|
||||
<div .container>
|
||||
@ -20,4 +21,3 @@
|
||||
<h1>
|
||||
Anstehende Kursanmeldungen
|
||||
TODO
|
||||
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
<div .container>
|
||||
<div .alert .alert-danger>
|
||||
<div .alert__content>
|
||||
TODO: Alle Benutzerbezogenen Daten sollen hier angezeigt
|
||||
und verlinkt werden
|
||||
(alle Abgaben, Klausurnoten, etc.)
|
||||
<div .alerts>
|
||||
<div .alert .alert-danger>
|
||||
<div .alert__content>
|
||||
TODO: Alle Benutzerbezogenen Daten sollen hier angezeigt
|
||||
und verlinkt werden
|
||||
(alle Abgaben, Klausurnoten, etc.)
|
||||
|
||||
<em> TODO: Hier mehr Daten in Tabellen anzeigen!
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
closeEl.addEventListener('click', function(event) {
|
||||
alertEl.classList.add('alert--invisible');
|
||||
});
|
||||
alertEl.appendChild(closeEl);
|
||||
alertEl.insertBefore(closeEl, alertEl.children[0]);
|
||||
}
|
||||
|
||||
})();
|
||||
|
||||
@ -1,72 +1,190 @@
|
||||
/* ALERTS */
|
||||
.alerts {
|
||||
position: fixed;
|
||||
bottom: 5%;
|
||||
right: 0;
|
||||
z-index: 20;
|
||||
}
|
||||
.alert {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #f5f5f5;
|
||||
background-color: var(--color-dark);
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
text-align: right;
|
||||
font-size: 1rem;
|
||||
border-color: #dbdbdb;
|
||||
border-radius: 4px;
|
||||
border-style: solid;
|
||||
border-width: 0 0 0 4px;
|
||||
color: #4a4a4a;
|
||||
color: #f3f3f3;
|
||||
z-index: 0;
|
||||
max-height: 200px;
|
||||
transition: all .2s ease-in-out;
|
||||
transform-origin: top;
|
||||
transition: all .3s ease-in-out;
|
||||
padding-left: 30px;
|
||||
margin-left: 20px;
|
||||
margin-right: 60px;
|
||||
|
||||
+ .alert {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
.alert__content {
|
||||
|
||||
&::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
||||
.alert {
|
||||
min-width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.alert__content {
|
||||
padding: 1.25em 1.5em;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -60px;
|
||||
width: 60px;
|
||||
height: calc(100% - 0px);
|
||||
background-color: var(--color-dark);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '\f05a';
|
||||
position: absolute;
|
||||
display: flex;
|
||||
font-family: "Font Awesome 5 Free";
|
||||
top: 0;
|
||||
right: -60px;
|
||||
width: 60px;
|
||||
height: calc(100% - 0px);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 40px;
|
||||
color: var(--color-dark);
|
||||
}
|
||||
}
|
||||
|
||||
.alert__close {
|
||||
cursor: pointer;
|
||||
text-align: right;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 10px;
|
||||
background-color: var(--color-light);
|
||||
color: var(--color-lightwhite);
|
||||
transition: all .2s ease;
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 0;
|
||||
width: 20px;
|
||||
height: 100%;
|
||||
/* TODO: remove next line as soon as messagerenderer-error in julius gets resolved */
|
||||
color: var(--color-dark);
|
||||
transition: all .3s ease;
|
||||
z-index: 40;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-primary);
|
||||
transform: scale(1.05, 1.05);
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 0 4px white;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '\f00d';
|
||||
position: absolute;
|
||||
font-family: "Font Awesome 5 Free";
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: flex;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 50%;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
transition: all .15s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background-color: #f6fef9;
|
||||
border-color: var(--color-success);
|
||||
|
||||
.alert__close {
|
||||
background-color: var(--color-success);
|
||||
.alert__content {
|
||||
|
||||
&::before {
|
||||
background-color: var(--color-success);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '\f05a';
|
||||
color: var(--color-success);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
background-color: #fffdf5;
|
||||
border-color: var(--color-warning);
|
||||
background-color: var(--color-warning);
|
||||
color: var(--color-dark);
|
||||
|
||||
.alert__close {
|
||||
background-color: var(--color-warning);
|
||||
color: var(--color-dark);
|
||||
color: var(--color-warning);
|
||||
|
||||
/* TODO: remove me as soon as messagerenderer-error in julius gets resolved */
|
||||
&::before {
|
||||
color: var(--color-dark);
|
||||
}
|
||||
}
|
||||
|
||||
.alert__content {
|
||||
|
||||
&::before {
|
||||
background-color: var(--color-warning);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '\f071';
|
||||
color: var(--color-warning);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alert-danger,
|
||||
.alert-error {
|
||||
border-color: var(--color-error);
|
||||
background-color: #fff5f7;
|
||||
background-color: var(--color-error);
|
||||
color: var(--color-lightwhite);
|
||||
|
||||
.alert__close {
|
||||
background-color: var(--color-error);
|
||||
color: var(--color-error);
|
||||
|
||||
/* TODO: remove me as soon as messagerenderer-error in julius gets resolved */
|
||||
&::before {
|
||||
color: var(--color-lightwhite);
|
||||
}
|
||||
}
|
||||
|
||||
.alert__content {
|
||||
|
||||
&::before {
|
||||
background-color: var(--color-error);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '\f071';
|
||||
color: var(--color-error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alert--invisible {
|
||||
max-height: 0;
|
||||
transform: scaleY(0);
|
||||
transform: translateX(120%);
|
||||
}
|
||||
|
||||
@ -43,6 +43,10 @@
|
||||
.asidenav__list-item {
|
||||
position: relative;
|
||||
color: var(--color-lightwhite);
|
||||
min-height: 50px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-link);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user