+118
-30
Diff
round #0
+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="floating">{{ t(`floating`) }}</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
···
98
111
</select>
99
112
</div>
100
113
</div>
114
+
101
115
<Categories />
102
116
<Tags />
103
117
<ApiKeys />
+9
-3
app/components/Utils/Sheet.vue
+9
-3
app/components/Utils/Sheet.vue
···
33
33
@click="emit('close')"
34
34
/>
35
35
<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"
36
+
class="bg-surface fixed bottom-0 z-30 flex h-106 w-dvw flex-col gap-2 rounded-t-lg drop-shadow-lg"
37
37
>
38
38
<div class="h-full">
39
39
<VisuallyHidden>
40
-
40
+
<DrawerTitle>{{ title }}</DrawerTitle>
41
41
<DrawerDescription>{{ title }}</DrawerDescription>
42
42
</VisuallyHidden>
43
43
<DrawerHandle class="my-2" />
44
-
<div class="h-full overflow-auto px-2 pb-7"><slot /></div>
44
+
<div
45
+
class="
46
+
h-full overflow-auto px-2 pb-7
47
+
pwa:pb-17"
48
+
>
49
+
<slot />
50
+
</div>
45
51
</div>
46
52
</DrawerContent>
47
53
</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 isPwa = ref(false);
9
+
10
+
onMounted(() => {
11
+
isPwa.value =
12
+
window.matchMedia("(display-mode: standalone)").matches ||
13
+
(window.navigator as NavigatorStandalone).standalone === true;
14
+
});
15
+
16
+
return isPwa;
17
+
}
+2
app/composables/useSettings.ts
+2
app/composables/useSettings.ts
···
1
1
type Settings = {
2
2
insertionPoint: "top" | "bottom";
3
+
design: "classic" | "floating";
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
+4
-1
i18n/locales/en.json
+4
-1
i18n/locales/en.json
+3
app/assets/css/main.css
+3
app/assets/css/main.css
+4
-1
app/pages/index.vue
+4
-1
app/pages/index.vue
···
36
36
});
37
37
38
38
const { isMobile } = useDevice();
39
+
40
+
const isPwa = useIsPwa();
41
+
const { settings } = useSettings();
39
42
</script>
40
43
<template>
41
-
<div>
44
+
<div :data-design="settings.design" :data-pwa="isPwa">
42
45
<FilterSheet v-model:is-open="isFilterSheetOpen" />
43
46
<SettingsSheet v-model:is-open="isSettingsSheetOpen" />
44
47
<EditTodoSheet />
History
1 round
0 comments
benni043.tngl.sh
submitted
#0
3 commits
expand
collapse
mobile styling improvements implemented
fixed
custom variant fix
merge conflicts detected
expand
collapse
expand
collapse
- app/components/Nav/HorizontalNav.vue:4
- app/components/Settings/SettingsSheet.vue:52
- app/components/Utils/Sheet.vue:33
- app/composables/useSettings.ts:1
- i18n/locales/de.json:34
- i18n/locales/en.json:34