A music player that connects to your cloud/distributed storage.
Some layout improvements
+42
-18
+17
-4
src/Applications/UI/Kit.elm
+17
-4
src/Applications/UI/Kit.elm
···
208
208
209
209
210
210
canister : List (Html msg) -> Html msg
211
-
canister =
211
+
canister children =
212
212
chunk
213
-
[ T.mh1, T.ph3 ]
213
+
[ T.overflow_scroll, T.w_100 ]
214
+
[ chunk
215
+
[ T.mh1, T.ph3, T.pb3 ]
216
+
children
217
+
]
214
218
215
219
216
220
centeredContent : List (Html msg) -> Html msg
···
260
264
slab
261
265
Html.h2
262
266
[ css headerFontStyles ]
263
-
[ T.f3
267
+
[ T.center
268
+
, T.f3
264
269
, T.fw7
265
270
, T.lh_title
266
271
, T.mb4
267
-
, T.mt0
272
+
, T.mt3
273
+
, T.tc
268
274
]
269
275
[ Html.text text ]
270
276
···
489
495
[ Css.borderBottom3 (px 1) solid (Color.toElmCssColor colors.inputBorder)
490
496
, Css.color (Color.toElmCssColor colors.text)
491
497
, inputFocus
498
+
499
+
--
500
+
, Css.pseudoClass
501
+
"-moz-focusring"
502
+
[ Css.color Css.transparent
503
+
, Css.textShadow4 zero zero zero (Css.rgb 0 0 0)
504
+
]
492
505
]
493
506
}
494
507
+24
-13
src/Applications/UI/Sources/Form.elm
+24
-13
src/Applications/UI/Sources/Form.elm
···
2
2
3
3
import Chunky exposing (..)
4
4
import Conditional exposing (..)
5
+
import Css
5
6
import Dict
6
7
import Dict.Ext as Dict
7
8
import Html.Styled as Html exposing (Html, strong, text)
8
-
import Html.Styled.Attributes exposing (for, name, placeholder, type_, value)
9
+
import Html.Styled.Attributes exposing (css, for, name, placeholder, type_, value)
9
10
import Html.Styled.Events exposing (onInput, onSubmit)
10
11
import List.Extra as List
11
12
import Material.Icons.Alert as Icons
···
219
220
-----------------------------------------
220
221
-- Content
221
222
-----------------------------------------
222
-
, (\h ->
223
-
form
224
-
[ chunk
225
-
[ T.w_100 ]
226
-
[ UI.Kit.canister h ]
227
-
]
228
-
)
223
+
, (form << List.singleton << chunk [ T.tl ])
229
224
[ UI.Kit.h3 "Where exactly?"
230
225
231
226
-- Fields
···
300
295
-- Note
301
296
-------
302
297
, chunk
303
-
[ T.f6, T.flex, T.lh_title, T.mt4, T.o_50, T.tc ]
298
+
[ T.f6, T.flex, T.items_center, T.justify_center, T.lh_title, T.mt5, T.o_50 ]
304
299
[ slab
305
300
Html.span
306
-
[]
301
+
[ css warningIconStyles ]
307
302
[ T.mr1 ]
308
-
[ Html.fromUnstyled (Icons.warning UI.Kit.colors.text 16) ]
303
+
[ Html.fromUnstyled (Icons.warning UI.Kit.colors.text 14) ]
309
304
, strong
310
305
[]
311
306
[ text "Make sure CORS is enabled" ]
312
307
]
313
308
, chunk
314
-
[ T.f6, T.lh_title, T.mb4, T.mt2, T.o_50, T.tc ]
309
+
[ T.f6, T.lh_title, T.mb4, T.mt1, T.o_50 ]
315
310
[ text "You can find the instructions over "
316
311
, UI.Kit.link { label = "here", url = "/about#CORS" }
317
312
]
···
356
351
[ onSubmit Bypass ]
357
352
[ T.flex
358
353
, T.flex_grow_1
354
+
, T.overflow_hidden
355
+
, T.tc
359
356
]
360
-
[ UI.Kit.centeredContent html ]
357
+
[ UI.Kit.centeredContent
358
+
[ UI.Kit.canister html ]
359
+
]
360
+
361
+
362
+
363
+
-- 🖼
364
+
365
+
366
+
warningIconStyles : List Css.Style
367
+
warningIconStyles =
368
+
[ Css.fontSize (Css.px 0)
369
+
, Css.lineHeight (Css.px 0)
370
+
, Css.marginTop (Css.px -1)
371
+
]