NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2025-01-07 06:56:53 +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

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

@ -1,10 +1,12 @@
module Debug.Control.View exposing (codeFromList, view) module Debug.Control.View exposing (codeFromList, view)
import Css exposing (..) import Css exposing (..)
import Css.Media exposing (withMedia)
import Debug.Control as Control exposing (Control) import Debug.Control as Control exposing (Control)
import Html.Styled exposing (..) import Html.Styled exposing (..)
import Html.Styled.Attributes exposing (css) import Html.Styled.Attributes exposing (css)
import Nri.Ui.Heading.V2 as Heading import Nri.Ui.Heading.V2 as Heading
import Nri.Ui.MediaQuery.V1 exposing (mobile)
{-| -} {-| -}
@ -19,17 +21,24 @@ view config =
value = value =
Control.currentValue config.settings Control.currentValue config.settings
in in
div [ css [ displayFlex ] ] div
[ fromUnstyled (Control.view config.update config.settings) [ 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 (config.toExampleCode value)
] ]
viewExampleCode : List { sectionName : String, code : String } -> Html msg viewExampleCode : List { sectionName : String, code : String } -> Html msg
viewExampleCode values = viewExampleCode values =
section [] viewSection "Generated Code" <|
(Heading.h3 [] [ text "Generated Code" ] List.concatMap
:: List.concatMap
(\{ sectionName, code } -> (\{ sectionName, code } ->
[ Heading.h4 [] [ text sectionName ] [ Heading.h4 [] [ text sectionName ]
, Html.Styled.code , Html.Styled.code
@ -39,6 +48,13 @@ viewExampleCode values =
] ]
) )
values values
viewSection : String -> List (Html msg) -> Html msg
viewSection name children =
section [ css [ flex (int 1) ] ]
(Heading.h3 [] [ text name ]
:: children
) )