From 41167afb04aeaf13f47f8af90295862307b47b1f Mon Sep 17 00:00:00 2001 From: Felix Hamann Date: Sun, 30 Sep 2018 23:39:31 +0200 Subject: [PATCH] alerts from bottom and uniformely dark with color hints closes #189 --- src/Handler/Sheet.hs | 16 +++--- templates/standalone/alerts.lucius | 85 ++++++++++++++---------------- 2 files changed, 47 insertions(+), 54 deletions(-) diff --git a/src/Handler/Sheet.hs b/src/Handler/Sheet.hs index 67d119c10..510e92117 100644 --- a/src/Handler/Sheet.hs +++ b/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 diff --git a/templates/standalone/alerts.lucius b/templates/standalone/alerts.lucius index 9501f1329..43f3065ca 100644 --- a/templates/standalone/alerts.lucius +++ b/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; }