From 22357e15b5e5c155972ac1339104737ae990140f Mon Sep 17 00:00:00 2001
From: Xyphyn <james@xylight.dev>
Date: Fri, 22 Sep 2023 16:29:57 -0700
Subject: [PATCH] Revert "feat: switch to grid layout"

This reverts commit 969abeec9d6b06d0cf239770ce2aa703611dd46e.
---
 package.json                                 |  2 +-
 src/lib/components/ui/Gradient.svelte        | 28 -------------
 src/lib/components/ui/Navbar.svelte          |  6 +--
 src/lib/components/ui/StickyCard.svelte      |  2 +-
 src/lib/components/ui/sidebar/Sidebar.svelte | 30 +++-----------
 src/lib/settings.ts                          |  2 -
 src/routes/+layout.svelte                    | 43 +++++---------------
 src/routes/+page.svelte                      |  2 +-
 src/routes/admin/+layout.svelte              |  2 +-
 src/routes/profile/+layout.svelte            |  2 +-
 src/routes/settings/+page.svelte             |  7 ----
 src/style/app.css                            |  2 +-
 12 files changed, 24 insertions(+), 104 deletions(-)
 delete mode 100644 src/lib/components/ui/Gradient.svelte

diff --git a/package.json b/package.json
index b9ba74a9..9ffefe6f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "photon-lemmy",
-  "version": "1.10.0",
+  "version": "1.9.4",
   "private": true,
   "scripts": {
     "dev": "vite dev",
diff --git a/src/lib/components/ui/Gradient.svelte b/src/lib/components/ui/Gradient.svelte
deleted file mode 100644
index 4893c383..00000000
--- a/src/lib/components/ui/Gradient.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<div
-  class="fixed opacity-30 isolate inset-x-0 transform-gpu overflow-hidden
-   blur-3xl -top-80 pointer-events-none"
->
-  <svg
-    class="relative left-[calc(50%-11rem)] -z-10 h-[21.1875rem] max-w-none -translate-x-1/2 rotate-[30deg] sm:left-[calc(50%-30rem)] sm:h-[42.375rem]"
-    viewBox="0 0 1155 678"
-  >
-    <path
-      fill="url(#45de2b6b-92d5-4d68-a6a0-9b9b2abad533)"
-      fill-opacity=".3"
-      d="M317.219 518.975L203.852 678 0 438.341l317.219 80.634 204.172-286.402c1.307 132.337 45.083 346.658 209.733 145.248C936.936 126.058 882.053-94.234 1031.02 41.331c119.18 108.451 130.68 295.337 121.53 375.223L855 299l21.173 362.054-558.954-142.079z"
-    />
-    <defs>
-      <linearGradient
-        id="45de2b6b-92d5-4d68-a6a0-9b9b2abad533"
-        x1="1155.49"
-        x2="-78.208"
-        y1=".177"
-        y2="474.645"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stop-color="#9089FC" />
-        <stop offset="1" stop-color="#FF80B5" />
-      </linearGradient>
-    </defs>
-  </svg>
-</div>
diff --git a/src/lib/components/ui/Navbar.svelte b/src/lib/components/ui/Navbar.svelte
index 34146362..7e2c3387 100644
--- a/src/lib/components/ui/Navbar.svelte
+++ b/src/lib/components/ui/Navbar.svelte
@@ -43,10 +43,8 @@
 </script>
 
 <nav
-  class="flex flex-row gap-2 items-center sticky top-0 bg-slate-50
-  dark:bg-black backdrop-blur-3xl w-full mx-auto px-4 py-2 z-10 box-border h-16
-  {$$props.class}"
-  style="grid-area: a;"
+  class="flex flex-row gap-2 items-center sticky top-0 bg-slate-50/80
+  dark:bg-black/80 backdrop-blur-3xl w-full mx-auto px-4 py-2 z-50 box-border h-16"
 >
   <div class="flex flex-row gap-2 items-center mr-auto">
     <a href="/" class="flex flex-row items-center gap-2 logo group">
diff --git a/src/lib/components/ui/StickyCard.svelte b/src/lib/components/ui/StickyCard.svelte
index 6c551ef7..1cf21d15 100644
--- a/src/lib/components/ui/StickyCard.svelte
+++ b/src/lib/components/ui/StickyCard.svelte
@@ -1,5 +1,5 @@
 <aside
-  class="sticky break-words flex h-full
+  class="sticky top-16 break-words flex
     flex-col gap-4 p-6 max-w-full 2xl:w-96 w-80 max-h-[calc(100svh-4rem)]
     overflow-auto text-sm border-slate-200 dark:border-zinc-800 {$$props.class}"
 >
diff --git a/src/lib/components/ui/sidebar/Sidebar.svelte b/src/lib/components/ui/sidebar/Sidebar.svelte
index 0f6736e9..f55b4f58 100644
--- a/src/lib/components/ui/sidebar/Sidebar.svelte
+++ b/src/lib/components/ui/sidebar/Sidebar.svelte
@@ -3,11 +3,9 @@
     ArrowLeftOnRectangle,
     ChevronDoubleLeft,
     Cog6Tooth,
-    ComputerDesktop,
     GlobeAlt,
     Home,
     Icon,
-    ServerStack,
     UserGroup,
   } from 'svelte-hero-icons'
   import { profile, profileData } from '$lib/auth.js'
