A simple to-do app focused on tasks that can be completed within a specific time span. taskline.tobinio.dev/
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

Mobile styling fixes #6

open opened by benni043.tngl.sh targeting main from benni043.tngl.sh/task-line: mobile-style-fixes

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
Labels

None yet.

assignee

None yet.

Participants 1
AT URI
at://did:plc:4d7tshmkdmu3kss6q2v5tzka/sh.tangled.repo.pull/3ml6fpi6zzh22
+16 -7
Diff #2
-1
app/components/Nav/HorizontalNav.vue
··· 23 23 floating:shadow-2xl 24 24 25 25 pwa:bottom-12 26 - pwa:bg-transparent 27 26 28 27 floating:pwa:bottom-6 29 28 "
+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"
+1 -1
app/composables/useIsPwa.ts
··· 10 10 onMounted(() => { 11 11 isPwa.value = 12 12 window.matchMedia("(display-mode: standalone)").matches || 13 - (window.navigator as NavigatorStandalone).standalone === true; 13 + (window.navigator as NavigatorStandalone).standalone!; 14 14 }); 15 15 16 16 return isPwa;
+6 -3
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", 7 + const settings = useCookie<Settings>("settings", { 8 + default: () => ({ 9 + insertionPoint: "bottom", 10 + design: "classic", 11 + }), 10 12 }); 13 + 11 14 return { settings }; 12 15 }
+8 -1
app/pages/index.vue
··· 39 39 40 40 const isPwa = useIsPwa(); 41 41 const { settings } = useSettings(); 42 + 43 + useHead({ 44 + htmlAttrs: { 45 + "data-design": computed(() => settings.value.design), 46 + "data-pwa": computed(() => isPwa.value), 47 + }, 48 + }); 42 49 </script> 43 50 <template> 44 - <div :data-design="settings.design" :data-pwa="isPwa"> 51 + <div> 45 52 <FilterSheet v-model:is-open="isFilterSheetOpen" /> 46 53 <SettingsSheet v-model:is-open="isSettingsSheetOpen" /> 47 54 <EditTodoSheet />

History

3 rounds 0 comments
sign up or login to add to the discussion
3 commits
expand
fixed navbar
fixed sheet padding bottom
fixed floating error on reload
merge conflicts detected
expand
  • app/components/Nav/HorizontalNav.vue:23
  • app/components/Todo/Todos.vue:18
expand 0 comments
4 commits
expand
fixed navbar
fixed sheet padding bottom
fixed floating error onreload
changes
expand 0 comments
3 commits
expand
fixed navbar
fixed sheet padding bottom
fixed floating error onreload
expand 0 comments