alerts from bottom and uniformely dark with color hints

closes #189

src/Handler/Sheet.hs

@@ -451,7 +451,7 @@ handleSheetEdit tid ssh csh msId template dbAction = do
             whenIsJust sfSolutionF $ insertSheetFile' sid SheetSolution
             whenIsJust sfMarkingF  $ insertSheetFile' sid SheetMarking
             insert_ $ SheetEdit aid actTime sid
-            addMessageI Info $ MsgSheetEditOk tid ssh csh sfName
+            addMessageI Success $ MsgSheetEditOk tid ssh csh sfName
             -- Sanity checks generating warnings only, but not errors!
             warnTermDays tid [sfVisibleFrom, Just sfActiveFrom, Just sfActiveTo, sfHintFrom, sfSolutionFrom]
             return True

templates/standalone/alerts.lucius

@@ -3,39 +3,48 @@
   .alert
     Regular Info Alert
     Disappears automatically after 30 seconds
-    Disappears after x seconds if explicitly specified via data-decay='x' on html element
+    Disappears after x seconds if explicitly specified via data-decay='x'
     Can be told not to disappear with data-decay='0'
 
-  .alert-warning, .alert-error
+  .alert-success
-    Warning or Error alert
+    Disappears automatically after 30 seconds
-    These don't disappear, only difference is color
+
-    .alert-warning is orange regardless of user's selected theme
+  .alert-warning
-    .alert-error is red regardless of user's selected theme
+    Does not disappear
+    Orange regardless of user's selected theme
+
+  .alert-error
+    Does not disappear
+    Red regardless of user's selected theme
 
  */
 .alerts {
   position: fixed;
-  bottom: 5%;
+  bottom: 0;
-  right: 0;
+  right: 5%;
   z-index: 20;
   text-align: right;
   display: flex;
   flex-direction: column;
 }
 
+@media (max-width: 425px) {
+
+  .alerts {
+    left: 5%;
+  }
+}
+
 .alert {
   position: relative;
-  display: inline-block;
+  display: block;
-  background-color: var(--color-dark);
+  background-color: var(--color-lightblack);
   font-size: 1rem;
   color: var(--color-lightwhite);
   z-index: 0;
-  max-height: 200px;
   transition: all .3s ease-in-out;
   padding-left: 20px;
-  margin-left: 20px;
   animation: slide-in-alert .2s ease-out forwards;
-  margin-bottom: 20px;
 
   &:hover {
 
@@ -46,43 +55,32 @@
       }
     }
   }
+
+  + .alert:not(.alert--invisible) {
+    margin-top: 10px;
+  }
 }
 
 @keyframes slide-in-alert {
   from {
-    left: 120%;
+    transform: translateY(120%);
   }
   to {
-    left: 0;
+    transform: translateY(0);
   }
 }
 
 @media (min-width: 425px) {
 
   .alert {
-    margin-left: 80px;
+    max-width: 350px;
-    max-width: 420px;
-  }
-}
-
-@media (min-width: 768px) {
-
-  .alert {
     padding-left: 30px;
-    margin-left: 40px;
-    min-width: 400px;
-  }
-}
-
-@media (min-width: 1024px) {
-
-  .alert {
-    min-width: 350px;
   }
 }
 
 .alert__content {
-  padding: 8px 1.5em;
+  padding: 8px 24px;
+  padding-left: 25px;
   min-height: 40px;
   position: relative;
   display: flex;
@@ -92,14 +90,6 @@
   text-align: left;
 }
 
-@media (max-width: 768px) {
-
-  .alert__content {
-    padding: 4px 7px;
-    padding-left: 25px;
-  }
-}
-
 .alert__close {
   cursor: pointer;
   text-align: right;
@@ -145,18 +135,21 @@
   }
 }
 
-.alert-warning {
+.alert-success {
-  background-color: var(--color-warning);
+  background-image: linear-gradient(to right, var(--color-success) -40px, transparent 70px);
+}
+
+.alert-warning {
+  background-image: linear-gradient(to right, var(--color-warning) -40px, transparent 70px);
 }
 
-.alert-danger,
 .alert-error {
-  background-color: var(--color-error);
+  background-image: linear-gradient(to right, var(--color-error) -40px, transparent 70px);
 }
 
 .alert--invisible {
   max-height: 0;
-  transform: translateX(120%);
+  animation: slide-in-alert .2s ease-out reverse;
   margin-bottom: 0;
   overflow: hidden;
 }