mirror of
https://github.com/mdgriffith/elm-ui.git
synced 2024-08-17 04:00:23 +03:00
add some more examples to test suite
This commit is contained in:
parent
42d0dae608
commit
2dcbb80369
@ -0,0 +1,46 @@
|
||||
module DistributeHeight exposing (main)
|
||||
|
||||
import Browser
|
||||
import Element exposing (column, el, fill, fillPortion, height, minimum, none, px, rgb, row, text, width)
|
||||
import Element.Background as Bg
|
||||
import Html as Html exposing (Html)
|
||||
|
||||
|
||||
type alias Model =
|
||||
()
|
||||
|
||||
|
||||
update : msg -> Model -> Model
|
||||
update _ model =
|
||||
model
|
||||
|
||||
|
||||
view : model -> Html msg
|
||||
view _ =
|
||||
Element.layout [ height fill, width fill ] <|
|
||||
column [ height fill, width fill ]
|
||||
[ row
|
||||
[ height
|
||||
fill
|
||||
, width fill
|
||||
, Bg.color <| rgb 1 0 0
|
||||
]
|
||||
[ el
|
||||
[ height <| px 200
|
||||
, width fill
|
||||
, Bg.color <| rgb 1 0 1
|
||||
]
|
||||
(text "Helloooo!")
|
||||
]
|
||||
, row [ height fill, width fill, Bg.color <| rgb 0 1 0 ]
|
||||
[ none ]
|
||||
]
|
||||
|
||||
|
||||
main : Program () Model msg
|
||||
main =
|
||||
Browser.sandbox
|
||||
{ init = ()
|
||||
, view = view
|
||||
, update = update
|
||||
}
|
@ -0,0 +1,86 @@
|
||||
module Other exposing (main)
|
||||
|
||||
import Browser
|
||||
import Element exposing (..)
|
||||
import Element.Border as Border
|
||||
import Element.Events as Events
|
||||
import Html exposing (Html)
|
||||
import Html.Attributes
|
||||
|
||||
|
||||
type alias Model =
|
||||
{ count : Int }
|
||||
|
||||
|
||||
initialModel : Model
|
||||
initialModel =
|
||||
{ count = 0 }
|
||||
|
||||
|
||||
type Msg
|
||||
= Increment
|
||||
| Decrement
|
||||
|
||||
|
||||
update : Msg -> Model -> Model
|
||||
update msg model =
|
||||
case msg of
|
||||
Increment ->
|
||||
{ model | count = model.count + 1 }
|
||||
|
||||
Decrement ->
|
||||
{ model | count = model.count - 1 }
|
||||
|
||||
|
||||
view : Model -> Html Msg
|
||||
view model =
|
||||
viewElements model
|
||||
|> layout []
|
||||
|
||||
|
||||
viewElements : Model -> Element Msg
|
||||
viewElements model =
|
||||
el [ height fill ] <|
|
||||
column [ height fill ]
|
||||
[ el
|
||||
[ height (fillPortion 1)
|
||||
]
|
||||
<|
|
||||
viewCounter model
|
||||
, el
|
||||
[ height (fillPortion 2)
|
||||
]
|
||||
<|
|
||||
viewCounters model
|
||||
]
|
||||
|
||||
|
||||
flexBasisZero : Element.Attribute msg
|
||||
flexBasisZero =
|
||||
htmlAttribute (Html.Attributes.style "flex-basis" "0")
|
||||
|
||||
|
||||
viewCounters : Model -> Element Msg
|
||||
viewCounters model =
|
||||
column [ height fill ]
|
||||
(List.repeat model.count model
|
||||
|> List.map viewCounter
|
||||
)
|
||||
|
||||
|
||||
viewCounter : Model -> Element Msg
|
||||
viewCounter model =
|
||||
column [ width fill, height fill, Border.width 1, Border.dotted ]
|
||||
[ el [ Events.onClick Increment, Border.width 1, Border.rounded 3 ] <| text "+1"
|
||||
, el [] <| text <| String.fromInt model.count
|
||||
, el [ Events.onClick Decrement, Border.width 1, Border.rounded 3 ] <| text "-1"
|
||||
]
|
||||
|
||||
|
||||
main : Program () Model Msg
|
||||
main =
|
||||
Browser.sandbox
|
||||
{ init = initialModel
|
||||
, view = view
|
||||
, update = update
|
||||
}
|
@ -0,0 +1,48 @@
|
||||
module DoNotCollapseBelow0 exposing (main)
|
||||
|
||||
{-|
|
||||
|
||||
|
||||
# Safari bug for `el` heigh calculation in combination with `height fill`
|
||||
|
||||
The problem appears to be that the height of the first el is 0, and therefore the second
|
||||
text is rendered on the first.
|
||||
|
||||
Versions
|
||||
|
||||
OS: macOS Mojave 10.14.5
|
||||
Browser: Safari
|
||||
Browser Version: 12.1.1 (14607.2.6.1.1)
|
||||
Elm Version: 0.19
|
||||
Elm UI Version: 1.1.5
|
||||
|
||||
<https://github.com/mdgriffith/elm-ui/issues/147>
|
||||
|
||||
I was able to pinpoint the issue using git bisect to this fd08f1a commit, which lines up.
|
||||
|
||||
<https://github.com/mdgriffith/elm-ui/commit/fd08f1a953484ba96f2d05037d4f208eab351514>
|
||||
|
||||
-}
|
||||
|
||||
import Browser
|
||||
import Element exposing (column, el, fill, height, layout, scrollbarY, text)
|
||||
import Html exposing (Html)
|
||||
|
||||
|
||||
view : () -> Html ()
|
||||
view () =
|
||||
layout [ height fill ] <|
|
||||
column
|
||||
[ height fill ]
|
||||
[ el [] <| text "Element that Safari gives height 0, if inside an el and not just text."
|
||||
, text "Text below the el above"
|
||||
]
|
||||
|
||||
|
||||
main : Program () () ()
|
||||
main =
|
||||
Browser.sandbox
|
||||
{ init = ()
|
||||
, view = view
|
||||
, update = \() () -> ()
|
||||
}
|
@ -1,14 +0,0 @@
|
||||
module SafariColumnBug exposing (main)
|
||||
|
||||
import Browser
|
||||
import Element exposing (column, el, fill, height, layout, scrollbarY, text)
|
||||
import Html exposing (Html)
|
||||
|
||||
|
||||
main =
|
||||
layout [ height fill ] <|
|
||||
column
|
||||
[ height fill ]
|
||||
[ el [] <| text "Element that Safari gives height 0, if inside an el and not just text."
|
||||
, text "Text below the el above"
|
||||
]
|
Loading…
Reference in New Issue
Block a user