adam.tngl.sh
an attempt at a lightweight photo/album viewer
scrobbler bigger grab area
+18
-6
+3
-1
frontend/dist/index.html
+3
-1
frontend/dist/index.html
···
14
14
<div id="grid" class="scrubbable-grid"></div>
15
15
<div id="scrobbler-container">
16
16
<div id="scrobbler-track"></div>
17
-
<div id="scrobbler-handle">↕ </div>
17
+
<div id="scrobbler-handle-container">
18
+
<div id="scrobbler-handle">↕ </div>
19
+
</div>
18
20
<div id="scrobbler-date"></div>
19
21
<div id="scrobbler-section-title"></div>
20
22
</div>
+8
-3
frontend/dist/scrobbler.css
+8
-3
frontend/dist/scrobbler.css
···
12
12
#scrobbler-container {
13
13
position: fixed;
14
14
top: 100px;
15
-
right: 0.2em;
15
+
right: 1.6em;
16
16
width: 1em;
17
17
height: calc(100vh - 200px);
18
18
z-index: 1000;
···
35
35
display: none;
36
36
}
37
37
38
-
#scrobbler-handle {
38
+
#scrobbler-handle-container {
39
39
position: absolute;
40
40
top: 0;
41
41
left: 0;
42
+
margin:0px;
43
+
padding: 1em;
44
+
transform: translateY(-2em);
45
+
}
46
+
#scrobbler-handle {
47
+
position:relative;
42
48
padding: 0.4em 0.6em;
43
49
font-size: 1em;
44
50
line-height: 1em;
45
51
background-color: #666;
46
52
border-radius: 50%;
47
53
cursor: pointer;
48
-
transform: translateY(-10px);
49
54
}
50
55
51
56
#scrobbler-section-title {
+1
-1
frontend/src/gallery.mjs
+1
-1
frontend/src/gallery.mjs
···
166
166
167
167
document.addEventListener('DOMContentLoaded', () => {
168
168
const scrobblerContainer = document.getElementById('scrobbler-container');
169
-
const scrobblerHandle = document.getElementById('scrobbler-handle');
169
+
const scrobblerHandle = document.getElementById('scrobbler-handle-container');
170
170
const scrobblerSectionTitle = document.getElementById('scrobbler-section-title');
171
171
const grid = document.getElementById('grid');
172
172
+6
-1
frontend/src/scrobbler.ts
+6
-1
frontend/src/scrobbler.ts
···
7
7
private maxTimestamp: number | undefined;
8
8
9
9
10
-
constructor(private grid: HTMLElement, private scrobblerContainer: HTMLElement, private scrobblerHandle: HTMLElement, private scrobblerSectionTitle: HTMLElement) {
10
+
constructor(
11
+
private grid: HTMLElement,
12
+
private scrobblerContainer: HTMLElement,
13
+
private scrobblerHandle: HTMLElement,
14
+
private scrobblerSectionTitle: HTMLElement
15
+
) {
11
16
this.isDragging = false;
12
17
this.allSegments = [];
13
18
this.segmentOffsets = new Map();