forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
Better mobile styles and scroll handling
+42
-90
+35
-12
src/Applications/UI.elm
+35
-12
src/Applications/UI.elm
···
1292
1292
-----------------------------------------
1293
1293
, case ( model.isLoading, model.authentication ) of
1294
1294
( True, _ ) ->
1295
-
content [ loadingAnimation ]
1295
+
content { justifyCenter = True } [ loadingAnimation ]
1296
1296
1297
1297
( False, Authentication.Authenticated _ ) ->
1298
-
content (defaultScreen model)
1298
+
content { justifyCenter = False } (defaultScreen model)
1299
1299
1300
1300
( False, _ ) ->
1301
1301
model.authentication
1302
1302
|> Lazy.lazy Authentication.view
1303
1303
|> Html.map AuthenticationMsg
1304
1304
|> List.singleton
1305
-
|> content
1305
+
|> content { justifyCenter = False }
1306
1306
]
1307
1307
1308
1308
···
1374
1374
-- 🗺 ░░ BITS
1375
1375
1376
1376
1377
-
content : List (Html msg) -> Html msg
1378
-
content =
1377
+
content : { justifyCenter : Bool } -> List (Html msg) -> Html msg
1378
+
content { justifyCenter } nodes =
1379
1379
brick
1380
-
[ style "min-height" "calc(var(--vh, 1vh) * 100)" ]
1381
-
[ T.flex
1382
-
, T.flex_column
1383
-
, T.items_center
1384
-
, T.justify_center
1385
-
, T.min_vh_100
1386
-
, T.ph3
1380
+
[ css contentStyles ]
1381
+
[ T.overflow_scroll
1387
1382
, T.relative
1388
1383
, T.z_1
1389
1384
]
1385
+
[ brick
1386
+
[ css contentInnerStyles ]
1387
+
[ T.flex
1388
+
, T.flex_column
1389
+
, T.items_center
1390
+
, T.h_100
1391
+
, T.ph3
1392
+
1393
+
--
1394
+
, ifThenElse justifyCenter T.justify_center ""
1395
+
]
1396
+
nodes
1397
+
]
1398
+
1399
+
1400
+
contentStyles : List Css.Style
1401
+
contentStyles =
1402
+
[ Css.width (Css.vw 100)
1403
+
1404
+
--
1405
+
, Css.property "height" "calc(var(--vh, 1vh) * 100)"
1406
+
, Css.property "-webkit-overflow-scrolling" "touch"
1407
+
]
1408
+
1409
+
1410
+
contentInnerStyles : List Css.Style
1411
+
contentInnerStyles =
1412
+
[ Css.minWidth (Css.px 280) ]
1390
1413
1391
1414
1392
1415
loadingAnimation : Html msg
+1
-1
src/Applications/UI/Authentication.elm
+1
-1
src/Applications/UI/Authentication.elm
+1
-1
src/Applications/UI/Console.elm
+1
-1
src/Applications/UI/Console.elm
···
104
104
button light content msg =
105
105
brick
106
106
[ onClick msg ]
107
-
[ T.flex, T.flex_column, T.items_center, T.mh3, T.mh4_ns, T.ph1, T.pointer ]
107
+
[ T.flex, T.flex_column, T.items_center, T.mh1, T.mh4_ns, T.ph1, T.pointer ]
108
108
[ brick
109
109
[ css [ Css.height (Css.px 4) ] ]
110
110
[]
-73
src/Javascript/rubber-band.js
-73
src/Javascript/rubber-band.js
···
1
-
//
2
-
// Rubber Band
3
-
// \ (•◡•) /
4
-
//
5
-
// This prevents the iOS rubber-band scrolling on the body element.
6
-
// It's based on the https://github.com/lazd/iNoBounce library,
7
-
// with the difference that this'll scroll if the app is > 100vh.
8
-
9
-
10
-
let touchStartY = 0,
11
-
supportsPassiveOption = false
12
-
13
-
14
-
try {
15
-
window.addEventListener("test", null, Object.defineProperty(
16
-
{}, "passive", { get: _ => { supportsPassiveOption = true } }
17
-
))
18
-
} catch (e) {
19
-
//
20
-
}
21
-
22
-
23
-
const documentTouchStart = event => {
24
-
touchStartY = event.touches ? event.touches[0].screenY : event.screenY
25
-
}
26
-
27
-
28
-
const documentTouchMove = event => {
29
-
let el = event.target
30
-
31
-
while (el !== document.body && el !== document) {
32
-
const style = window.getComputedStyle(el)
33
-
if (!style) break
34
-
35
-
// Ignore range input element
36
-
if (el.nodeName === "INPUT" && el.getAttribute("type") === "range") return
37
-
38
-
// Determine if the element should scroll
39
-
const scrolling = style.getPropertyValue("-webkit-overflow-scrolling")
40
-
const overflowY = style.getPropertyValue("overflow-y")
41
-
const height = parseInt(style.getPropertyValue("height"), 10)
42
-
const isScrollable = scrolling === "touch" && (overflowY === "auto" || overflowY === "scroll")
43
-
const canScroll = el.scrollHeight > el.offsetHeight
44
-
45
-
if (isScrollable && canScroll) {
46
-
const currentY = event.touches ? event.touches[0].screenY : event.screenY
47
-
const isAtTop = (touchStartY <= currentY && el.scrollTop === 0)
48
-
const isAtBottom = (touchStartY >= currentY && el.scrollHeight - el.scrollTop === height)
49
-
if (isAtTop || isAtBottom) event.preventDefault()
50
-
return
51
-
}
52
-
53
-
el = el.parentNode
54
-
}
55
-
56
-
if (document.body.scrollHeight <= window.innerHeight) {
57
-
event.preventDefault()
58
-
}
59
-
}
60
-
61
-
62
-
window.addEventListener(
63
-
"touchstart",
64
-
documentTouchStart,
65
-
supportsPassiveOption ? { passive : false } : false
66
-
)
67
-
68
-
69
-
window.addEventListener(
70
-
"touchmove",
71
-
documentTouchMove,
72
-
supportsPassiveOption ? { passive : false } : false
73
-
)
+5
-3
src/Static/Html/Application.html
+5
-3
src/Static/Html/Application.html
···
1
1
<!DOCTYPE html>
2
-
<html>
2
+
<html
3
+
class="fixed left-0 overflow-hidden top-0 vh-100 w-100"
4
+
style="height: calc(var(--vh, 1vh) * 100); overscroll-behavior: none;"
5
+
>
3
6
<head>
4
7
5
8
<meta charset="utf-8" />
···
46
49
<link rel="preload" href="/images/diffuse__icon-dark.svg" as="image" crossorigin="anonymous" />
47
50
48
51
</head>
49
-
<body class="min-vh-100 overflow-hidden">
52
+
<body>
50
53
51
54
52
55
<div id="elm">
···
92
95
93
96
<script src="/urls.js"></script>
94
97
<script src="/audio-engine.js"></script>
95
-
<script src="/rubber-band.js"></script>
96
98
<script src="/application.js"></script>
97
99
98
100
<!-- Initialize Boot Procedure -->