mobile styling improvements implemented #2

+39 -13

app/components/Nav/HorizontalNav.vue

reviewed

··· 5 5 const isFilterSheetOpen = defineModel<boolean>("isFilterSheetOpen"); 6 6 const isNewSheetOpen = defineModel<boolean>("isNewSheetOpen"); 7 7 8 8 - const { standalone } = useIsPwa(); 8 8 + const isPwa = useIsPwa(); 9 9 const { settings } = useSettings(); 10 10 </script> 11 11 12 12 <template> 13 13 - <div class="flex justify-center"> 13 13 + <div 14 14 + class="flex justify-center" 15 15 + :data-design="settings.design" 16 16 + :data-pwa="isPwa" 17 17 + > 14 18 <div 15 15 - class="bg-surface fixed bottom-0 flex h-12 w-dvw justify-between" 16 16 - :class="{ 17 17 - 'bottom-6 max-w-[90vw] h-18 px-2 flex items-center rounded-4xl border border-white/10 shadow-2xl': settings.design === 'modern', 18 18 - 'bottom-12 bg-transparent': standalone && !(settings.design === 'modern') 19 19 - }" 19 19 + class=" 20 20 + bg-surface fixed bottom-0 flex h-12 w-dvw justify-between 21 21 + 22 22 + floating:bottom-6 23 23 + floating:max-w-[90vw] 24 24 + floating:h-18 25 25 + floating:items-center 26 26 + floating:rounded-4xl 27 27 + floating:border 28 28 + floating:border-white/10 29 29 + floating:px-2 30 30 + floating:shadow-2xl 31 31 + 32 32 + pwa:bottom-12 33 33 + pwa:bg-transparent 34 34 + 35 35 + floating:pwa:bottom-6 36 36 + " 20 37 > 21 38 <div class="relativ -z-10 flex"> 22 39 <button 23 40 type="button" 24 41 data-testid="settings-button" 25 25 - class="bg-secondary hover:bg-secondary-hover relative m-1 flex aspect-square h-10 cursor-pointer items-center justify-center rounded transition-colors" 26 26 - :class="{'rounded-3xl': settings.design === 'modern', 'h-12': settings.design === 'modern'}" 42 42 + class=" 43 43 + bg-secondary hover:bg-secondary-hover relative m-1 flex aspect-square h-10 cursor-pointer items-center justify-center rounded transition-colors 44 44 + floating:rounded-3xl 45 45 + floating:h-12 46 46 + " 27 47 @click="() => isSettingsSheetOpen = true" 28 48 > 29 49 <Icon name="material-symbols:settings-outline-rounded" size="24" /> 30 50 </button> 31 51 <button 32 52 type="button" 33 33 - class="bg-secondary hover:bg-secondary-hover relative m-1 flex aspect-square h-10 cursor-pointer items-center justify-center rounded transition-colors" 34 34 - :class="{'rounded-3xl': settings.design === 'modern', 'h-12': settings.design === 'modern'}" 53 53 + class=" 54 54 + bg-secondary hover:bg-secondary-hover relative m-1 flex aspect-square h-10 cursor-pointer items-center justify-center rounded transition-colors 55 55 + floating:rounded-3xl 56 56 + floating:h-12 57 57 + " 35 58 @click="() => isFilterSheetOpen = true" 36 59 > 37 60 <Icon ··· 44 67 </div> 45 68 <button 46 69 type="button" 47 47 - class="bg-primary hover:bg-primary-hover relative m-1 flex aspect-square h-10 cursor-pointer items-center justify-center rounded transition-colors" 48 48 - :class="{'rounded-3xl': settings.design === 'modern', 'h-12': settings.design === 'modern'}" 70 70 + class=" 71 71 + bg-primary hover:bg-primary-hover relative m-1 flex aspect-square h-10 cursor-pointer items-center justify-center rounded transition-colors 72 72 + floating:rounded-3xl 73 73 + floating:h-12 74 74 + " 49 75 @click="() => isNewSheetOpen = true" 50 76 > 51 77 <Icon name="material-symbols:add-2-rounded" size="24" />

+1 -1

app/components/Settings/SettingsSheet.vue

reviewed

··· 96 96 class="bg-surface border-secondary h-8 cursor-pointer rounded border px-2 text-white" 97 97 > 98 98 <option value="classic">{{ t(`classic`) }}</option> 99 99 - <option value="modern">{{ t(`modern`) }}</option> 99 99 + <option value="floating">{{ t(`floating`) }}</option> 100 100 </select> 101 101 </div> 102 102

+6 -5

app/components/Utils/Sheet.vue

reviewed

··· 23 23 24 24 const useModal = useMediaQuery("(min-width: 40rem)"); 25 25 26 26 - const { standalone } = useIsPwa(); 26 26 + const isPwa = useIsPwa(); 27 27 </script> 28 28 29 29 <template> ··· 37 37 <DrawerContent 38 38 class="bg-surface fixed bottom-0 z-30 flex h-106 w-dvw flex-col gap-2 rounded-t-lg drop-shadow-lg" 39 39 > 40 40 - <div class="h-full"> 40 40 + <div class="h-full" :data-pwa="isPwa"> 41 41 <VisuallyHidden> 42 42 - 42 42 + <DrawerTitle>{{ title }}</DrawerTitle> 43 43 <DrawerDescription>{{ title }}</DrawerDescription> 44 44 </VisuallyHidden> 45 45 <DrawerHandle class="my-2" /> 46 46 <div 47 47 - class="h-full overflow-auto px-2 pb-7" 48 48 - :class="{'pb-17': standalone}" 47 47 + class=" 48 48 + h-full overflow-auto px-2 pb-7 49 49 + pwa:pb-17" 49 50 > 50 51 <slot /> 51 52 </div>

+4 -4

app/composables/useIsPwa.ts

reviewed

··· 5 5 } 6 6 7 7 export function useIsPwa() { 8 8 - const standalone = ref(false); 8 8 + const isPwa = ref(false); 9 9 10 10 onMounted(() => { 11 11 - standalone.value = 11 11 + isPwa.value = 12 12 window.matchMedia("(display-mode: standalone)").matches || 13 13 - (window.navigator as NavigatorStandalone).standalone!; 13 13 + (window.navigator as NavigatorStandalone).standalone === true; 14 14 }); 15 15 16 16 - return { standalone }; 16 16 + return isPwa; 17 17 }

+1 -1

app/composables/useSettings.ts

reviewed

··· 1 1 type Settings = { 2 2 insertionPoint: "top" | "bottom"; 3 3 - design: "classic" | "modern"; 3 3 + design: "classic" | "floating"; 4 4 }; 5 5 6 6 export function useSettings() {

+1 -1

i18n/locales/de.json

reviewed

··· 37 37 "push": "Webpush", 38 38 "design": "Design", 39 39 "classic": "Klassisch", 40 40 - "modern": "Modern" 40 40 + "floating": "Schwebend" 41 41 }

+2 -2

i18n/locales/en.json

reviewed

··· 36 36 "notUsedYet": "Not used yet" 37 37 }, 38 38 "design": "Design", 39 39 - "classic": "Klassisch", 40 40 - "modern": "Modern" 39 39 + "classic": "Classic", 40 40 + "floating": "Floating" 41 41 }

+3

app/assets/css/main.css

reviewed

··· 102 102 ::-webkit-scrollbar-thumb:hover { 103 103 background: #555; 104 104 } 105 105 + 106 106 + @custom-variant floating (&:where([data-design="floating"] *)); 107 107 + @custom-variant pwa (&:where([data-pwa="true"] *));