diff --git a/templates/default-layout.hamlet b/templates/default-layout.hamlet index 7deaa3062..87827d44f 100644 --- a/templates/default-layout.hamlet +++ b/templates/default-layout.hamlet @@ -24,11 +24,12 @@ ^{pageactionprime} - $forall (status, msg) <- mmsgs - $with status2 <- bool status "info" (status == "") -
-
- #{msg} +
+ $forall (status, msg) <- mmsgs + $with status2 <- bool status "info" (status == "") +
+
+ #{msg} diff --git a/templates/home.hamlet b/templates/home.hamlet index 79d063cef..01b241c6c 100644 --- a/templates/home.hamlet +++ b/templates/home.hamlet @@ -2,13 +2,13 @@

Re-Implementierung von UniWorX -
-
- Vorabversion! - Die Implementierung von - UniWorkY ist noch nicht abgeschlossen. +
+
+
+ Vorabversion! + Die Implementierung von + UniWorkY ist noch nicht abgeschlossen.

Kurse mit offener Registrierung
^{courseTable} - diff --git a/templates/homeUser.hamlet b/templates/homeUser.hamlet index fd7ba3f10..70aaac6f5 100644 --- a/templates/homeUser.hamlet +++ b/templates/homeUser.hamlet @@ -2,11 +2,12 @@

Re-Implementierung von UniWorX -
-
- Vorabversion! - Die Implementierung von - UniWorkY ist noch nicht abgeschlossen. +
+
+
+ Vorabversion! + Die Implementierung von + UniWorkY ist noch nicht abgeschlossen.

Anstehende Übungsblätter
@@ -20,4 +21,3 @@

Anstehende Kursanmeldungen TODO - diff --git a/templates/profileData.hamlet b/templates/profileData.hamlet index 1c1930614..6f7564cdc 100644 --- a/templates/profileData.hamlet +++ b/templates/profileData.hamlet @@ -1,9 +1,10 @@
-
-
- TODO: Alle Benutzerbezogenen Daten sollen hier angezeigt - und verlinkt werden - (alle Abgaben, Klausurnoten, etc.) +
+
+
+ TODO: Alle Benutzerbezogenen Daten sollen hier angezeigt + und verlinkt werden + (alle Abgaben, Klausurnoten, etc.) TODO: Hier mehr Daten in Tabellen anzeigen! diff --git a/templates/standalone/alerts.julius b/templates/standalone/alerts.julius index af87ed683..ebf1f744d 100644 --- a/templates/standalone/alerts.julius +++ b/templates/standalone/alerts.julius @@ -10,7 +10,7 @@ closeEl.addEventListener('click', function(event) { alertEl.classList.add('alert--invisible'); }); - alertEl.appendChild(closeEl); + alertEl.insertBefore(closeEl, alertEl.children[0]); } })(); diff --git a/templates/standalone/alerts.lucius b/templates/standalone/alerts.lucius index 69869d997..e18e646ff 100644 --- a/templates/standalone/alerts.lucius +++ b/templates/standalone/alerts.lucius @@ -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%); } diff --git a/templates/widgets/asidenav.lucius b/templates/widgets/asidenav.lucius index 82b9bd356..789752f71 100644 --- a/templates/widgets/asidenav.lucius +++ b/templates/widgets/asidenav.lucius @@ -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);