git.iko.soy/typeable/elm-ui
on master help sign in
Move workspace to separate area
64c9670Matthew Griffith
experiments/font-adjustment-updated/FontAdjustment.elm+44−44
compare with master
unifiedsplit
@@ -65,6 +65,7 @@ garamond =
65 , font =
65 , font =
66 { url = Just "https://fonts.googleapis.com/css?family=EB+Garamond"
66 { url = Just "https://fonts.googleapis.com/css?family=EB+Garamond"
67 , name = "EB Garamond"
67 , name = "EB Garamond"
68+ , variants = []
68 , adjustment =
69 , adjustment =
69 { capital = default.capital
70 { capital = default.capital
70 , lowercase = default.lowercase
71 , lowercase = default.lowercase
@@ -92,6 +93,7 @@ catamaran =
92 , font =
93 , font =
93 { url = Just "https://fonts.googleapis.com/css?family=Catamaran"
94 { url = Just "https://fonts.googleapis.com/css?family=Catamaran"
94 , name = "Catamaran"
95 , name = "Catamaran"
96+ , variants = []
95 , adjustment =
97 , adjustment =
96 { capital = default.capital
98 { capital = default.capital
97 , lowercase = default.lowercase
99 , lowercase = default.lowercase
@@ -119,6 +121,7 @@ poiret =
119 , font =
121 , font =
120 { url = Just "https://fonts.googleapis.com/css?family=Poiret+One"
122 { url = Just "https://fonts.googleapis.com/css?family=Poiret+One"
121 , name = "Poiret One"
123 , name = "Poiret One"
124+ , variants = []
122 , adjustment =
125 , adjustment =
123 { capital = default.capital
126 { capital = default.capital
124 , lowercase = default.lowercase
127 , lowercase = default.lowercase
@@ -152,6 +155,7 @@ roboto =
152 , baseline = default.baseline
155 , baseline = default.baseline
153 , descender = default.descender
156 , descender = default.descender
154 }
157 }
158+ , variants = []
155 }
159 }
156 }
160 }
157
161
@@ -283,49 +287,64 @@ adjusted size adjustment =
283 , centerX
287 , centerX
284 , centerY
288 , centerY
285 ]
289 ]
290+ [ el
286− [ el [ Font.size 32 ] (text "Standard Defaults in CSS")
291+ [ Font.size 32 ]
292+ (text "New Adjustments in Els")
287 , row
293 , row
288− [ spacing 32
289− , Font.size 120
294+ [ Font.size 85
295+ , padding 80
296+ , spacing 48
290 ]
297 ]
291 [ el
298 [ el
299+ [ Font.size 95
300+ , Font.full
292− [ Background.color (rgb 0 0.8 0.9)
301+ , Background.color (rgb 0 0.8 0.9)
293− , style "line-height" "normal"
294− , class "lh-norm"
295− , above (el [ Font.size 12 ] (text "line-height: normal"))
302+ , above (el [ Font.size 24, moveUp 6 ] (text "full height"))
303+ , onLeft <|
304+ el
305+ [ centerY
306+ , width (px 40)
307+ , height (px 95)
308+ , Background.color (rgb 0.9 0.8 0)
309+ ]
310+ none
296 ]
311 ]
297 (text "Typography")
312 (text "Typography")
298 , el
313 , el
299− [ Background.color (rgb 0 0.8 0.9)
300− , style "line-height" "1"
301− , above (el [ Font.size 12 ] (text "line-height: 1"))
302− ]
303− (text "Typography")
304− ]
305− , el
306− [ Font.size 32 ]
307− (text "New Adjustments in Els")
308− , row
309− [ Font.size 120
310− , padding 80
311− ]
312− [ --corrected adjustment.full "corrected"
313− -- , corrected adjustment.capital "corrected capital"
314− el
315 [ Font.sizeByCapital
314 [ Font.sizeByCapital
315+ , Font.size 85
316 , Background.color (rgb 0 0.8 0.9)
316 , Background.color (rgb 0 0.8 0.9)
317− , above (el [ Font.size 12, moveUp 6 ] (text "corrected capital"))
317+ , above (el [ Font.size 24, moveUp 6 ] (text "corrected capital"))
318 , onLeft <|
318 , onLeft <|
319 el
319 el
320 [ centerY
320 [ centerY
321 , width (px 40)
321 , width (px 40)
322− , height (px 120)
322+ , height (px 85)
323 , Background.color (rgb 0.9 0.8 0)
323 , Background.color (rgb 0.9 0.8 0)
324 ]
324 ]
325 none
325 none
326 ]
326 ]
327 (text "Typography")
327 (text "Typography")
328 ]
328 ]
329+ , el [ Font.size 32 ] (text "Standard Defaults in CSS")
330+ , row
331+ [ spacing 32
332+ , Font.size 120
333+ ]
334+ [ el
335+ [ Background.color (rgb 0 0.8 0.9)
336+ , style "line-height" "normal"
337+ , class "lh-norm"
338+ , above (el [ Font.size 12 ] (text "line-height: normal"))
339+ ]
340+ (text "Typography")
341+ , el
342+ [ Background.color (rgb 0 0.8 0.9)
343+ , style "line-height" "1"
344+ , above (el [ Font.size 12 ] (text "line-height: 1"))
345+ ]
346+ (text "Typography")
347+ ]
329 , row [ spacing 120 ]
348 , row [ spacing 120 ]
330 [ paragraph
349 [ paragraph
331 [ Font.size 25
350 [ Font.size 25
@@ -465,8 +484,6 @@ viewAdjustment label adjustment size left lineHeight updateWith =
465 onLeft
484 onLeft
466 (el
485 (el
467 [ moveLeft left
486 [ moveLeft left
468−
469− -- , moveUp (0.125 * toFloat size)
470 , height (px (round (toFloat size * lineHeight)))
487 , height (px (round (toFloat size * lineHeight)))
471 ]
488 ]
472 <|
489 <|
@@ -522,23 +539,6 @@ viewAdjustment label adjustment size left lineHeight updateWith =
522 , Border.width 1
539 , Border.width 1
523 , Border.color (Element.rgb 0.5 0.5 0.5)
540 , Border.color (Element.rgb 0.5 0.5 0.5)
524 , Background.color (Element.rgb 1 1 1)
541 , Background.color (Element.rgb 1 1 1)
525−
526− -- , onRight
527− -- (el
528− -- [ height (px 0)
529− -- , width (px 1200)
530− -- , moveDown 8
531− -- , Border.color (rgb 0 0 0)
532− -- , Border.dashed
533− -- , Border.widthEach
534− -- { top = 1
535− -- , right = 0
536− -- , bottom = 0
537− -- , left = 0
538− -- }
539− -- ]
540− -- none
541− -- )
542 ]
542 ]
543 , value = adjustment
543 , value = adjustment
544 }
544 }
experiments/workspace/Basic.elmnew file+233
@@ -0,0 +1,233 @@
1+module Main exposing (main)
2+
3+{-| -}
4+
5+import Element exposing (..)
6+import Element.Background as Background
7+import Element.Font as Font
8+
9+
10+box =
11+ el [ height (px 30), width (px 200), Background.color (rgb 0 0.8 0.9) ] none
12+
13+
14+main =
15+ Element.layout
16+ [ Background.color (rgba 1 1 1 1)
17+ , Font.color (rgba 1 1 1 1)
18+ , Font.size 64
19+ , Font.family
20+ [ Font.external
21+ { url = "https://fonts.googleapis.com/css?family=EB+Garamond"
22+ , name = "EB Garamond"
23+ }
24+ , Font.sansSerif
25+ ]
26+ ]
27+ <|
28+ column
29+ [ spacing 40
30+ , Background.color (rgb 1 1 1)
31+ , centerX
32+ , inFront
33+ (el
34+ [ Background.color (rgb 1 0 0)
35+ , width (px 20)
36+ , height (px 20)
37+ ]
38+ (text "in front of everything")
39+ )
40+ , behindContent
41+ (el
42+ [ Background.color (rgb 0.5 0.7 0)
43+ , Font.color (rgb 1 1 1)
44+ , moveDown 30
45+ ]
46+ (text "hi there")
47+ )
48+ ]
49+ [ el
50+ [ Background.color (rgba 0 0.9 0.8 1)
51+ , Font.color (rgb 0 0 0)
52+ , behindContent
53+ (el
54+ [ Background.color (rgb 0.9 0.9 0)
55+ , Font.color (rgb 1 1 1)
56+ ]
57+ (text "hi there")
58+ )
59+ , inFront
60+ (el [ Background.color (rgb 0.9 0.9 0.5) ] (text "in front of stuff, behind one"))
61+
62+ -- , Font.sizeByCapital
63+ -- , Font.variant Font.smallCaps
64+ -- , Font.variant Font.ligatures
65+ -- , Font.variant Font.diagonalFractions
66+ ]
67+ (text "Quality 1st Hello stylish friend! ofl 123456 1/3")
68+ , row
69+ [ Background.color (rgba 0 0.9 0.8 1)
70+ , Font.color (rgb 0 0 0)
71+ , spacing 87
72+ , behindContent
73+ (el [ Background.color (rgb 0.9 0.9 0), Font.color (rgb 1 1 1) ] (text "hi there"))
74+ , inFront
75+ (el [ Background.color (rgb 0.9 0.9 0.5) ] (text "yo"))
76+
77+ -- , Font.sizeByCapital
78+ -- , Font.variant Font.smallCaps
79+ -- , Font.variant Font.ligatures
80+ -- , Font.variant Font.diagonalFractions
81+ ]
82+ [ text "Quality 1st Hello stylish friend! ofl 123456 1/3"
83+ ]
84+ , el
85+ [ Background.color (rgb 0.1 0.1 0.1)
86+ , width (px 200)
87+ , height (px 200)
88+
89+ -- , below
90+ -- (el
91+ -- [ Background.color (rgb 1 0 0)
92+ -- , width (px 20)
93+ -- , height (px 20)
94+ -- , moveDown 30
95+ -- ]
96+ -- none
97+ -- )
98+ , below
99+ (el
100+ [ Background.color (rgb 0.1 0.1 0.6)
101+ , width (px 150)
102+ , height (px 150)
103+
104+ -- , alignBottom
105+ ]
106+ none
107+ )
108+ ]
109+ none
110+ , el
111+ [ Background.color (rgb 0.1 0.1 0.1)
112+ , width (px 200)
113+ , height (px 200)
114+ , above
115+ (el
116+ [ Background.color (rgb 1 0 0)
117+ , width (px 20)
118+ , height (px 20)
119+
120+ -- , moveUp 30
121+ ]
122+ none
123+ )
124+ , onRight
125+ (el
126+ [ Background.color (rgb 1 0 0)
127+ , width (px 20)
128+ , height fill
129+
130+ -- , moveUp 30
131+ ]
132+ none
133+ )
134+
135+ -- , inFront
136+ -- (el
137+ -- [ Background.color (rgb 0.1 0.1 0.6)
138+ -- , width (px 150)
139+ -- , height (px 150)
140+ -- ]
141+ -- none
142+ -- )
143+ -- , above
144+ -- (el
145+ -- [ Background.color (rgb 1 0 0)
146+ -- , width (px 20)
147+ -- , height (px 20)
148+ -- , moveUp 30
149+ -- ]
150+ -- none
151+ -- )
152+ ]
153+ none
154+ , el
155+ [ Background.color (rgb 0.1 0.1 0.1)
156+ , width (px 200)
157+ , height (px 200)
158+ , below
159+ (el
160+ [ Background.color (rgb 1 0 0)
161+ , width fill
162+ , height (px 20)
163+ ]
164+ none
165+ )
166+ , above
167+ (el
168+ [ Background.color (rgb 1 0 0)
169+ , width fill
170+ , height (px 20)
171+ ]
172+ none
173+ )
174+ , onLeft
175+ (el
176+ [ Background.color (rgb 1 0 0)
177+ , width (px 20)
178+ , height fill
179+ ]
180+ none
181+ )
182+ , onRight
183+ (el
184+ [ Background.color (rgb 1 0 0)
185+ , width (px 20)
186+ , height fill
187+ ]
188+ none
189+ )
190+ ]
191+ none
192+ , el
193+ [ Background.color (rgb 0.1 0.1 0.1)
194+ , width (px 200)
195+ , height (px 200)
196+ , inFront
197+ (el
198+ [ Background.color (rgb 1 0 0)
199+ , width fill
200+ , height fill
201+ ]
202+ none
203+ )
204+ ]
205+ none
206+ ]
207+
208+
209+
210+-- row
211+-- [ --width (px 420)
212+-- padding 0
213+-- , spacing 20
214+-- , Background.color (rgb 0.2 0.2 0.3)
215+-- ]
216+-- [ box
217+-- , box
218+-- , box
219+-- -- , box
220+-- -- , box
221+-- ]
222+-- wrappedRow
223+-- [ width (px 420)
224+-- , padding 10
225+-- , spacing 20
226+-- , Background.color (rgb 0.2 0.2 0.3)
227+-- ]
228+-- [ box
229+-- , box
230+-- , box
231+-- , box
232+-- , box
233+-- ]
experiments/workspace/Form.elmnew file+234
@@ -0,0 +1,234 @@
1+module Main exposing (Form, Lunch(..), Msg(..), blue, darkBlue, grey, init, main, red, update, view, white)
2+
3+{-| -}
4+
5+import Browser
6+import Element exposing (..)
7+import Element.Background as Background
8+import Element.Border as Border
9+import Element.Font as Font
10+import Element.Input as Input
11+import Element.Region as Region
12+import Html.Attributes
13+
14+
15+white =
16+ Element.rgb 1 1 1
17+
18+
19+grey =
20+ Element.rgb 0.9 0.9 0.9
21+
22+
23+blue =
24+ Element.rgb 0 0 0.8
25+
26+
27+red =
28+ Element.rgb 0.8 0 0
29+
30+
31+darkBlue =
32+ Element.rgb 0 0 0.9
33+
34+
35+main =
36+ Browser.sandbox
37+ { init = init
38+ , view = view
39+ , update = update
40+ }
41+
42+
43+init =
44+ { username = ""
45+ , password = ""
46+ , agreeTOS = False
47+ , comment = "Extra hot sauce?\n\n\nYes pls"
48+ , lunch = Gyro
49+ , spiciness = 2
50+ }
51+
52+
53+type alias Form =
54+ { username : String
55+ , password : String
56+ , agreeTOS : Bool
57+ , comment : String
58+ , lunch : Lunch
59+ , spiciness : Float
60+ }
61+
62+
63+type Msg
64+ = Update Form
65+
66+
67+update msg model =
68+ case Debug.log "msg" msg of
69+ Update new ->
70+ new
71+
72+
73+id i =
74+ htmlAttribute (Html.Attributes.id i)
75+
76+
77+type Lunch
78+ = Burrito
79+ | Taco
80+ | Gyro
81+
82+
83+view model =
84+ Element.layout
85+ [ Font.size 20
86+ ]
87+ <|
88+ Element.column
89+ [ width (px 800)
90+ , height shrink
91+ , centerY
92+ , centerX
93+ , spacing 36
94+ , padding 10
95+ ]
96+ [ el
97+ [ Region.heading 1
98+ , alignLeft
99+ , Font.size 36
100+ ]
101+ (text "Welcome to the Stylish Elephants Lunch Emporium")
102+ , Input.radio
103+ [ spacing 12
104+ , alpha 0.5
105+ , id "radio-1"
106+ ]
107+ { selected = Just model.lunch
108+ , onChange = \new -> Update { model | lunch = new }
109+ , label =
110+ -- Input.labelHidden "Just a label"
111+ Input.labelAbove
112+ [ Font.size 14
113+ , paddingXY 0 12
114+ ]
115+ (text "What would you like for lunch?")
116+ , options =
117+ [ Input.option Gyro (text "Gyro")
118+ , Input.option Burrito (text "Burrito")
119+ , Input.option Taco (text "Taco")
120+ ]
121+ }
122+ , Input.text
123+ [ spacing 12
124+ , id "text-1"
125+ ]
126+ { text = model.username
127+ , placeholder =
128+ Just
129+ (Input.placeholder
130+ [ focused
131+ [ moveUp 30 ]
132+ ]
133+ (text "Placeholder Label")
134+ )
135+ , onChange = \new -> Update { model | username = new }
136+ , label =
137+ Input.labelHidden "Just a label"
138+
139+ -- Input.labelBelow
140+ -- [ Font.size 14
141+ -- , focused
142+ -- [ moveUp 30 ]
143+ -- ]
144+ -- (text "Username")
145+ }
146+ , Input.currentPassword [ spacing 12, width shrink ]
147+ { text = model.password
148+ , placeholder = Nothing
149+ , onChange = \new -> Update { model | password = new }
150+ , label = Input.labelAbove [ Font.size 14 ] (text "Password")
151+ , show = False
152+ }
153+ , Input.multiline
154+ [ height
155+ (shrink
156+ |> maximum 400
157+ )
158+ , spacing 12
159+ , id "multiline-1"
160+ ]
161+ { text = model.comment
162+ , placeholder = Just (Input.placeholder [] (text "Extra hot sauce?\n\n\nYes pls"))
163+ , onChange = \new -> Update { model | comment = new }
164+ , label =
165+ -- Input.labelAbove [ Font.size 14 ] (text "Leave a comment!")
166+ Input.labelHidden "Just a label"
167+ , spellcheck = False
168+ }
169+ , Input.checkbox [ id "checkbox-1" ]
170+ { checked = model.agreeTOS
171+ , onChange = \new -> Update { model | agreeTOS = new }
172+ , icon = Input.defaultCheckbox
173+ , label =
174+ -- Input.labelRight [] (text "Agree to Terms of Service")
175+ Input.labelHidden "Just a label"
176+ }
177+ , Input.slider
178+ [ Element.height (Element.px 30)
179+ , Element.behindContent
180+ (Element.el
181+ [ Element.width Element.fill
182+ , Element.height (Element.px 2)
183+ , Element.centerY
184+ , Background.color grey
185+ , Border.rounded 2
186+ ]
187+ Element.none
188+ )
189+ ]
190+ { onChange = \new -> Update { model | spiciness = new }
191+ , label = Input.labelAbove [] (text ("Spiciness: " ++ String.fromFloat model.spiciness))
192+ , min = 0
193+ , max = 3.2
194+ , step = Nothing
195+ , value = model.spiciness
196+ , thumb =
197+ Input.defaultThumb
198+ }
199+ , --el [height (px 300), width (px 30)] <|
200+ Input.slider
201+ [ Element.width (Element.px 40)
202+ , Element.height (Element.px 80)
203+ , Element.behindContent
204+ (Element.el
205+ [ Element.height Element.fill
206+ , Element.width (Element.px 2)
207+ , Element.centerX
208+ , Background.color grey
209+ , Border.rounded 2
210+ ]
211+ Element.none
212+ )
213+ ]
214+ { onChange = \new -> Update { model | spiciness = new }
215+ , label = Input.labelAbove [] (text ("Spiciness: " ++ String.fromFloat model.spiciness))
216+ , min = 0
217+ , max = 3.2
218+ , step = Nothing
219+ , value = model.spiciness
220+ , thumb =
221+ Input.defaultThumb
222+ }
223+ , Input.button
224+ [-- Background.color blue
225+ -- , Font.color white
226+ -- , Border.color darkBlue
227+ -- , paddingXY 32 16
228+ -- , Border.rounded 3
229+ -- , width fill
230+ ]
231+ { onPress = Nothing
232+ , label = Element.text "Place your lunch order!"
233+ }
234+ ]
experiments/workspace/Scrollbars.elmnew file+204
@@ -0,0 +1,204 @@
1+module Main exposing (main)
2+
3+{-| -}
4+
5+import Element exposing (..)
6+import Element.Background as Background
7+import Element.Font as Font
8+
9+
10+box =
11+ el [ height (px 30), width (px 200), Background.color (rgb 0 0.8 0.9) ] none
12+
13+
14+main =
15+ Element.layout
16+ [ Background.color (rgba 1 1 1 1)
17+ , Font.color (rgba 1 1 1 1)
18+ , Font.size 64
19+
20+ -- , Font.italic
21+ , Font.family
22+ [ Font.external
23+ { url = "https://fonts.googleapis.com/css?family=EB+Garamond"
24+ , name = "EB Garamond"
25+ }
26+
27+ -- Font.with
28+ -- { url = Just "https://fonts.googleapis.com/css?family=EB+Garamond"
29+ -- , name = "EB Garamond"
30+ -- , adjustment =
31+ -- { capital = 1.09
32+ -- , lowercase = 0.81
33+ -- , baseline = 0.385
34+ -- , descender = 0.095
35+ -- }
36+ -- , variants =
37+ -- [ Font.swash 1
38+ -- , Font.smallCaps
39+ -- -- , Font.diagonalFractions
40+ -- -- , Font.ordinal
41+ -- -- , Font.ligatures
42+ -- ]
43+ -- }
44+ -- Font.with
45+ -- { url = Just "https://fonts.googleapis.com/css?family=Raleway"
46+ -- , name = "Raleway"
47+ -- , adjustment =
48+ -- { capital = 1.09
49+ -- , lowercase = 0.81
50+ -- , baseline = 0.385
51+ -- , descender = 0.095
52+ -- }
53+ -- , variants =
54+ -- [ Font.swash 2
55+ -- , Font.ordinal
56+ -- , Font.ligatures
57+ -- -- , Font.small
58+ -- ]
59+ -- }
60+ , Font.sansSerif
61+ ]
62+ ]
63+ <|
64+ column
65+ [ spacing 20
66+ , Background.color (rgb 1 1 1)
67+ , inFront
68+ (el
69+ [ Background.color (rgb 1 0 0)
70+ , width (px 20)
71+ , height (px 20)
72+ ]
73+ none
74+ )
75+ , behindContent
76+ (el
77+ [ Background.color (rgb 0.5 0.7 0)
78+ , Font.color (rgb 1 1 1)
79+ , moveDown 30
80+ ]
81+ (text "hi there")
82+ )
83+ ]
84+ [ el
85+ [ Background.color (rgba 0 0.9 0.8 1)
86+ , Font.color (rgb 0 0 0)
87+ , behindContent
88+ (el
89+ [ Background.color (rgb 0.9 0.9 0)
90+ , Font.color (rgb 1 1 1)
91+ ]
92+ (text "hi there")
93+ )
94+ , inFront
95+ (el [ Background.color (rgb 0.9 0.9 0.5) ] (text "yo"))
96+
97+ -- , Font.sizeByCapital
98+ -- , Font.variant Font.smallCaps
99+ -- , Font.variant Font.ligatures
100+ -- , Font.variant Font.diagonalFractions
101+ ]
102+ (text "Quality 1st Hello stylish friend! ofl 123456 1/3")
103+ , el
104+ [ Background.color (rgba 0 0.9 0.8 1)
105+ , Font.color (rgb 0 0 0)
106+ , behindContent
107+ (el [ Background.color (rgb 0.9 0.9 0), Font.color (rgb 1 1 1) ] (text "hi there"))
108+ , inFront
109+ (el [ Background.color (rgb 0.9 0.9 0.5) ] (text "yo"))
110+
111+ -- , Font.sizeByCapital
112+ -- , Font.variant Font.smallCaps
113+ -- , Font.variant Font.ligatures
114+ -- , Font.variant Font.diagonalFractions
115+ ]
116+ (text "Quality 1st Hello stylish friend! ofl 123456 1/3")
117+ , el
118+ [ Background.color (rgb 0.1 0.1 0.1)
119+ , width (px 200)
120+ , height (px 200)
121+
122+ -- , below
123+ -- (el
124+ -- [ Background.color (rgb 1 0 0)
125+ -- , width (px 20)
126+ -- , height (px 20)
127+ -- , moveDown 30
128+ -- ]
129+ -- none
130+ -- )
131+ , below
132+ (el
133+ [ Background.color (rgb 0.1 0.1 0.6)
134+ , width (px 150)
135+ , height (px 150)
136+
137+ -- , alignBottom
138+ ]
139+ none
140+ )
141+ ]
142+ none
143+ , el
144+ [ Background.color (rgb 0.1 0.1 0.1)
145+ , width (px 200)
146+ , height (px 200)
147+ , onRight
148+ (el
149+ [ Background.color (rgb 1 0 0)
150+ , width (px 20)
151+ , height fill
152+
153+ -- , moveUp 30
154+ ]
155+ none
156+ )
157+
158+ -- , inFront
159+ -- (el
160+ -- [ Background.color (rgb 0.1 0.1 0.6)
161+ -- , width (px 150)
162+ -- , height (px 150)
163+ -- ]
164+ -- none
165+ -- )
166+ -- , above
167+ -- (el
168+ -- [ Background.color (rgb 1 0 0)
169+ -- , width (px 20)
170+ -- , height (px 20)
171+ -- , moveUp 30
172+ -- ]
173+ -- none
174+ -- )
175+ ]
176+ none
177+ ]
178+
179+
180+
181+-- row
182+-- [ --width (px 420)
183+-- padding 0
184+-- , spacing 20
185+-- , Background.color (rgb 0.2 0.2 0.3)
186+-- ]
187+-- [ box
188+-- , box
189+-- , box
190+-- -- , box
191+-- -- , box
192+-- ]
193+-- wrappedRow
194+-- [ width (px 420)
195+-- , padding 10
196+-- , spacing 20
197+-- , Background.color (rgb 0.2 0.2 0.3)
198+-- ]
199+-- [ box
200+-- , box
201+-- , box
202+-- , box
203+-- , box
204+-- ]
experiments/workspace/Table.elmnew file+65
@@ -0,0 +1,65 @@
1+module Main exposing (..)
2+
3+{-| -}
4+
5+import Element exposing (..)
6+import Element.Background as Background
7+import Element.Font as Font
8+import Element.Input
9+import Element.Lazy
10+
11+
12+type alias Person =
13+ { firstName : String
14+ , lastName : String
15+ }
16+
17+
18+persons : List Person
19+persons =
20+ [ { firstName = "David"
21+ , lastName = "Bowie"
22+ }
23+ , { firstName = "Florence"
24+ , lastName = "Welch"
25+ }
26+ ]
27+
28+
29+main =
30+ Element.layout
31+ [ Background.color (rgba 0 0 0 1)
32+ , Font.color (rgba 1 1 1 1)
33+ , Font.italic
34+ , Font.size 32
35+ , Font.family
36+ [ Font.external
37+ { url = "https://fonts.googleapis.com/css?family=EB+Garamond"
38+ , name = "EB Garamond"
39+ }
40+ , Font.sansSerif
41+ ]
42+ ]
43+ <|
44+ Element.table
45+ [ Element.centerX
46+ , Element.centerY
47+ , Element.spacing 5
48+ , Element.padding 10
49+ ]
50+ { data = persons
51+ , columns =
52+ [ { header = Element.text "First Name"
53+ , width = px 200
54+ , view =
55+ \person ->
56+ Element.text person.firstName
57+ }
58+ , { header = Element.text "Last Name"
59+ , width = fill
60+ , view =
61+ \person ->
62+ Element.text person.lastName
63+ }
64+ ]
65+ }
experiments/workspace/elm.jsonnew file+25
@@ -0,0 +1,25 @@
1+{
2+ "type": "application",
3+ "source-directories": [
4+ ".",
5+ "../src/"
6+ ],
7+ "elm-version": "0.19.0",
8+ "dependencies": {
9+ "direct": {
10+ "elm/browser": "1.0.0",
11+ "elm/core": "1.0.0",
12+ "elm/html": "1.0.0",
13+ "elm/json": "1.0.0",
14+ "elm/virtual-dom": "1.0.0"
15+ },
16+ "indirect": {
17+ "elm/time": "1.0.0",
18+ "elm/url": "1.0.0"
19+ }
20+ },
21+ "test-dependencies": {
22+ "direct": {},
23+ "indirect": {}
24+ }
25+}