added styling and behaviour for alerts

messages/de.msg

@@ -53,4 +53,5 @@ NotAParticipant user@Text tid@TermIdentifier csh@Text: #{user} ist nicht im Kurs
 HomeHeading: Startseite
 TermsHeading: Semesterübersicht
 
-NumCourses n@Int64: #{tshow n} Kurse
+NumCourses n@Int64: #{tshow n} Kurse
+CloseAlert: Schliessen

src/Foundation.hs

@@ -481,6 +481,7 @@ instance Yesod UniWorX where
             $(widgetFile "standalone/showHide")
             $(widgetFile "standalone/inputs")
             $(widgetFile "standalone/tabber")
+            $(widgetFile "standalone/alerts")
         withUrlRenderer $(hamletFile "templates/default-layout-wrapper.hamlet")
 
     -- The page to be redirected to when authentication is required.

templates/default-layout.hamlet

@@ -22,7 +22,9 @@
     <!-- alerts -->
     $forall (status, msg) <- mmsgs
       $with status2 <- bool status "info" (status == "")
-        <div class="alert alert-#{status2}">#{msg}
+        <div class="alert alert-#{status2}">
+          <div .alert__content>#{msg}
+          <div .alert__close>_{MsgCloseAlert}
 
     <!-- actual content -->
 

templates/default-layout.lucius

@@ -1,8 +1,8 @@
 :root {
   /* THEME INDEPENDENT COLORS */
-  --color-error: red;
-  --color-warning: #fe7700;
-  --color-success: #2dcc35;
+  --color-error: #ff3860;
+  --color-warning: #ffdd57;
+  --color-success: #23d160;
   --color-info: #c4c4c4;
   --color-lightblack: #1A2A36;
   --color-lightwhite: #FCFFFA;
@@ -264,7 +264,3 @@ a.btn.btn-info:hover,
 .btn.btn-info:hover {
   background-color: var(--color-grey)
 }
-
-.alert-debug {
-  background-color: rgb(240, 30, 240);
-}

templates/standalone/alerts.hamlet

@@ -0,0 +1 @@
+<!-- only here to be able to include alerts using `toWidget` -->

templates/standalone/alerts.julius

@@ -0,0 +1,20 @@
+(function() {
+  'use strict';
+
+  window.utils = window.utils || {};
+
+  window.utils.alert = function(alertEl) {
+    alertEl.querySelector('.alert__close').addEventListener('click', function(event) {
+      alertEl.classList.add('alert--invisible');
+    });
+  }
+
+})();
+
+document.addEventListener('DOMContentLoaded', function() {
+
+  // setup alerts
+  Array.from(document.querySelectorAll('.alert')).forEach(function(alertEl) {
+    window.utils.alert(alertEl);
+  });
+});

templates/standalone/alerts.lucius

@@ -0,0 +1,71 @@
+/* ALERTS */
+.alert {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  background-color: #f5f5f5;
+  font-size: 1rem;
+  border-color: #dbdbdb;
+  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;
+  transform-origin: top;
+}
+
+.alert__content {
+  padding: 1.25em 1.5em;
+}
+
+.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;
+
+  &:hover {
+    background-color: var(--color-primary);
+    transform: scale(1.05, 1.05);
+  }
+}
+
+.alert-success {
+  background-color: #f6fef9;
+  border-color: var(--color-success);
+
+  .alert__close {
+    background-color: var(--color-success);
+  }
+}
+
+.alert-warning {
+  background-color: #fffdf5;
+  border-color: var(--color-warning);
+
+  .alert__close {
+    background-color: var(--color-warning);
+    color: var(--color-dark);
+  }
+}
+
+.alert-error {
+  border-color: var(--color-error);
+  background-color: #fff5f7;
+
+  .alert__close {
+    background-color: var(--color-error);
+  }
+}
+
+.alert--invisible {
+  max-height: 0;
+  transform: scaleY(0);
+}

templates/standalone/inputs.lucius

@@ -76,7 +76,7 @@ input[type="email"] {
   }
 
   input, textarea {
-    border-bottom-color: var(--color-lighter);
+    border-bottom-color: var(--color-primary);
   }
 }
 
@@ -112,6 +112,7 @@ input[type="email"]:focus {
 /* TEXTAREAS */
 textarea {
   -webkit-appearance: none;
+  appearance: none;
   border: 1px solid transparent;
   border-radius: 2px;
   display: inline-flex;
@@ -143,6 +144,7 @@ input[type="checkbox"] {
   height: 20px;
   width: 20px;
   -webkit-appearance: none;
+  appearance: none;
   cursor: pointer;
 }
 input[type="checkbox"]::before {

templates/widgets/breadcrumbs.lucius

@@ -5,7 +5,7 @@
   color: white;
   margin-left: -40px;
   margin-right: -40px;
-  margin-bottom: 10px;
+  margin-bottom: 20px;
   transition: margin-bottom .2s ease;
 }