Merge branch 'feat/alert-rework'

templates/default-layout.hamlet

@@ -24,11 +24,12 @@
       ^{pageactionprime}
 
       <!-- alerts -->
-      $forall (status, msg) <- mmsgs
+      <div .alerts>
-        $with status2 <- bool status "info" (status == "")
+        $forall (status, msg) <- mmsgs
-          <div class="alert alert-#{status2}">
+          $with status2 <- bool status "info" (status == "")
-            <div .alert__content>
+            <div class="alert alert-#{status2}">
-              #{msg}
+              <div .alert__content>
+                #{msg}
 
       <!-- actual content -->
 

templates/home.hamlet

@@ -2,13 +2,13 @@
   <h3>
     Re-Implementierung von <a href="https://uniworx.ifi.lmu.de/">UniWorX</a>
 
-  <div .alert .alert-danger>
+  <div .alerts>
-    <div .alert__content>
+    <div .alert .alert-danger>
-      Vorabversion!
+      <div .alert__content>
-      Die Implementierung von
+        Vorabversion!
-      UniWorkY ist noch nicht abgeschlossen.
+        Die Implementierung von
+        UniWorkY ist noch nicht abgeschlossen.
 
   <h1>Kurse mit offener Registrierung
     <div .container>
       ^{courseTable}
-

templates/homeUser.hamlet

@@ -2,11 +2,12 @@
   <h3>
     Re-Implementierung von <a href="https://uniworx.ifi.lmu.de/">UniWorX</a>
 
-  <div .alert .alert-danger>
+  <div .alerts>
-    <div .alert__content>
+    <div .alert .alert-danger>
-      Vorabversion!
+      <div .alert__content>
-      Die Implementierung von
+        Vorabversion!
-      UniWorkY ist noch nicht abgeschlossen.
+        Die Implementierung von
+        UniWorkY ist noch nicht abgeschlossen.
 
   <h1>Anstehende Übungsblätter
     <div .container>
@@ -20,4 +21,3 @@
   <h1>
     Anstehende Kursanmeldungen
   TODO
-

templates/profileData.hamlet

@@ -1,9 +1,10 @@
 <div .container>
-  <div .alert .alert-danger>
+  <div .alerts>
-    <div .alert__content>
+    <div .alert .alert-danger>
-      TODO: Alle Benutzerbezogenen Daten sollen hier angezeigt
+      <div .alert__content>
-      und verlinkt werden
+        TODO: Alle Benutzerbezogenen Daten sollen hier angezeigt
-      (alle Abgaben, Klausurnoten, etc.)
+        und verlinkt werden
+        (alle Abgaben, Klausurnoten, etc.)
 
   <em> TODO: Hier mehr Daten in Tabellen anzeigen!
 

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]);
   }
 
 })();

templates/standalone/alerts.lucius

@@ -1,72 +1,190 @@
 /* ALERTS */
+.alerts {
+  position: fixed;
+  bottom: 5%;
+  right: 0;
+  z-index: 20;
+}
 .alert {
   position: relative;
-  display: flex;
+  background-color: var(--color-dark);
-  justify-content: space-between;
+  border-top-left-radius: 4px;
-  background-color: #f5f5f5;
+  border-bottom-left-radius: 4px;
+  text-align: right;
   font-size: 1rem;
-  border-color: #dbdbdb;
+  color: #f3f3f3;
-  border-radius: 4px;
-  border-style: solid;
-  border-width: 0 0 0 4px;
-  color: #4a4a4a;
   z-index: 0;
   max-height: 200px;
-  transition: all .2s ease-in-out;
+  transition: all .3s ease-in-out;
-  transform-origin: top;
+  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;
+  position: absolute;
-  align-items: center;
+  left: 20px;
-  justify-content: center;
+  top: 0;
-  padding: 0 10px;
+  width: 20px;
-  background-color: var(--color-light);
+  height: 100%;
-  color: var(--color-lightwhite);
+  /* TODO: remove next line as soon as messagerenderer-error in julius gets resolved */
-  transition: all .2s ease;
+  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 {
+  .alert__content {
-    background-color: var(--color-success);
+
+    &::before {
+      background-color: var(--color-success);
+    }
+
+    &::after {
+      content: '\f05a';
+      color: var(--color-success);
+    }
   }
 }
 
 .alert-warning {
-  background-color: #fffdf5;
+  background-color: var(--color-warning);
-  border-color: var(--color-warning);
+  color: var(--color-dark);
 
   .alert__close {
-    background-color: var(--color-warning);
+    color: var(--color-warning);
-    color: var(--color-dark);
+
+    /* 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: var(--color-error);
-  background-color: #fff5f7;
+  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%);
 }

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);