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

Adds child spacer helpers

Browse Source
This commit is contained in:
Tessa Kelly 2022-09-02 12:36:09 -06:00
parent 487c1cbacb
commit d5a7a5142f
1 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
styleguide-app/Examples/Layout.elm
View File

@ -71,6 +71,16 @@ view ellieLinkConfig state =
[ Maybe.map Tuple.second settings.topContainerStyle
, Maybe.map Tuple.second settings.horizontalContainerStyle
, Maybe.map Tuple.second settings.bottomContainerStyle
, if settings.childVerticalSpace then
Just (Css.property "row-gap" (.value Layout.verticalSpacerPx))
else
Nothing
, if settings.childHorizontalSpace then
Just (Css.property "column-gap" (.value Layout.horizontalSpacerPx))
else
Nothing
]
)
(List.repeat settings.childCount child)
@ -94,10 +104,8 @@ container styles =
[ css
[ Css.border3 (Css.px 2) Css.dashed Colors.greenDarkest
, Css.backgroundColor Colors.greenLightest
, Css.displayFlex
, Css.flexWrap Css.wrap
, Css.justifyContent Css.spaceBetween
, Css.alignItems Css.center
, Css.property "display" "grid"
, Css.property "grid-template-columns" "1fr 1fr 1fr 1fr 1fr"
, Css.batch styles
]
]
@ -109,7 +117,6 @@ child =
[ css
[ Css.border3 (Css.px 1) Css.solid Colors.ochreDark
, Css.backgroundColor Colors.sunshine
, Css.flexBasis (Css.px 150)
, Css.height (Css.px 150)
]
]
@ -131,6 +138,8 @@ type alias Settings =
, horizontalContainerStyle : Maybe ( String, Style )
, bottomContainerStyle : Maybe ( String, Style )
, childCount : Int
, childVerticalSpace : Bool
, childHorizontalSpace : Bool
}
@ -191,7 +200,9 @@ controlSettings =
)
)
)
|> Control.field "Child count" (ControlExtra.int 3)
|> Control.field "Child count" (ControlExtra.int 10)
|> Control.field "Separate children vertically" (Control.bool True)
|> Control.field "Separate children horizontally" (Control.bool True)
asChoice : ( String, Style ) -> ( String, Control ( String, Style ) )