@@ -4,6 +4,7 @@ import Browser
44import Element exposing (..)
55import Element.Background as Background
66import Element.Border as Border
7+import Element.Font as Font
78import Element.Input exposing (labelAbove, multiline)
89import Html exposing (Html)
910import Html.Events exposing (onClick)
@@ -38,10 +39,6 @@ update msg model =
3839
3940
4041testtxt =
41− "orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it?"
42−
43−
44−testtxtnewlines =
4542 """orem Ipsum is simply dummy text of the printing
4643and typesetting industry. Lorem Ipsum has been the industry's
4744standard dummy text ever since the 1500s, when an unknown
@@ -52,168 +49,152 @@ typesetting
5249, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it?"""
5350
5451
52+rowTest header els =
53+ column [ width fill, spacing 24 ]
54+ [ el [] (text header)
55+ , row
56+ [ width fill
57+ , height (px 800)
58+ , spacing 50
59+ , centerX
60+ , Border.width 1
61+ ]
62+ els
63+ ]
64+
65+
66+label str =
67+ labelAbove
68+ [ width (px 100)
69+ , Font.italic
70+ ]
71+ (text str)
72+
73+
5574view : Model -> Html Msg
5675view model =
5776 layout [] <|
5877 column
59− [ width (px 1200)
78+ [ width (px 1500)
6079 , padding 100
61− , spacing 50
80+ , spacing 500
6281 , centerX
6382 ]
64− [ column
65− [ width (px 700)
66− , padding 100
67− , spacing 50
68− , centerX
69− ]
70− [ multiline [ spacing 3 ]
83+ [ rowTest "Heights"
84+ [ multiline []
85+ { onChange = MLChanged
86+ , text = testtxt
87+ , placeholder = Nothing
88+ , spellcheck = False
89+ , label =
90+ label "Default"
91+ }
92+ , multiline [ height shrink ]
7193 { onChange = MLChanged
7294 , text = testtxt
7395 , placeholder = Nothing
7496 , spellcheck = False
7597 , label =
76− labelAbove
77− [ width (px 100)
78− , Background.color (Element.rgb 0.5 0.5 0.5)
79− ]
80− <|
81− text "Default height"
98+ label "Height shrink"
8299 }
83− , multiline [ spacing 0, padding 10, height shrink ]
100+ , multiline [ height fill ]
84101 { onChange = MLChanged
85102 , text = testtxt
86103 , placeholder = Nothing
87104 , spellcheck = False
88105 , label =
89− labelAbove
90− [ Background.color (Element.rgb 0.5 0.5 0.5)
91− , width (px 100)
92− ]
93− <|
94− text "Shrink - no nl"
106+ label "Height Fill"
95107 }
96− , multiline [ spacing 3, height shrink ]
108+ , multiline [ height (px 200) ]
97109 { onChange = MLChanged
98− , text = testtxtnewlines
110+ , text = testtxt
99111 , placeholder = Nothing
100112 , spellcheck = False
101− , label = labelAbove [ Background.color (Element.rgb 0.5 0.5 0.5), width (px 100) ] <| text "Shrink - w/nl"
113+ , label =
114+ label "Height 200px"
102115 }
103116 ]
104− , row [ width fill, height (px 400), spacing 40 ]
105− [ multiline [ spacing 3 ]
117+ , rowTest "Widths"
118+ [ multiline []
106119 { onChange = MLChanged
107120 , text = testtxt
108121 , placeholder = Nothing
109122 , spellcheck = False
110123 , label =
111− labelAbove
112− [ width (px 100)
113− , Background.color (Element.rgb 0.5 0.5 0.5)
114− ]
115− <|
116− text "Default height"
124+ label "Default"
117125 }
118− , multiline [ spacing 0, padding 10, height shrink ]
126+ , multiline [ width fill ]
119127 { onChange = MLChanged
120128 , text = testtxt
121129 , placeholder = Nothing
122130 , spellcheck = False
123131 , label =
124− labelAbove
125− [ Background.color (Element.rgb 0.5 0.5 0.5)
126− , width (px 100)
127− ]
128− <|
129− text "Shrink - no nl"
132+ label "Width fill"
130133 }
131− , multiline [ spacing 3, height shrink ]
134+ , multiline [ width shrink ]
132135 { onChange = MLChanged
133− , text = testtxtnewlines
136+ , text = testtxt
134137 , placeholder = Nothing
135138 , spellcheck = False
136− , label = labelAbove [ Background.color (Element.rgb 0.5 0.5 0.5), width (px 100) ] <| text "Shrink - w/nl"
139+ , label =
140+ label "Width Shrink"
141+ }
142+ , multiline [ width (px 300) ]
143+ { onChange = MLChanged
144+ , text = testtxt
145+ , placeholder = Nothing
146+ , spellcheck = False
147+ , label = label "width 300"
137148 }
138149 ]
139− , row
140− [ width fill
141− , height (px 400)
142− , spacing 40
143− , Border.width 1
144− ]
145− [ multiline [ padding 20, spacing 20, height fill ]
150+ , rowTest "Spacing"
151+ [ multiline []
146152 { onChange = MLChanged
147153 , text = testtxt
148154 , placeholder = Nothing
149155 , spellcheck = False
150156 , label =
151− labelAbove
152− [ width (px 100)
153− , Background.color (Element.rgb 0.5 0.5 0.5)
154− ]
155− <|
156− text "Default height"
157+ label "Default"
157158 }
158− , multiline [ spacing 0, padding 10, height shrink ]
159+ , multiline [ spacing 30, padding 60 ]
159160 { onChange = MLChanged
160161 , text = testtxt
161162 , placeholder = Nothing
162163 , spellcheck = False
163164 , label =
164− labelAbove
165− [ Background.color (Element.rgb 0.5 0.5 0.5)
166− , width (px 100)
167− ]
168− <|
169− text "Shrink - no nl"
165+ label "Spacing 30"
170166 }
171− , multiline [ spacing 3, height shrink ]
167+ , multiline [ spacing 0 ]
172168 { onChange = MLChanged
173− , text = testtxtnewlines
169+ , text = testtxt
174170 , placeholder = Nothing
175171 , spellcheck = False
176− , label = labelAbove [ Background.color (Element.rgb 0.5 0.5 0.5), width (px 100) ] <| text "Shrink - w/nl"
172+ , label = label "Spacing 0"
177173 }
178174 ]
179− , row
180− [ width fill
181− , height (px 800)
182− , spacing 40
183− , Border.width 1
184− ]
185− [ multiline [ spacing 3, height fill ]
175+ , rowTest "Scrollable viewport with different paddings "
176+ [ multiline [ height (px 200), padding 30 ]
186177 { onChange = MLChanged
187178 , text = testtxt
188179 , placeholder = Nothing
189180 , spellcheck = False
190181 , label =
191− labelAbove
192− [ width (px 100)
193− , Background.color (Element.rgb 0.5 0.5 0.5)
194− ]
195− <|
196− text "Default height"
182+ label "Height 200, Padding 30"
197183 }
198− , multiline [ spacing 0, padding 10, height shrink ]
184+ , multiline [ height (px 200), padding 60 ]
199185 { onChange = MLChanged
200186 , text = testtxt
201187 , placeholder = Nothing
202188 , spellcheck = False
203189 , label =
204− labelAbove
205− [ Background.color (Element.rgb 0.5 0.5 0.5)
206− , width (px 100)
207− ]
208− <|
209− text "Shrink - no nl"
190+ label "Height 200, Padding 60"
210191 }
211− , multiline [ spacing 3, height shrink ]
192+ , multiline [ height (px 200), padding 0 ]
212193 { onChange = MLChanged
213− , text = testtxtnewlines
194+ , text = testtxt
214195 , placeholder = Nothing
215196 , spellcheck = False
216− , label = labelAbove [ Background.color (Element.rgb 0.5 0.5 0.5), width (px 100) ] <| text "Shrink - w/nl"
197+ , label = label "Height 200, Padding 0"
217198 }
218199 ]
219200 ]