fix post buttons/actions overlapping

made it into the title instead of absolute positioning
tnfshcec · Nov 5, 2023 · 27fe4bf · 27fe4bf
1 parent c3218ae
commit 27fe4bf
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 26 deletions.
diff --git a/src/lib/components/PageTitle.svelte b/src/lib/components/PageTitle.svelte
@@ -32,7 +32,10 @@
       </span>
     {/each}
   </span>
-  <h1 class="text-3xl font-bold">{title}</h1>
+  <div class="flex items-center justify-between">
+    <h1 class="text-3xl font-bold">{title}</h1>
+    <slot name="title" />
+  </div>
 
   <slot />
 </header>
diff --git a/src/lib/components/actions.ts b/src/lib/components/actions.ts
@@ -1,5 +1,7 @@
 import type { Action } from "svelte/action";
 
+// TODO: smooth scroll with <a />
+
 export const withIcon: Action = (node) => {
   // NOTE: may need tailwind-merge
   node.classList.add("flex", "items-center", "gap-2");

diff --git a/src/routes/post/[...post]/+page.svelte b/src/routes/post/[...post]/+page.svelte
@@ -69,21 +69,21 @@
           {localeDate}
         </span>
       </div>
-    </PageTitle>
 
-    <div class="absolute right-4 top-10 flex gap-2">
-      <button class="btn-text flex items-center gap-2 md:hidden" use:melt={$trigger}>
-        <!-- NOTE: cannot use withIcon because of melt -->
-        <List class="h-4 w-4" />
-        <span>Contents</span>
-      </button>
-      {#if data.session?.user?.role === "admin"}
-        <a class="btn-accent" href="{base}/post/{url}/edit" use:withIcon>
-          <Pencil class="h-4 w-4" />
-          <span>Edit</span>
-        </a>
-      {/if}
-    </div>
+      <div slot="title" class="flex flex-grow basis-0 flex-wrap justify-end gap-2">
+        <button class="btn-text flex items-center gap-2 md:hidden" use:melt={$trigger}>
+          <!-- NOTE: cannot use withIcon because of melt -->
+          <List class="h-4 w-4" />
+          <span>Contents</span>
+        </button>
+        {#if data.session?.user?.role === "admin"}
+          <a class="btn-accent" href="{base}/post/{url}/edit" use:withIcon>
+            <Pencil class="h-4 w-4" />
+            <span>Edit</span>
+          </a>
+        {/if}
+      </div>
+    </PageTitle>
 
     <div use:melt={$portalled}>
       {#if $open}

diff --git a/src/routes/post/[...post]/edit/+page.svelte b/src/routes/post/[...post]/edit/+page.svelte
@@ -82,18 +82,18 @@
           {localeDate}
         </span>
       </div>
-    </PageTitle>
 
-    <div class="absolute right-4 top-10 flex gap-2">
-      <button class="btn-accent" use:withIcon on:click={savePost}>
-        <Save class="h-4 w-4" />
-        Save
-      </button>
-      <button class="btn-text" use:withIcon on:click={deletePost}>
-        <Alert class="h-4 w-4" />
-        Delete
-      </button>
-    </div>
+      <div slot="title" class="flex flex-grow basis-0 flex-wrap justify-end gap-2">
+        <button class="btn-accent" use:withIcon on:click={savePost}>
+          <Save class="h-4 w-4" />
+          Save
+        </button>
+        <button class="btn-text" use:withIcon on:click={deletePost}>
+          <Alert class="h-4 w-4" />
+          Delete
+        </button>
+      </div>
+    </PageTitle>
 
     <div use:melt={$portalled}>
       {#if $open}