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

feat: floating back button for xl

Browse source
This commit is contained in:
patak 2023-01-05 13:35:08 +01:00
parent b4408422a8
commit f177ea1ea8
3 changed files with 23 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/main/MainContent.vue
View file

@ -14,7 +14,7 @@ defineProps<{
pt="[env(safe-area-inset-top,0)]" pt="[env(safe-area-inset-top,0)]"
border="b base" bg="[rgba(var(--c-bg-base-rgb),0.7)]" border="b base" bg="[rgba(var(--c-bg-base-rgb),0.7)]"
> >
<div :class="{ 'xl:hidden': !back }" flex justify-between px5 py2> <div xl:hidden flex justify-between px5 py2>
<div flex gap-3 items-center overflow-hidden py2> <div flex gap-3 items-center overflow-hidden py2>
<NuxtLink <NuxtLink
v-if="backOnSmallScreen || back" flex="~ gap1" items-center btn-text p-0 v-if="backOnSmallScreen || back" flex="~ gap1" items-center btn-text p-0

33
components/nav/NavTitle.vue
View file

@ -6,17 +6,26 @@ const { env } = buildInfo
<template> <template>
<!-- Use external to force refresh page and jump to top of timeline --> <!-- Use external to force refresh page and jump to top of timeline -->
<NuxtLink <div flex justify-between>
flex items-end gap-4 <NuxtLink
py2 px-5 flex items-end gap-4
text-2xl py2 px-5
focus-visible:ring="2 current" text-2xl
to="/" focus-visible:ring="2 current"
external to="/"
> external
<img :alt="$t('app_logo')" src="/logo.svg" shrink-0 aspect="1/1" sm:h-8 xl:h-10 class="rtl-flip"> >
<div hidden xl:block> <img :alt="$t('app_logo')" src="/logo.svg" shrink-0 aspect="1/1" sm:h-8 xl:h-10 class="rtl-flip">
{{ $t('app_name') }} <sup text-sm italic text-secondary mt-1>{{ env === 'release' ? 'alpha' : env }}</sup> <div hidden xl:block>
{{ $t('app_name') }} <sup text-sm italic text-secondary mt-1>{{ env === 'release' ? 'alpha' : env }}</sup>
</div>
</NuxtLink>
<div hidden xl:flex items-center me-8 mt-2>
<NuxtLink
@click="$router.go(-1)"
>
<div i-ri:arrow-left-line class="rtl-flip" btn-text />
</NuxtLink>
</div> </div>
</NuxtLink> </div>
</template> </template>

2
pages/[[server]]/@[account]/[status].vue
View file

@ -61,7 +61,7 @@ onReactivated(() => {
<template> <template>
<MainContent back> <MainContent back>
<template v-if="!pending"> <template v-if="!pending">
<div v-if="status" mt--1px border="b base" mb="50vh"> <div v-if="status" xl:mt-4 border="b base" mb="50vh">
<template v-for="comment of context?.ancestors" :key="comment.id"> <template v-for="comment of context?.ancestors" :key="comment.id">
<StatusCard <StatusCard
:status="comment" :actions="comment.visibility !== 'direct'" context="account" :status="comment" :actions="comment.visibility !== 'direct'" context="account"