mirror of
https://github.com/mdgriffith/elm-ui.git
synced 2024-11-22 20:55:17 +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