teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

fix(safari): account for larger header in notifications/explore

Browse source
This commit is contained in:
patak 2022-12-30 17:25:40 +01:00
parent 1a532265fb
commit 6c59791682
4 changed files with 5 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
components/main/MainContent.vue
View file

@ -4,11 +4,12 @@ defineProps<{
backOnSmallScreen?: boolean backOnSmallScreen?: boolean
/** Show the back button on both small and big screens */ /** Show the back button on both small and big screens */
back?: boolean back?: boolean
largeHeader?: boolean
}>() }>()
</script> </script>
<template> <template>
<div relative mobile-padding-top sm:pt-0> <div relative :class="largeHeader ? 'mobile-padding-top-large-header' : 'mobile-padding-top'" sm:pt-0>
<div <div
fixed sm:sticky w-full top-0 z10 fixed sm:sticky w-full top-0 z10
border="b base" bg-base border="b base" bg-base

2
pages/[[server]]/explore.vue
View file

@ -26,7 +26,7 @@ const tabs = $computed(() => [
</script> </script>
<template> <template>
<MainContent> <MainContent large-header>
<template #title> <template #title>
<span text-lg font-bold flex items-center gap-2 cursor-pointer @click="$scrollToTop"> <span text-lg font-bold flex items-center gap-2 cursor-pointer @click="$scrollToTop">
<div i-ri:hashtag /> <div i-ri:hashtag />

2
pages/notifications.vue
View file

@ -26,7 +26,7 @@ onActivated(() => {
</script> </script>
<template> <template>
<MainContent> <MainContent large-header>
<template #title> <template #title>
<NuxtLink to="/notifications" text-lg font-bold flex items-center gap-2 @click="$scrollToTop"> <NuxtLink to="/notifications" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
<div i-ri:notification-4-line /> <div i-ri:notification-4-line />

1
unocss.config.ts
View file

@ -102,6 +102,7 @@ export default defineConfig({
}], }],
['box-shadow-outline', { 'box-shadow': '0 0 0 1px var(--c-primary)' }], ['box-shadow-outline', { 'box-shadow': '0 0 0 1px var(--c-primary)' }],
['mobile-padding-top', { 'padding-top': 'calc(4rem + 1px)' }], // in sm screen size header is fixed (instead of sticky) and parent have this padding, to prevent flickering in iOS Safari ['mobile-padding-top', { 'padding-top': 'calc(4rem + 1px)' }], // in sm screen size header is fixed (instead of sticky) and parent have this padding, to prevent flickering in iOS Safari
['mobile-padding-top-large-header', { 'padding-top': 'calc(6.5rem + 1px)' }],
['mobile-padding-bottom', { 'padding-bottom': '3.5rem' }], // in sm screen size footer is fixed (instead of sticky) and parent have this padding, to prevent flickering in iOS Safari ['mobile-padding-bottom', { 'padding-bottom': '3.5rem' }], // in sm screen size footer is fixed (instead of sticky) and parent have this padding, to prevent flickering in iOS Safari
], ],
}) })