fraport/fradrive-old
fraport/fradrive-old
Archived
3
1
Fork 0
Code Issues 65 Pull Requests 5 Actions Packages Projects Releases 197 Wiki Activity

style(tooltips): content to the right and fixed width

Browse Source
This commit is contained in:
Sarah Vaupel 2019-10-01 15:17:14 +02:00
parent e5c7aa03db
commit 0c2f58fa42
3 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/utils/tooltips/tooltips.scss
View File

@ -61,7 +61,7 @@
display: none; display: none;
top: -10px; top: -10px;
transform: translateY(-100%); transform: translateY(-100%);
right: 3px; left: 3px;
width: 275px; width: 275px;
z-index: 10; z-index: 10;
background-color: #fafafa; background-color: #fafafa;
@ -76,7 +76,7 @@
background-color: #fafafa; background-color: #fafafa;
transform: rotate(45deg); transform: rotate(45deg);
position: absolute; position: absolute;
right: 10px; left: 10px;
bottom: -8px; bottom: -8px;
} }
} }

6
src/Utils/Message.hs
View File

@ -196,7 +196,11 @@ getMessages = fmap decodeMessage <$> ClassyPrelude.Yesod.getMessages
messageTooltip :: forall site. Message -> WidgetFor site () messageTooltip :: forall site. Message -> WidgetFor site ()
messageTooltip Message{..} = let urgency = statusToUrgencyClass messageStatus messageTooltip Message{..} = let urgency = statusToUrgencyClass messageStatus
ic = iconText $ case messageIcon of ic = iconText $ case messageIcon of
Nothing -> IconWarning Nothing -> case messageStatus of
Utils.Message.Error -> IconProblem
Utils.Message.Warning -> IconWarning
Utils.Message.Success -> IconOK
Utils.Message.Info -> IconTooltipDefault
Just i -> i Just i -> i
tooltip = toWidget messageContent :: WidgetFor site () tooltip = toWidget messageContent :: WidgetFor site ()
in $(whamletFile "templates/widgets/tooltip.hamlet") in $(whamletFile "templates/widgets/tooltip.hamlet")

2
templates/widgets/tooltip.hamlet
View File

@ -1,7 +1,7 @@
$newline never $newline never
<div .tooltip> <div .tooltip>
<div .tooltip__handle .#{urgency}> <div .tooltip__handle .#{urgency} .fa-fw>
<i .fas .fa-^{ic}> <i .fas .fa-^{ic}>
<div .tooltip__content> <div .tooltip__content>
^{tooltip} ^{tooltip}