Mobile styling fixes #6

app/components/Nav/HorizontalNav.vue

reviewed

This file has not been changed.

app/components/Todo/Todos.vue

reviewed

This file has not been changed.

+9 -4

app/composables/useSettings.ts

reviewed

··· 1 1 - type Settings = { 2 2 - insertionPoint: "top" | "bottom"; 1 1 + 2 2 + 3 3 + 3 4 }; 4 5 5 6 export function useSettings() { 6 6 - const settings = useLocalStorage<Settings>("settings", { 7 7 - insertionPoint: "bottom", 7 7 + const settings = useCookie<Settings>("settings", { 8 8 + default: () => ({ 9 9 + insertionPoint: "bottom", 10 10 + design: "classic", 11 11 + }), 8 12 }); 13 13 + 9 14 return { settings }; 10 15 }

+1 -5

app/components/Settings/SettingsSheet.vue

reviewed

··· 10 10 11 11 const config = useRuntimeConfig(); 12 12 13 13 - const cookie = useCookie<string>("navStyle", { 14 14 - default: () => "classic", 15 15 - }); 16 16 - 17 13 function close() { 18 14 isOpen.value = false; 19 15 } ··· 96 92 <div> 97 93 <h2 class="text-muted-text text-lg">{{ t("design") }}</h2> 98 94 <select 95 95 + v-model="settings.design" 99 99 - v-model="cookie" 100 96 class="bg-surface border-secondary h-8 cursor-pointer rounded border px-2 text-white" 101 97 > 102 98 <option value="classic">{{ t(`classic`) }}</option>

+3 -5

app/pages/index.vue

reviewed

··· 36 36 }); 37 37 38 38 const { isMobile } = useDevice(); 39 39 - const cookie = useCookie("navStyle"); 40 39 41 40 const isPwa = useIsPwa(); 42 42 - 43 43 - let design = computed(() => cookie.value); 41 41 + const { settings } = useSettings(); 44 42 45 43 useHead({ 46 44 htmlAttrs: { 47 47 - "data-design": design, 48 48 - "data-pwa": isPwa, 45 45 + "data-design": computed(() => settings.value.design), 46 46 + "data-pwa": computed(() => isPwa.value), 49 47 }, 50 48 }); 51 49 </script>

+1 -1

app/composables/useIsPwa.ts

reviewed

··· 10 10 onMounted(() => { 11 11 isPwa.value = 12 12 window.matchMedia("(display-mode: standalone)").matches || 13 13 - (window.navigator as NavigatorStandalone).standalone === true; 13 13 + (window.navigator as NavigatorStandalone).standalone!; 14 14 }); 15 15 16 16 return isPwa;