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

Merge pull request #254 from NoRedInk/slide-modal-height-in-px

Browse Source 
SlideModal expects the height to be specified in pixels instead of vh
This commit is contained in:
Juan Edi 2019-04-15 21:45:53 -03:00 committed by GitHub
commit 6414f1e71e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,7 +39,7 @@ import Nri.Ui.Text.V2 as Text
{-| -}
type alias Config msg =
{ panels : List Panel
, height : Css.Vh
, height : Css.Px
, parentMsg : State -> msg
}
@ -189,7 +189,10 @@ viewBackdrop modal =
(Css.backgroundColor (Nri.Ui.Colors.Extra.withAlpha 0.9 Colors.navy)
:: [ Css.height (Css.vh 100)
, Css.left Css.zero
, Css.overflow Css.hidden
, Css.overflowX Css.hidden
, -- allow the user to scroll when the content doesn't fit the
-- viewport, but don't display a scrollbar if we don't need it
Css.overflowY Css.visible
, Css.position Css.fixed
, Css.top Css.zero
, Css.width (Css.pct 100)
@ -218,7 +221,7 @@ type alias Panel =
}
panelContainer : Css.Vh -> List Css.Style -> List (Html msg) -> Html msg
panelContainer : Css.Px -> List Css.Style -> List (Html msg) -> Html msg
panelContainer height animationStyles panel =
div
[ css

2
styleguide-app/Examples/SlideModal.elm
View File

@ -98,7 +98,7 @@ viewModal state =
, buttonLabel = "Let's get to it!"
}
]
, height = Css.vh 60
, height = Css.px 400
, parentMsg = ModalMsg
}
state

10
tests/Spec/Nri/Ui/SlideModal/V2.elm
View File

@ -19,7 +19,7 @@ all =
SlideModal.open
|> SlideModal.view
{ panels = threePanels
, height = Css.vh 60
, height = Css.px 400
, parentMsg = identity
}
|> Html.toUnstyled
@ -34,7 +34,7 @@ all =
SlideModal.closed
|> SlideModal.view
{ panels = threePanels
, height = Css.vh 60
, height = Css.px 400
, parentMsg = identity
}
|> Html.toUnstyled
@ -47,7 +47,7 @@ all =
, test "can click through" <|
\() ->
{ panels = threePanels
, height = Css.vh 60
, height = Css.px 400
, parentMsg = identity
}
|> initTest
@ -62,7 +62,7 @@ all =
, test "can navigate back using the dots" <|
\() ->
{ panels = threePanels
, height = Css.vh 60
, height = Css.px 400
, parentMsg = identity
}
|> initTest
@ -76,7 +76,7 @@ all =
, test "cannot navigate forward using the dots" <|
\() ->
{ panels = threePanels
, height = Css.vh 60
, height = Css.px 400
, parentMsg = identity
}
|> initTest