An app for logging board climbs
fix: session styles
+29
-49
+1
-1
deno.json
+1
-1
deno.json
+22
-15
www/routes/sessions.ts
+22
-15
www/routes/sessions.ts
···
38
38
const grade = climb ? gradeLabel(climb.grade) : ''
39
39
return html`
40
40
<button
41
-
class="session-attempt"
42
41
role="listitem"
43
42
data-attempt-climb-id="${a.climbId}"
44
43
data-attempt-back="${backRoute}"
45
44
>
46
-
<div class="session-attempt-row">
47
-
<span class="session-attempt-name">${name}</span>
48
-
${grade
45
+
<div class="bm-item-main">
46
+
<span class="bm-name">${name}</span>
47
+
${a.sent
49
48
? html`
50
-
<ui-badge class="grade">${grade}</ui-badge>
49
+
<ui-badge variant="success">Sent</ui-badge>
51
50
`
52
-
: ''} ${a.sent
51
+
: ''} ${grade
53
52
? html`
54
-
<ui-badge variant="success">Sent</ui-badge>
53
+
<ui-badge class="grade">${grade}</ui-badge>
55
54
`
56
55
: ''}
57
56
</div>
58
-
<div class="session-attempt-meta">
59
-
<span>${formatTimeOfDay(a.timestamp)}</span>
60
-
<span>·</span>
61
-
<span>${a.attempts} attempt${a.attempts === 1 ? '' : 's'}</span>
57
+
<div class="bm-item-meta">
58
+
<span class="bm-setter">${formatTimeOfDay(a.timestamp)}</span>
59
+
<span class="bm-stats">${a.attempts} attempt${a.attempts === 1
60
+
? ''
61
+
: 's'}</span>
62
62
</div>
63
63
</button>
64
64
`
···
357
357
const visible = past.slice(0, listState.shown)
358
358
const remaining = past.length - visible.length
359
359
const active = this.activeSession()
360
-
const activeAttempts = active ? [...active.attempts].reverse() : []
360
+
const activeAttempts = active
361
+
? [...active.attempts].sort((a, b) =>
362
+
new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
363
+
)
364
+
: []
361
365
362
366
return html`
363
367
<section class="active-session-card">
···
542
546
`
543
547
: html`
544
548
<div class="session-attempts-list" role="list">
545
-
${[...s.attempts].reverse().map((a) =>
546
-
renderAttemptRow(a, `/session/${s.id}`)
547
-
)}
549
+
${[...s.attempts]
550
+
.sort((a, b) =>
551
+
new Date(a.timestamp).getTime() -
552
+
new Date(b.timestamp).getTime()
553
+
)
554
+
.map((a) => renderAttemptRow(a, `/session/${s.id}`))}
548
555
</div>
549
556
`} ${s.notes
550
557
? html`
+6
-33
www/static/theme.css
+6
-33
www/static/theme.css
···
575
575
list-style: none;
576
576
margin: 0;
577
577
padding: 0;
578
-
display: flex;
579
-
flex-direction: column;
580
-
gap: var(--s2);
581
-
}
582
-
583
-
.session-attempt {
584
-
display: flex;
585
-
flex-direction: column;
586
-
gap: var(--s1);
587
-
padding: var(--s3);
588
-
border: 1px solid var(--border);
589
-
border-radius: var(--br);
590
-
}
591
-
592
-
.session-attempt-row {
593
-
display: flex;
594
-
align-items: center;
595
-
gap: var(--s2);
596
-
}
597
-
598
-
.session-attempt-name {
599
-
font-weight: var(--fw-semibold);
600
-
flex: 1;
601
-
}
602
-
603
-
.session-attempt-meta {
604
-
display: flex;
605
-
gap: var(--s2);
606
-
font-size: var(--f6);
607
-
color: var(--muted);
608
578
}
609
579
610
580
.session-notes {
···
689
659
border-bottom: 1px solid currentColor;
690
660
}
691
661
692
-
[data-bm-id] {
662
+
[data-bm-id],
663
+
[data-attempt-climb-id] {
693
664
display: block;
694
665
width: 100%;
695
666
text-align: left;
···
703
674
border-radius: 0;
704
675
}
705
676
706
-
[data-bm-id]:hover {
677
+
[data-bm-id]:hover,
678
+
[data-attempt-climb-id]:hover {
707
679
background: var(--primary-dull);
708
680
opacity: 1;
709
681
transform: none;
710
682
}
711
683
712
-
[data-bm-id]:active {
684
+
[data-bm-id]:active,
685
+
[data-attempt-climb-id]:active {
713
686
transform: none;
714
687
}
715
688