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

Improve the styles of the new shared code gen layout helper

Browse Source
This commit is contained in:
Tessa Kelly 2022-03-04 17:26:27 -08:00
parent 4684939411
commit 5ad3f3920f
1 changed files with 29 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
styleguide-app/Debug/Control/View.elm
View File

@ -1,10 +1,12 @@
module Debug.Control.View exposing (codeFromList, view)
import Css exposing (..)
import Css.Media exposing (withMedia)
import Debug.Control as Control exposing (Control)
import Html.Styled exposing (..)
import Html.Styled.Attributes exposing (css)
import Nri.Ui.Heading.V2 as Heading
import Nri.Ui.MediaQuery.V1 exposing (mobile)
{-| -}
@ -19,26 +21,40 @@ view config =
value =
Control.currentValue config.settings
in
div [ css [ displayFlex ] ]
[ fromUnstyled (Control.view config.update config.settings)
div
[ css
[ displayFlex
, Css.flexWrap Css.wrap
, Css.property "gap" "10px"
, withMedia [ mobile ] [ flexDirection column, alignItems stretch ]
]
]
[ viewSection "Settings" <|
[ fromUnstyled (Control.view config.update config.settings) ]
, viewExampleCode (config.toExampleCode value)
]
viewExampleCode : List { sectionName : String, code : String } -> Html msg
viewExampleCode values =
section []
(Heading.h3 [] [ text "Generated Code" ]
:: List.concatMap
(\{ sectionName, code } ->
[ Heading.h4 [] [ text sectionName ]
, Html.Styled.code
[ css [ whiteSpace preWrap ]
]
[ text code ]
viewSection "Generated Code" <|
List.concatMap
(\{ sectionName, code } ->
[ Heading.h4 [] [ text sectionName ]
, Html.Styled.code
[ css [ whiteSpace preWrap ]
]
)
values
[ text code ]
]
)
values
viewSection : String -> List (Html msg) -> Html msg
viewSection name children =
section [ css [ flex (int 1) ] ]
(Heading.h3 [] [ text name ]
:: children
)