this repo has no description
feat: cleanup back button
+102
-19
+3
-2
www/components/h-back-header.ts
+3
-2
www/components/h-back-header.ts
···
1
1
import { html, LitElement } from 'lit'
2
2
import getString from '$/utils/get_string.ts'
3
3
import app from '$/models/app.ts'
4
+
import { goBack } from '$/utils/go_back.ts'
4
5
5
6
export class HBackHeader extends LitElement {
6
7
static override properties = {
···
27
28
28
29
override render() {
29
30
return html`
30
-
<button @click="${() => history.back()}">
31
-
<ui-icon name="chevron-left"></ui-icon>
31
+
<button @click="${goBack}">
32
+
<ui-icon name="arrow-left"></ui-icon>
32
33
</button>
33
34
<h1>${getString(this.titleKey)}</h1>
34
35
`
+4
-1
www/components/h-reference-header.ts
+4
-1
www/components/h-reference-header.ts
···
1
1
import { html, LitElement } from 'lit'
2
2
import { subjects } from '$/models/subjects.ts'
3
3
import { getColor } from '$/utils/subject_utils.ts'
4
+
import { goBack } from '$/utils/go_back.ts'
4
5
5
6
/**
6
7
* Header for the reference/subject page.
···
37
38
const color = getColor(subject)
38
39
return html`
39
40
<div class="study-header ${color}-dots">
40
-
<a class="left ${color}" @click="${() => history.back()}">back</a>
41
+
<button class="left" @click="${goBack}">
42
+
<ui-icon name="arrow-left"></ui-icon>
43
+
</button>
41
44
<h1 class="${color}">${subject.data.slug}</h1>
42
45
</div>
43
46
`
+2
-2
www/components/h-stats.ts
+2
-2
www/components/h-stats.ts
···
246
246
}}"
247
247
?disabled="${this.#currLevel <= 1}"
248
248
>
249
-
<
249
+
<ui-icon name="arrow-left" />
250
250
</button>
251
251
<button
252
252
@click="${() => {
···
255
255
}}"
256
256
?disabled="${this.#currLevel >= userLevel}"
257
257
>
258
-
>
258
+
<ui-icon name="arrow-right" />
259
259
</button>
260
260
</div>
261
261
</div>
+1
-1
www/routes/study.ts
+1
-1
www/routes/study.ts
···
359
359
${this.mode === Quiz && !this.#isEditing
360
360
? html`
361
361
<div
362
-
style="max-width: var(--max-width-sm); padding: var(--s3); margin: auto; display: flex; gap: var(--s2);"
362
+
style="max-width: var(--max-width-sm); padding: var(--s3); margin: auto; display: flex; justify-content: center"
363
363
>
364
364
<button
365
365
class="${color}-inverse"
+16
www/static/icons/arrow-right.svg
+16
www/static/icons/arrow-right.svg
···
1
+
<svg
2
+
xmlns="http://www.w3.org/2000/svg"
3
+
width="24"
4
+
height="24"
5
+
viewBox="0 0 24 24"
6
+
fill="none"
7
+
stroke="currentColor"
8
+
stroke-width="2"
9
+
stroke-linecap="round"
10
+
stroke-linejoin="round"
11
+
class="feather feather-arrow-right"
12
+
>
13
+
<line x1="5" y1="12" x2="19" y2="12"></line><polyline
14
+
points="12 5 19 12 12 19"
15
+
></polyline>
16
+
</svg>
-13
www/static/icons/chevron-left.svg
-13
www/static/icons/chevron-left.svg
+16
www/static/icons/download.svg
+16
www/static/icons/download.svg
···
1
+
<svg
2
+
xmlns="http://www.w3.org/2000/svg"
3
+
width="24"
4
+
height="24"
5
+
viewBox="0 0 24 24"
6
+
fill="none"
7
+
stroke="currentColor"
8
+
stroke-width="2"
9
+
stroke-linecap="round"
10
+
stroke-linejoin="round"
11
+
class="feather feather-download"
12
+
>
13
+
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline
14
+
points="7 10 12 15 17 10"
15
+
></polyline><line x1="12" y1="15" x2="12" y2="3"></line>
16
+
</svg>
+18
www/static/icons/repeat.svg
+18
www/static/icons/repeat.svg
···
1
+
<svg
2
+
xmlns="http://www.w3.org/2000/svg"
3
+
width="24"
4
+
height="24"
5
+
viewBox="0 0 24 24"
6
+
fill="none"
7
+
stroke="currentColor"
8
+
stroke-width="2"
9
+
stroke-linecap="round"
10
+
stroke-linejoin="round"
11
+
class="feather feather-repeat"
12
+
>
13
+
<polyline points="17 1 21 5 17 9"></polyline><path
14
+
d="M3 11V9a4 4 0 0 1 4-4h14"
15
+
></path><polyline points="7 23 3 19 7 15"></polyline><path
16
+
d="M21 13v2a4 4 0 0 1-4 4H3"
17
+
></path>
18
+
</svg>
+18
www/static/icons/save.svg
+18
www/static/icons/save.svg
···
1
+
<svg
2
+
xmlns="http://www.w3.org/2000/svg"
3
+
width="24"
4
+
height="24"
5
+
viewBox="0 0 24 24"
6
+
fill="none"
7
+
stroke="currentColor"
8
+
stroke-width="2"
9
+
stroke-linecap="round"
10
+
stroke-linejoin="round"
11
+
class="feather feather-save"
12
+
>
13
+
<path
14
+
d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"
15
+
></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline
16
+
points="7 3 7 8 15 8"
17
+
></polyline>
18
+
</svg>
+12
www/static/styles/theme.css
+12
www/static/styles/theme.css
···
605
605
}
606
606
607
607
.study-header .left {
608
+
background: transparent;
609
+
border: none;
610
+
box-shadow: none;
608
611
cursor: pointer;
609
612
float: left;
610
613
font-weight: bold;
611
614
padding: var(--s1);
615
+
width: unset;
616
+
}
617
+
618
+
h-reference-header .study-header .left {
619
+
font-size: var(--f3);
612
620
}
613
621
614
622
.study-header .right {
···
825
833
margin-right: var(--s3);
826
834
padding: var(--s1);
827
835
width: unset;
836
+
}
837
+
838
+
h-back-header button ui-icon {
839
+
font-size: var(--f3);
828
840
}
829
841
830
842
main.settings,
+12
www/utils/go_back.ts
+12
www/utils/go_back.ts
···
1
+
// Record history depth at app entry so we can detect deep-links.
2
+
// Since this module is loaded once per page lifecycle (hash routing never
3
+
// reloads the page), this value is stable for the entire session.
4
+
const _entryDepth = history.length
5
+
6
+
export function goBack() {
7
+
if (history.length > _entryDepth) {
8
+
history.back()
9
+
} else {
10
+
location.hash = '#!/'
11
+
}
12
+
}