This PR:
- Adds a background to the navbar
- Fixes an issue where todos were hidden behind the navbar
- Fixes a reload issue where the selected navigation style was not persisted correctly
+14
-7
Diff
round #0
+1
-1
app/components/Todo/Todos.vue
+1
-1
app/components/Todo/Todos.vue
···
18
18
<template>
19
19
<div class="flex justify-center" data-testid="todos-container">
20
20
<div
21
-
class="max-h-[calc(100dvh-5.75rem)] w-dvw max-w-200 overflow-auto px-1 md:max-h-[calc(100dvh-2.5rem)] pb-1"
21
+
class="max-h-[calc(100dvh-5.75rem)] pwa:max-h-[calc(100dvh-8.75rem)] floating:max-h-[calc(100dvh-8.75rem)] w-dvw max-w-200 overflow-auto px-1 md:max-h-[calc(100dvh-2.5rem)] pb-1"
22
22
>
23
23
<TransitionGroup
24
24
leave-to-class="max-h-0! opacity-0 scale-y-0"
+3
-1
app/components/Utils/Sheet.vue
+3
-1
app/components/Utils/Sheet.vue
···
22
22
const emit = defineEmits<{ close: [] }>();
23
23
24
24
const useModal = useMediaQuery("(min-width: 40rem)");
25
+
26
+
const isPwa = useIsPwa();
25
27
</script>
26
28
27
29
<template>
···
35
37
<DrawerContent
36
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
-
<div class="h-full">
40
+
<div class="h-full" :data-pwa="isPwa">
39
41
<VisuallyHidden>
40
42
<DrawerTitle>{{ title }}</DrawerTitle>
41
43
<DrawerDescription>{{ title }}</DrawerDescription>
+10
-4
app/composables/useSettings.ts
+10
-4
app/composables/useSettings.ts
···
4
4
};
5
5
6
6
export function useSettings() {
7
-
const settings = useLocalStorage<Settings>("settings", {
8
-
insertionPoint: "bottom",
9
-
design: "classic",
10
-
});
7
+
const settings = useLocalStorage<Settings>(
8
+
"settings",
9
+
{
10
+
insertionPoint: "bottom",
11
+
design: "classic",
12
+
},
13
+
{
14
+
initOnMounted: true,
15
+
},
16
+
);
11
17
return { settings };
12
18
}