feat: floating back button for xl

elk-zone · Jan 5, 2023 · f177ea1 · f177ea1
1 parent b440842
commit f177ea1
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 14 deletions.
diff --git a/components/main/MainContent.vue b/components/main/MainContent.vue
@@ -14,7 +14,7 @@ defineProps<{
       pt="[env(safe-area-inset-top,0)]"
       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>
           <NuxtLink
             v-if="backOnSmallScreen || back" flex="~ gap1" items-center btn-text p-0

diff --git a/components/nav/NavTitle.vue b/components/nav/NavTitle.vue
@@ -6,17 +6,26 @@ const { env } = buildInfo
 
 <template>
   <!-- Use external to force refresh page and jump to top of timeline -->
-  <NuxtLink
-    flex items-end gap-4
-    py2 px-5
-    text-2xl
-    focus-visible:ring="2 current"
-    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>
-      {{ $t('app_name') }} <sup text-sm italic text-secondary mt-1>{{ env === 'release' ? 'alpha' : env }}</sup>
+  <div flex justify-between>
+    <NuxtLink
+      flex items-end gap-4
+      py2 px-5
+      text-2xl
+      focus-visible:ring="2 current"
+      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>
+        {{ $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>
-  </NuxtLink>
+  </div>
 </template>
diff --git a/pages/[[server]]/@[account]/[status].vue b/pages/[[server]]/@[account]/[status].vue
@@ -61,7 +61,7 @@ onReactivated(() => {
 <template>
   <MainContent back>
     <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">
           <StatusCard
             :status="comment" :actions="comment.visibility !== 'direct'" context="account"