alerts from bottom and uniformely dark with color hints

closes #189

src/Handler/Sheet.hs

@@ -31,7 +31,7 @@ import Handler.Utils.Table.Cells
 -- import Colonnade hiding (fromMaybe, singleton, bool)
 import qualified Yesod.Colonnade as Yesod
 import Text.Blaze (text)
--- 
+--
 -- import qualified Data.UUID.Cryptographic as UUID
 import qualified Data.Conduit.List as C
 
@@ -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
@@ -522,7 +522,7 @@ insertSheetFile' sid ftype fs = do
       fid <- insert file
       void . insert $ SheetFile sid fid ftype -- cannot fail due to uniqueness, since we generated a fresh FileId in the previous step
 
-  
+
 data CorrectorForm = CorrectorForm
   { cfUserId :: UserId
   , cfUserName :: Text
@@ -547,9 +547,9 @@ defaultLoads shid = do
           return . E.min_ $ sheetEdit E.^. SheetEditTime
 
     E.where_ $ sheet E.^. SheetCourse E.==. E.val cId
-    
+
     E.orderBy [E.desc creationTime]
-  
+
     return (sheetCorrector E.^. SheetCorrectorUser, sheetCorrector E.^. SheetCorrectorLoad, sheetCorrector E.^. SheetCorrectorState)
   where
     toMap :: [(E.Value UserId, E.Value Load, E.Value CorrectorState)] -> Loads
@@ -616,11 +616,11 @@ correctorForm shid = do
     _ -> return loads''
 
   let deletions' = deletions `Set.difference` Map.keysSet loads
-  
+
   names <- fmap (Map.fromList . map (\(E.Value a, E.Value b) -> (a, b))) . lift . runDB . E.select . E.from $ \user -> do
     E.where_ $ user E.^. UserId `E.in_` E.valList (Map.keys  loads)
     return $ (user E.^. UserId, user E.^. UserDisplayName)
-    
+
   let
     constructFields :: (UserId, Text, (CorrectorState, Load)) -> MForm Handler CorrectorForm
     constructFields (uid, uname, (state, Load{..})) = do
@@ -691,7 +691,7 @@ correctorForm shid = do
                              |]
                            }
                        ])
-  
+
   -- Eingabebox für Korrektor hinzufügen
   -- Eingabe für Korrekt ausgefüllt: FormMissing zurückschicken um dann Feld hinzuzufügen
 

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
-    Warning or Error alert
-    These don't disappear, only difference is color
-    .alert-warning is orange regardless of user's selected theme
-    .alert-error is red regardless of user's selected theme
+  .alert-success
+    Disappears automatically after 30 seconds
+
+  .alert-warning
+    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%;
-  right: 0;
+  bottom: 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;
-  background-color: var(--color-dark);
+  display: block;
+  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: 420px;
-  }
-}
-
-@media (min-width: 768px) {
-
-  .alert {
+    max-width: 350px;
     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 {
-  background-color: var(--color-warning);
+.alert-success {
+  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;
 }