NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-03 11:30:38 +03:00
Code Issues Packages Projects Releases Wiki Activity

Adjust the banner to accomodate the code details

Browse Source
This commit is contained in:
Tessa Kelly 2021-05-14 14:59:49 -07:00
parent ad97d4ded7
commit 1f61dc5f0c
1 changed files with 63 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
src/Nri/Ui/Message/V3.elm
View File

@ -149,39 +149,43 @@ view attributes_ =
([ ExtraAttributes.nriDescription "Nri-Ui-Message-large" ([ ExtraAttributes.nriDescription "Nri-Ui-Message-large"
, Attributes.css , Attributes.css
(baseStyles (baseStyles
++ [ displayFlex ++ [ -- Box
, alignItems center borderRadius (px 8)
-- Box
, borderRadius (px 8)
, padding (px 20) , padding (px 20)
, backgroundColor_ , backgroundColor_
-- Fonts
, fontSize (px 15)
, fontWeight (int 600)
, lineHeight (px 21)
] ]
) )
] ]
++ role ++ role
++ attributes.customAttributes ++ attributes.customAttributes
) )
[ icon_ [ div
, div
[ Attributes.css [ Attributes.css
[ minWidth (px 100) [ displayFlex
, flexBasis (px 100) , alignItems center
, flexGrow (int 1)
-- Fonts
, fontSize (px 15)
, fontWeight (int 600)
, lineHeight (px 21)
] ]
] ]
attributes.content [ icon_
, case attributes.onDismiss of , div
Nothing -> [ Attributes.css
text "" [ minWidth (px 100)
, flexBasis (px 100)
, flexGrow (int 1)
]
]
attributes.content
, case attributes.onDismiss of
Nothing ->
text ""
Just msg -> Just msg ->
largeDismissButton msg largeDismissButton msg
]
, case attributes.codeDetails of , case attributes.codeDetails of
Just details -> Just details ->
viewCodeDetails details viewCodeDetails details
@ -194,51 +198,52 @@ view attributes_ =
div div
([ ExtraAttributes.nriDescription "Nri-Ui-Message-banner" ([ ExtraAttributes.nriDescription "Nri-Ui-Message-banner"
, Attributes.css , Attributes.css
(baseStyles (baseStyles ++ [ backgroundColor_, padding (px 20) ])
++ [ displayFlex
, justifyContent center
, alignItems center
, backgroundColor_
-- Fonts
, fontSize (px 20)
, fontWeight (int 700)
, lineHeight (px 27)
]
)
] ]
++ role ++ role
++ attributes.customAttributes ++ attributes.customAttributes
) )
[ span [ div
[ Attributes.css [ Attributes.css
[ alignItems center [ alignItems center
, displayFlex , displayFlex
, justifyContent center , justifyContent center
, padding (px 20)
, width (Css.pct 100)
] ]
] ]
[ icon_ [ div
, Nri.Ui.styled div [ Attributes.css
"banner-alert-notification" [ alignItems center
[ fontSize (px 20) , displayFlex
, fontWeight (int 700) , justifyContent center
, lineHeight (px 27) , width (Css.pct 100)
, maxWidth (px 600)
, minWidth (px 100)
, flexShrink (int 1)
, Fonts.baseFont
]
[]
attributes.content
]
, case attributes.onDismiss of
Nothing ->
text ""
Just msg -> -- Fonts
bannerDismissButton msg , fontSize (px 20)
, fontWeight (int 700)
, lineHeight (px 27)
]
]
[ icon_
, Nri.Ui.styled div
"banner-alert-notification"
[ fontSize (px 20)
, fontWeight (int 700)
, lineHeight (px 27)
, maxWidth (px 600)
, minWidth (px 100)
, flexShrink (int 1)
, Fonts.baseFont
]
[]
attributes.content
]
, case attributes.onDismiss of
Nothing ->
text ""
Just msg ->
bannerDismissButton msg
]
, case attributes.codeDetails of , case attributes.codeDetails of
Just details -> Just details ->
viewCodeDetails details viewCodeDetails details
@ -373,7 +378,7 @@ httpError error_ =
Http.Timeout -> Http.Timeout ->
( Nothing ( Nothing
, [ text "There was a problem! This request took too long to complete." ] , [ text "This request took too long to complete." ]
) )
Http.NetworkError -> Http.NetworkError ->
@ -823,8 +828,7 @@ largeDismissButton : msg -> Html msg
largeDismissButton msg = largeDismissButton msg =
Nri.Ui.styled div Nri.Ui.styled div
"dismiss-button-container" "dismiss-button-container"
[ padding2 Css.zero (px 20) [ padding2 Css.zero (px 20) ]
]
[] []
[ ClickableSvg.button "Dismiss message" [ ClickableSvg.button "Dismiss message"
UiIcon.x UiIcon.x
@ -839,7 +843,7 @@ bannerDismissButton : msg -> Html msg
bannerDismissButton msg = bannerDismissButton msg =
Nri.Ui.styled div Nri.Ui.styled div
"dismiss-button-container" "dismiss-button-container"
[ padding2 (px 30) (px 40) ] [ padding2 Css.zero (px 20) ]
[] []
[ ClickableSvg.button "Dismiss banner" [ ClickableSvg.button "Dismiss banner"
UiIcon.x UiIcon.x