forked from
tobinio.dev/task-line
A simple to-do app focused on tasks that can be completed within a specific time span.
mobile styling improvements implemented
+92
-28
+17
-3
app/components/Settings/SettingsSheet.vue
+17
-3
app/components/Settings/SettingsSheet.vue
···
52
52
53
53
<template>
54
54
<Sheet :is-open="isOpen" title="Settings Sheet" @close="close">
55
-
<div data-testid="settings-sheet" class="flex flex-col gap-1">
55
+
<div data-testid="settings-sheet" class="flex flex-col gap-4">
56
56
<div class="flex gap-1">
57
57
<div>
58
58
<h2 class="text-muted-text text-lg">{{ t("login") }}</h2>
···
66
66
class="bg-surface border-secondary h-8 cursor-pointer rounded border px-2 text-white"
67
67
:value="locale"
68
68
@change="
69
-
onLanguageChange(($event.target as HTMLSelectElement).value)
70
-
"
69
+
onLanguageChange(($event.target as HTMLSelectElement).value)
70
+
"
71
71
>
72
72
<option v-for="lang in locales" :key="lang.code" :value="lang.code">
73
73
{{ t(`languageNames.${lang.code}`) }}
74
74
</option>
75
75
</select>
76
76
</div>
77
+
</div>
77
78
79
+
<div class="flex gap-1">
78
80
<div>
79
81
<h2 class="text-muted-text text-lg">{{ t("push") }}</h2>
80
82
<button
···
88
90
</div>
89
91
90
92
<div>
93
+
<h2 class="text-muted-text text-lg">{{ t("design") }}</h2>
94
+
<select
95
+
v-model="settings.design"
96
+
class="bg-surface border-secondary h-8 cursor-pointer rounded border px-2 text-white"
97
+
>
98
+
<option value="classic">{{ t(`classic`) }}</option>
99
+
<option value="modern">{{ t(`modern`) }}</option>
100
+
</select>
101
+
</div>
102
+
103
+
<div>
91
104
<h2 class="text-muted-text text-lg">{{ t("insertionPoint") }}</h2>
92
105
<select
93
106
v-model="settings.insertionPoint"
···
98
111
</select>
99
112
</div>
100
113
</div>
114
+
101
115
<Categories />
102
116
<Tags />
103
117
<ApiKeys />
+9
-2
app/components/Utils/Sheet.vue
+9
-2
app/components/Utils/Sheet.vue
···
22
22
const emit = defineEmits<{ close: [] }>();
23
23
24
24
const useModal = useMediaQuery("(min-width: 40rem)");
25
+
26
+
const { standalone } = useIsPwa();
25
27
</script>
26
28
27
29
<template>
···
33
35
@click="emit('close')"
34
36
/>
35
37
<DrawerContent
36
-
class="bg-surface fixed bottom-0 z-30 flex h-96 w-dvw flex-col gap-2 rounded-t-lg drop-shadow-lg"
38
+
class="bg-surface fixed bottom-0 z-30 flex h-106 w-dvw flex-col gap-2 rounded-t-lg drop-shadow-lg"
37
39
>
38
40
<div class="h-full">
39
41
<VisuallyHidden>
···
41
43
<DrawerDescription>{{ title }}</DrawerDescription>
42
44
</VisuallyHidden>
43
45
<DrawerHandle class="my-2" />
44
-
<div class="h-full overflow-auto px-2 pb-7"><slot /></div>
46
+
<div
47
+
class="h-full overflow-auto px-2 pb-7"
48
+
:class="{'pb-17': standalone}"
49
+
>
50
+
<slot />
51
+
</div>
45
52
</div>
46
53
</DrawerContent>
47
54
</DrawerPortal>
+17
app/composables/useIsPwa.ts
+17
app/composables/useIsPwa.ts
···
1
+
import { onMounted, ref } from "vue";
2
+
3
+
interface NavigatorStandalone extends Navigator {
4
+
standalone?: boolean;
5
+
}
6
+
7
+
export function useIsPwa() {
8
+
const standalone = ref(false);
9
+
10
+
onMounted(() => {
11
+
standalone.value =
12
+
window.matchMedia("(display-mode: standalone)").matches ||
13
+
(window.navigator as NavigatorStandalone).standalone!;
14
+
});
15
+
16
+
return { standalone };
17
+
}
+2
app/composables/useSettings.ts
+2
app/composables/useSettings.ts
···
1
1
type Settings = {
2
2
insertionPoint: "top" | "bottom";
3
+
design: "classic" | "modern";
3
4
};
4
5
5
6
export function useSettings() {
6
7
const settings = useLocalStorage<Settings>("settings", {
7
8
insertionPoint: "bottom",
9
+
design: "classic",
8
10
});
9
11
return { settings };
10
12
}
+4
-1
i18n/locales/de.json
+4
-1
i18n/locales/de.json