git.iko.soy/typeable/elm-ui
on 4ea86ab help sign in
typeable/elm-ui/tests-rendering/src/Tests/ColumnAlignment.elm
176 lines 4.9 kB history raw
1module Tests.ColumnAlignment exposing (..)
3import Html
4import Testable
5import Testable.Element as Element exposing (..)
6import Testable.Element.Background as Background
7import Testable.Element.Font as Font
8import Testable.Runner
9import Tests.Palette as Palette exposing (..)
12{-| -}
13main : Html.Html msg
14main =
15 Testable.Runner.show view
18box attrs =
19 el
20 ([ width (px 50)
21 , height (px 50)
22 , Background.color blue
23 ]
24 ++ attrs
25 )
26 none
29container =
30 el [ width (px 100), height (px 100) ]
33view =
34 let
35 colContainer attrs children =
36 column ([ Background.color lightGrey, spacing 20, width (px 100), height (px 500) ] ++ attrs) children
38 tallContainer attrs children =
39 column ([ Background.color lightGrey, spacing 20, width (px 100), height fill ] ++ attrs) children
40 in
41 column
42 [ width fill, spacing 20 ]
43 [ el [] (text "Alignment Within a Column")
44 , row [ spacing 20 ]
45 [ colContainer []
46 [ box [] ]
47 , colContainer []
48 [ box [ centerY ]
49 ]
50 , colContainer []
51 [ box [ alignBottom, label "first" ]
52 ]
53 ]
54 , row [ spacing 20 ]
55 [ colContainer []
56 [ box [] ]
57 , colContainer []
58 [ box []
59 , box []
60 , box []
61 ]
62 , colContainer []
63 [ box [ alignLeft, label "first" ]
64 , box [ centerX, label "second" ]
65 , box [ alignRight, label "third" ]
66 ]
67 ]
68 , row [ spacing 20 ]
69 [ colContainer []
70 [ box []
71 , box []
72 , box []
73 ]
74 , colContainer []
75 [ box []
76 , box []
77 , box [ alignBottom, label "third" ]
78 ]
79 , colContainer []
80 [ box []
81 , box [ alignBottom, label "second" ]
82 , box []
83 ]
84 , colContainer []
85 [ box [ alignBottom, label "first" ]
86 , box []
87 , box []
88 ]
89 ]
90 , text "centerY"
91 , row [ spacing 20 ]
92 [ colContainer [ height fill ]
93 [ box [ centerY, label "solo" ]
94 ]
95 , colContainer []
96 [ box []
97 , box [ centerY, label "middle" ]
98 , box []
99 ]
100 , colContainer []
101 [ box []
102 , box []
103 , box [ centerY, label "last" ]
104 ]
105 ]
106 , text "multiple centerY"
107 , row [ height (px 800), spacing 20 ]
108 [ tallContainer []
109 [ box []
110 , box [ centerY ]
111 , box [ centerY ]
112 , box [ centerY ]
113 , box [ centerY ]
114 , box [ alignBottom ]
115 ]
116 , tallContainer []
117 [ box []
118 , box [ centerY ]
119 , box []
120 ]
121 , tallContainer []
122 [ box []
123 , box []
124 , box [ centerY ]
125 ]
126 ]
127 , text "top, center, bottom"
128 , row [ spacing 20 ]
129 [ colContainer []
130 [ box [ alignTop, label "first" ]
131 , box []
132 , box [ alignBottom, label "last" ]
133 ]
134 , colContainer []
135 [ box [ alignTop ]
136 , box [ centerY ]
137 , box [ alignBottom ]
138 ]
139 , colContainer []
140 [ box [ alignLeft, alignTop ]
141 , box [ centerX, centerY ]
142 , box [ alignRight, alignBottom ]
143 ]
144 ]
145 , el [ width fill ] (text "Column in a Row")
146 , row [ width fill, spacing 20, label "row" ]
147 [ box [ alignLeft, alignTop, label "box" ]
148 , column
149 [ alignLeft
150 , alignTop
151 , spacing 20
152 , label "column"
153 , Background.color lightGrey
154 ]
155 [ box []
156 , box []
157 , box []
158 ]
159 , column
160 [ spacing 20
161 , width (px 100)
162 , alignLeft
163 , alignTop
164 , Background.color lightGrey
165 ]
166 [ box []
167 , box []
168 , box []
169 ]
170 , colContainer []
171 [ box [ alignRight ]
172 , box [ centerX ]
173 , box [ alignLeft ]
174 ]
175 ]
176 ]