This repo aims to gather knowledge from https://elmlang.slack.com #elm-ui or elsewhere.

PRs welcomed.

• examples directory.
• web interface to control mpv https://github.com/rofrol/elm-mpv-webui
• slider https://github.com/rofrol/elm-mpv-webui/blob/master/webui-page/src/Slider.elm
• more examples https://github.com/bburdette/elm-ui-examples
• even more examples https://github.com/objarni/elm-ui-examples
• ellies catalog: search for "elm-ui" https://janiczek-ellies.builtwithdark.com/

mthiems 2:33 AM @VPagani I've seen this before, and I think this may be a bug in the current version of elm-ui. It seems the input DOM element needs a text-align: inherit style, as the text-align: center is on a parent div instead of on the input itself. Here's an Ellie illustrating one option for a workaround that makes it work: https://ellie-app.com/6GQLrcSt7hWa1

mgriffith:bulb: 3:06 AM Ah, yeah, the current way to do that is to capture your spacing a font values in a palette file and always use those. Then you could do things like set the padding based on font size or whatever you’d like.

https://elmlang.slack.com #elm-ui

blackeuler 4:46 AM Is there any strategy when it comes to structing the code? I feel like I have a lot of code in the one file all mainly for the view of the page.

mgriffithbulb 4:58 AM First suggestion is to take all values and put them in one file (colors, spacing/padding values, font sizes and font families). I usually call this file UI After that, if you find a reusable part of a view, I’d put it in it’s own sub module. So, buttons go in UI.Button. Though it’s also fine to have big files.

https://elmlang.slack.com #elm-ui

row [ width fill ]
  [ paragraph
    [ Font.color model.style.color
    , Font.size 40
	, Html.Attributes.style "word-break" "break-all" |> htmlAttribute
    ]
    [ text model.status.filename ]
  ]

• https://stackoverflow.com/questions/36150458/flex-item-overflows-container-due-to-long-word-even-after-using-word-wrap/36150638#36150638

'overflow-wrap: break-word' will not work when paragraph inside row so this solution https://stackoverflow.com/questions/3058866/how-to-force-a-line-break-in-a-long-word-in-a-div/3059128#3059128 is bad for flexbox.

You can't

https://stackoverflow.com/questions/32802202/how-to-center-a-flex-container-but-left-align-flex-items/32811002#32811002

Examples in source code https://github.com/mdgriffith/elm-ui/blob/1.1.5/src/Element/Events.elm#L177 but are not exported

Examples in source code but on exported https://github.com/mdgriffith/elm-ui/blob/1.1.5/src/Element/Events.elm#L115

colorToRgbaString color =
    let
        floatTo256 f =
            if f >= 1 then
                255

            else
                floor (f * 256)

        rgba =
            Element.toRgb color

        floatToString f =
            String.pad 2 '0' (String.fromInt (floatTo256 f))
    in
    "rgba("
        ++ floatToString rgba.red
        ++ ", "
        ++ floatToString rgba.green
        ++ ", "
        ++ floatToString rgba.blue
        ++ ", "
        ++ floatToString rgba.alpha
        ++ ")"

colorToRgbaAttr color =
    let
        { red, green, blue, alpha } =
            toRgb color

        rgb =
            [ red, green, blue ] |> List.map ((*) 255 >> String.fromFloat) |> List.intersperse ", " |> List.foldl (++) ""
    in
    Html.Attributes.style "color" ("rgba(" ++ rgb ++ "," ++ String.fromFloat alpha ++ ")")

wrap each button in an Element.el

https://ellie-app.com/5NtSNBJ4bzFa1

mdgriffith/elm-ui#47 (comment)

Sophie [Yesterday at 10:24 PM] Is there a way to specify em values in elm-ui?

jhbrown [12 hours ago] There is not. Just px and percents.

https://elmlang.slack.com #elm-ui

jesse 7 minutes ago We primarily use elm-ui and also have external Sass styling too and it’s fine jesse 6 minutes ago You may need to use https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#noStaticStyleSheet

https://elmlang.slack.com #news-and-links

Use Border instead:

            [ Border.color <| rgba255 255 255 255 255
            , Border.widthEach
                { bottom = 1
                , left = 0
                , top = 0
                , right = 0
                }
            , mouseOver [ Border.color <| rgb255 255 0 0 ]
            ]

• https://ellie-app.com/7f8nvkjCrD6a1
• mdgriffith/elm-ui#158

Spacing is the distance between contained elements. You are looking for "padding" on the container (to specify how near to the borders of the container the contained elements can be).