From 2442c80bfb93cb600c8c9f2dff53b2e947e08168 Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Sun, 20 Nov 2022 22:30:21 +0100
Subject: [PATCH] feat: improve layout (#19)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
---
 components/main/MainContent.vue      | 20 +++++++++------
 components/publish/PublishWidget.vue |  2 +-
 layouts/default.vue                  | 38 ++++++++++++++++------------
 pages/tags/[tag].vue                 | 20 +++++++++++++++
 styles/global.css                    |  5 ++++
 5 files changed, 60 insertions(+), 25 deletions(-)
 create mode 100644 pages/tags/[tag].vue

diff --git a/components/main/MainContent.vue b/components/main/MainContent.vue
index ea009277..b30d991a 100644
--- a/components/main/MainContent.vue
+++ b/components/main/MainContent.vue
@@ -1,13 +1,17 @@
 <template>
-  <div flex flex-col>
-    <div flex justify-between>
-      <div p3 flex gap-1>
-        <slot name="title" />
-      </div>
-      <div p3 flex>
-        <slot name="actions" />
+  <div relative>
+    <div sticky top-0 bg="#222" z10>
+      <div flex justify-between>
+        <div p3 flex gap-1>
+          <slot name="title" />
+        </div>
+        <div p3 flex>
+          <slot name="actions" />
+        </div>
       </div>
     </div>
-    <slot />
+    <div>
+      <slot />
+    </div>
   </div>
 </template>
diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue
index 9181a35b..e3105332 100644
--- a/components/publish/PublishWidget.vue
+++ b/components/publish/PublishWidget.vue
@@ -17,7 +17,7 @@ async function publish() {
 </script>
 
 <template>
-  <div flex flex-col gap-4 :class="isSending ? ' pointer-events-none' : ''">
+  <div xl:w-70 flex flex-col gap-4 :class="isSending ? ' pointer-events-none' : ''">
     <textarea
       v-model="draftPost"
       placeholder="What's on your mind?"
diff --git a/layouts/default.vue b/layouts/default.vue
index b37c585e..f8fe3609 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,21 +1,27 @@
 <template>
-  <div h-full of-hidden>
-    <main grid="~ lg:cols-[1fr_40rem_1fr]" max-w-80rem mxa h-full>
-      <div>
-        <slot name="left">
-          <AccountMe />
-        </slot>
+  <div h-full>
+    <main flex w-full mxa h-full lg:max-w-80rem>
+      <div class="w-1/4" hidden lg:flex flex-col items-end>
+        <div fixed>
+          <slot name="left">
+            <AccountMe />
+          </slot>
+        </div>
       </div>
-      <div h-full of-auto border="l r border">
-        <slot />
-      </div>
-      <div flex="~ col">
-        <slot name="right">
-          <NavTitle p5 />
-          <NavSide border="y border" py8 />
-          <div flex-auto />
-          <NavFooter />
-        </slot>
+      <div class="lg:w-3/4" flex>
+        <div h-full border="l r border" class="w-full md:w-2/3">
+          <slot />
+        </div>
+        <div hidden md:flex="~ col" class="w-1/3">
+          <div fixed>
+            <slot name="right">
+              <NavTitle p5 />
+              <NavSide border="y border" py8 />
+              <div flex-auto />
+              <NavFooter />
+            </slot>
+          </div>
+        </div>
       </div>
     </main>
   </div>
diff --git a/pages/tags/[tag].vue b/pages/tags/[tag].vue
new file mode 100644
index 00000000..dc662249
--- /dev/null
+++ b/pages/tags/[tag].vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const params = useRoute().params
+const tag = $computed(() => params.tag as string)
+const masto = await useMasto()
+const paginator = masto.timelines.getHashtagIterable(tag)
+</script>
+
+<template>
+  <MainContent>
+    <template #title>
+      <div i-ri:hashtag h-6 mr-1 /><span>{{ tag }}</span>
+    </template>
+    <template #actions>
+      <div color-gray i-ri:equalizer-fill mr-1 h-6 />
+    </template>
+    <slot>
+      <TimelinePaginator :paginator="paginator" />
+    </slot>
+  </MainContent>
+</template>
diff --git a/styles/global.css b/styles/global.css
index 949a7f04..1340185f 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -23,3 +23,8 @@
 ::-webkit-scrollbar-thumb:hover {
   background: #666;
 }
+
+/* Force vertical scrollbar to be always visible to avoid layout shift while loading the content */
+html {
+  overflow-y: scroll;
+}
\ No newline at end of file