@@ -18,16 +16,14 @@
   import { flip } from 'svelte/animate'
   import { expoOut } from 'svelte/easing'
   import { Button } from 'mono-svelte'
-  import { site } from '$lib/lemmy.js'
 </script>
 
-<aside
-  class="hidden sm:flex flex-col pl-4 pr-4 py-4 overflow-auto top-16 bottom-0
+<nav
+  class="hidden sm:flex flex-col pl-4 pr-4 py-4 overflow-auto sticky top-16 bottom-0
   gap-1 max-h-[calc(100svh-4rem)] w-full bg-slate-50 dark:bg-black
   {$userSettings.expandSidebar
-    ? 'max-w-[35vw] w-[25vw] resize-x min-w-[12rem]'
-    : 'w-max max-w-max min-w-max'} {$$props.class}"
-  style="grid-area: b;"
+    ? 'max-w-[25%] resize-x min-w-[12rem]'
+    : 'w-max max-w-max min-w-max'}"
 >
   <Button
     on:click={() =>
@@ -94,20 +90,4 @@
       <span class:hidden={!$userSettings.expandSidebar}>Log in</span>
     </Button>
   {/if}
-  {#if $userSettings.expandSidebar}
-    <div
-      class="mt-4 text-slate-600 dark:text-zinc-400 text-sm flex flex-row
-    items-center gap-4 flex-wrap"
-    >
-      <span class="flex gap-1 items-center" title="Lemmy version">
-        <Icon src={ServerStack} size="16" mini />
-        {$site?.version}
-      </span>
-      <!-- svelte-ignore missing-declaration -->
-      <span class="flex gap-1 items-center" title="Photon version">
-        <Icon src={ComputerDesktop} size="16" mini />
-        {__VERSION__}
-      </span>
-    </div>
-  {/if}
-</aside>
+</nav>
diff --git a/src/lib/settings.ts b/src/lib/settings.ts
index 77aba0bb..1fc4ef64 100644
--- a/src/lib/settings.ts
+++ b/src/lib/settings.ts
@@ -61,7 +61,6 @@ interface Settings {
   font: 'inter' | 'system' | 'browser'
   leftAlign: boolean
   hidePhoton: boolean
-  glow: boolean
 }
 
 export const defaultSettings: Settings = {
@@ -102,7 +101,6 @@ export const defaultSettings: Settings = {
   font: 'system',
   leftAlign: false,
   hidePhoton: toBool(env.PUBLIC_REMOVE_CREDIT) ?? false,
-  glow: true
 }
 
 export const userSettings = writable(defaultSettings)
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 0fb30650..2e7911c6 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -13,7 +13,6 @@
   import { ToastContainer } from 'mono-svelte'
   import { onMount } from 'svelte'
   import { browser } from '$app/environment'
-  import Gradient from '$lib/components/ui/Gradient.svelte'
 
   nProgress.configure({
     minimum: 0.4,
@@ -56,7 +55,8 @@
 </svelte:head>
 
 <div
-  class="main-container min-h-screen
+  class="flex flex-col min-h-screen
+  font-inter
   {$userSettings.font == 'inter'
     ? 'font-inter'
     : $userSettings.font == 'system'
@@ -64,37 +64,16 @@
     : 'font-sans'}
   "
 >
-  {#if $userSettings.glow}
-    <Gradient />
-  {/if}
   <Navbar />
-  <Sidebar class="z-0 w-full min-w-0 sticky" />
   <ToastContainer />
   <Moderation />
-  <main
-    style="grid-area: c;"
-    class="p-3 sm:p-6 sm:rounded-l-lg max-w-full min-w-0
-      border-slate-200 dark:border-zinc-900 sm:border-l border-t bg-slate-25 dark:bg-zinc-950
-      h-full place-self-stretch"
-  >
-    <slot />
-  </main>
+  <div class="flex flex-row h-full w-full max-w-full flex-1">
+    <Sidebar />
+    <main
+      class="p-3 sm:p-6 min-w-0 w-full flex-[3] sm:rounded-tl-lg
+      border-slate-200 dark:border-zinc-900 sm:border-l border-t bg-slate-25 dark:bg-zinc-950"
+    >
+      <slot />
+    </main>
+  </div>
 </div>
-
-<style>
-  .main-container {
-    display: grid;
-    grid-template-columns: minmax(min-content, auto) 3fr;
-    grid-template-areas:
-      'a a'
-      'b c';
-    place-items: start;
-  }
-
-  @media (min-width: 640px) {
-    .main-container {
-      grid-template-columns: minmax(auto-fit, 1fr) 1fr;
-      grid-template-rows: max-content;
-    }
-  }
-</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index d29b91b4..e05f3a89 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -34,7 +34,7 @@
   </div>
 </Modal>
 
-<div class="flex flex-row gap-4 w-full">
+<div class="flex flex-row gap-4 w-full h-full">
   <div class="flex flex-col gap-4 max-w-full w-full min-w-0">
     <header>
       <h1
diff --git a/src/routes/admin/+layout.svelte b/src/routes/admin/+layout.svelte
index f273b191..4a1dbba3 100644
--- a/src/routes/admin/+layout.svelte
+++ b/src/routes/admin/+layout.svelte
@@ -4,7 +4,7 @@
   import MultiSelect from '$lib/components/input/Switch.svelte'
 </script>
 
-<div class="flex flex-col gap-4">
+<div class="flex flex-col gap-4 h-full">
   <MultiSelect
     headless
     options={[
diff --git a/src/routes/profile/+layout.svelte b/src/routes/profile/+layout.svelte
index bba8cbc2..afdf8033 100644
--- a/src/routes/profile/+layout.svelte
+++ b/src/routes/profile/+layout.svelte
@@ -9,7 +9,7 @@
   <title>Profile</title>
 </svelte:head>
 
-<div class="flex flex-col gap-4">
+<div class="flex flex-col gap-4 h-full">
   <MultiSelect
     headless
     options={['/profile/user', '/profile/settings', '/profile/blocks']}
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index d8f6897d..300c6351 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -170,13 +170,6 @@
       bind:selected={$userSettings.leftAlign}
     />
   </Setting>
-  <Setting>
-    <span slot="title">Glow</span>
-    <p slot="description">Show a nice little glow in the top left corner.</p>
-    <Checkbox bind:checked={$userSettings.glow}>
-      {$userSettings.glow ? 'Enabled' : 'Disabled'}
-    </Checkbox>
-  </Setting>
   {#if LINKED_INSTANCE_URL}
     <Setting>
       <span slot="title">
diff --git a/src/style/app.css b/src/style/app.css
index 72bc0c83..c3fb20b6 100644
--- a/src/style/app.css
+++ b/src/style/app.css
@@ -25,7 +25,7 @@
 }
 
 body {
-  @apply bg-slate-50 text-slate-900 dark:bg-zinc-950 dark:text-zinc-100 accent-slate-950 dark:accent-zinc-50;
+  @apply bg-slate-100 text-slate-900 dark:bg-zinc-950 dark:text-zinc-100 accent-slate-950 dark:accent-zinc-50;
 }
 
 .dark {