From 82f0d20e23969c53abfeb4924da586c84aa35da5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nu=C5=A1a=20Puk=C5=A1i=C4=8D?= Date: Wed, 7 May 2025 14:59:25 +0200 Subject: [PATCH] Refactored visibility store, changed styles yet again... --- src/app.css | 7 +- src/lib/components/Publication.svelte | 200 ++++++++++---------- src/lib/components/util/ArticleNav.svelte | 111 ++++++----- src/lib/components/util/Interactions.svelte | 17 +- src/lib/components/util/TocToggle.svelte | 51 ++--- src/lib/stores.ts | 20 +- 6 files changed, 219 insertions(+), 187 deletions(-) diff --git a/src/app.css b/src/app.css index ae4ac69..6d7d06e 100644 --- a/src/app.css +++ b/src/app.css @@ -159,8 +159,13 @@ } /* Sidebar */ + aside.sidebar-leather { + @apply fixed md:sticky top-[130px] sm:top-[146px] h-[calc(100vh-130px)] sm:h-[calc(100vh-146px)] z-10; + @apply bg-primary-0 dark:bg-primary-1000 px-5 w-full sm:w-auto sm:max-w-xl; + } + aside.sidebar-leather > div { - @apply bg-gray-100 dark:bg-gray-900; + @apply bg-primary-50 dark:bg-primary-900 h-full px-5 py-0; } a.sidebar-item-leather { diff --git a/src/lib/components/Publication.svelte b/src/lib/components/Publication.svelte index 0b2b418..991d3bd 100644 --- a/src/lib/components/Publication.svelte +++ b/src/lib/components/Publication.svelte @@ -7,9 +7,9 @@ SidebarWrapper, Skeleton, TextPlaceholder, - Tooltip + Tooltip, Heading } from "flowbite-svelte"; - import { HeartOutline } from 'flowbite-svelte-icons'; + import { CloseOutline } from 'flowbite-svelte-icons'; import { getContext, onDestroy, onMount } from "svelte"; import type { NDKEvent } from "@nostr-dev-kit/ndk"; import PublicationSection from "./PublicationSection.svelte"; @@ -18,7 +18,7 @@ import { publicationColumnVisibility } from "$lib/stores"; import BlogHeader from "$components/blog/BlogHeader.svelte"; import Interactions from "$components/util/Interactions.svelte"; - import ZapOutline from "$components/util/ZapOutline.svelte"; + import TocToggle from "$components/util/TocToggle.svelte"; let { rootAddress, publicationType, indexEvent } = $props<{ rootAddress: string, @@ -70,42 +70,49 @@ // #endregion + // region Columns visibility let currentBlog: null|string = $state(null); let currentBlogEvent: null|NDKEvent = $state(null); - function isDefaultVisible() { - if (publicationType !== 'blog') { - return true; - } else { - return $publicationColumnVisibility.blog; - } - } - function isInnerActive() { return currentBlog !== null && $publicationColumnVisibility.inner; } - function isSocialActive() { - return $publicationColumnVisibility.discussion; + function closeDiscussion() { + publicationColumnVisibility.update(v => ({ ...v, discussion: false})); } function loadBlog(rootId: string) { - // depending on the size of the screen, also toggle blog list & social visibility - if (window.innerWidth < 1024) { - $publicationColumnVisibility.blog = false; - $publicationColumnVisibility.discussion = false; - } - $publicationColumnVisibility.inner = true; + // depending on the size of the screen, also toggle blog list & discussion visibility + publicationColumnVisibility.update(current => { + const updated = current; + if (window.innerWidth < 1024) { + updated.blog = false; + updated.discussion = false; + } + updated.inner = true; + return updated; + }); + currentBlog = rootId; // set current blog values for publication render currentBlogEvent = leaves.find(i => i.tagAddress() === currentBlog) ?? null; } - function showBlogHeaderOnMobile() { + function showBlogHeader() { return (currentBlog && currentBlogEvent && window.innerWidth < 1140); } + onDestroy(() => { + // reset visibility + publicationColumnVisibility.reset(); + }) + onMount(() => { + // Set current columns depending on the publication type + const isBlog = publicationType === 'blog'; + publicationColumnVisibility.update(v => ({ ...v, main: !isBlog, blog: isBlog })); + // Set up the intersection observer. observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { @@ -121,50 +128,48 @@ }; }); - onDestroy(() => { - // reset visibility - $publicationColumnVisibility = { - toc: false, - blog: true, - main: true, - inner: true, - discussion: false, - editing: false - }; - }) - -{#if isDefaultVisible()} -
+ +{#if publicationType !== 'blog'} + +{/if} + + +{#if $publicationColumnVisibility.main} +
+ + {#each leaves as leaf, i} + setLastElementRef(el, i)} + /> + {/each} +
+{/if} - {#if publicationType === 'blog'} - - {#each leaves as leaf, i} - - {/each} - {:else} - {#each leaves as leaf, i} - setLastElementRef(el, i)} - /> - {/each} - {/if} - + +{#if $publicationColumnVisibility.blog} +
+
+
+
+ + {#each leaves as leaf, i} + + {/each}
{/if} @@ -193,47 +198,42 @@ {/key} {/if} -{#if isSocialActive() } -
- {#if showBlogHeaderOnMobile()} - - - {/if} -
- -
- Unknown - 1.1.1970 +{#if $publicationColumnVisibility.discussion } + + + +
+ Discussion + +
+
+ + {#if showBlogHeader()} + + {/if} +
+ +
+ Unknown + 1.1.1970 +
+
+ This is a very intelligent comment placeholder that applies to all the content equally well. +
+
-
- This is a very intelligent comment placeholder that applies to all the content equally well. -
- - - -
- Unknown - 1.1.1970 -
-
- -
- - - -
- Unknown - 1.1.1970 -
-
- -
- -
-
+
+ + + {/if} diff --git a/src/lib/components/util/ArticleNav.svelte b/src/lib/components/util/ArticleNav.svelte index d220f50..537b46f 100644 --- a/src/lib/components/util/ArticleNav.svelte +++ b/src/lib/components/util/ArticleNav.svelte @@ -1,6 +1,5 @@ -