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

Keep the button and dots in-place

Browse Source
This commit is contained in:
Tessa Kelly 2019-04-11 13:15:37 -07:00
parent 1ed8cb2038
commit 83a9044489
1 changed files with 33 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/Nri/Ui/SlideModal/V2.elm
View File

@ -128,16 +128,6 @@ summarize panels current =
viewModal : Config msg -> State -> Summary -> Html msg viewModal : Config msg -> State -> Summary -> Html msg
viewModal config (State { previousPanel }) summary = viewModal config (State { previousPanel }) summary =
let
currentPanel =
[ viewIcon summary.current.icon
, Text.subHeading
[ span [ Html.Styled.Attributes.id (panelId summary.current) ]
[ Html.text summary.current.title ]
]
, viewContent summary.current.content
]
in
Keyed.node "div" Keyed.node "div"
[ css [ css
[ Css.boxSizing Css.borderBox [ Css.boxSizing Css.borderBox
@ -153,35 +143,43 @@ viewModal config (State { previousPanel }) summary =
] ]
(case previousPanel of (case previousPanel of
Just ( direction, panelView ) -> Just ( direction, panelView ) ->
[ ( panelId panelView ( panelId panelView
, panelContainer config.height , panelContainer config.height
[ Slide.animateOut direction ] [ Slide.animateOut direction ]
[ viewIcon panelView.icon [ viewIcon panelView.icon
, Text.subHeading , Text.subHeading
[ span [ Html.Styled.Attributes.id (panelId panelView) ] [ Html.text panelView.title ] [ span [ Html.Styled.Attributes.id (panelId panelView) ] [ Html.text panelView.title ]
]
, viewContent panelView.content
] ]
) , viewContent panelView.content
, ( panelId summary.current ]
, panelContainer config.height [ Slide.animateIn direction ] currentPanel )
) :: viewModalContent config summary [ Slide.animateIn direction ]
, ( panelId summary.current ++ "-footer"
, viewActiveFooter summary |> Html.map config.parentMsg
)
]
Nothing -> Nothing ->
[ ( panelId summary.current viewModalContent config summary []
, panelContainer config.height [] currentPanel
)
, ( panelId summary.current ++ "-footer"
, viewActiveFooter summary |> Html.map config.parentMsg
)
]
) )
viewModalContent : Config msg -> Summary -> List Css.Style -> List ( String, Html msg )
viewModalContent config summary styles =
[ ( panelId summary.current
, panelContainer config.height
styles
[ viewIcon summary.current.icon
, Text.subHeading
[ span [ Html.Styled.Attributes.id (panelId summary.current) ]
[ Html.text summary.current.title ]
]
, viewContent summary.current.content
]
)
, ( panelId summary.current ++ "-footer"
, viewActiveFooter summary
|> Html.map config.parentMsg
)
]
viewBackdrop : Html msg -> Html msg viewBackdrop : Html msg -> Html msg
viewBackdrop modal = viewBackdrop modal =
Nri.Ui.styled div Nri.Ui.styled div
@ -228,7 +226,7 @@ panelContainer height animationStyles panel =
, Css.maxHeight <| Css.calc (Css.vh 100) Css.minus (Css.px 100) , Css.maxHeight <| Css.calc (Css.vh 100) Css.minus (Css.px 100)
, Css.height height , Css.height height
, Css.width (Css.px 600) , Css.width (Css.px 600)
, Css.margin3 (Css.px 35) (Css.px 21) (Css.px 25) , Css.margin3 (Css.px 35) (Css.px 21) Css.zero
-- Interior positioning -- Interior positioning
, Css.displayFlex , Css.displayFlex
@ -320,7 +318,7 @@ viewFlexibleFooter { buttonLabel, buttonMsg, buttonState } dotList =
, Css.displayFlex , Css.displayFlex
, Css.flexDirection Css.column , Css.flexDirection Css.column
, Css.alignItems Css.center , Css.alignItems Css.center
, Css.margin4 (Css.px 20) Css.zero Css.zero Css.zero , Css.margin4 (Css.px 20) Css.zero (Css.px 25) Css.zero
] ]
[] []
[ Button.button [ Button.button