silberengel
/
gc-alexandria
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Less details in cards, hide ToC for content only view, dark mode color shift

master
Nuša Pukšič 10 months ago
parent
718fd4617b
commit
293e438498
5 changed files with 70 additions and 50 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/app.css
  2. 7
      src/lib/components/Publication.svelte
  3. 23
      src/lib/components/util/ArticleNav.svelte
  4. 76
      src/lib/components/util/Details.svelte
  5. 10
      tailwind.config.cjs

4
src/app.css
Unescape View File

@ -160,11 +160,11 @@
} }
aside.sidebar-leather > div { aside.sidebar-leather > div {
@apply bg-primary-50 dark:bg-primary-900 h-full px-5 py-0; @apply bg-primary-50 dark:bg-gray-800 h-full px-5 py-0;
} }
a.sidebar-item-leather { a.sidebar-item-leather {
@apply hover:bg-primary-100 dark:hover:bg-primary-800; @apply hover:bg-primary-100 dark:hover:bg-gray-800;
} }
div.skeleton-leather div { div.skeleton-leather div {

7
src/lib/components/Publication.svelte
Unescape View File

@ -84,6 +84,7 @@
// region Columns visibility // region Columns visibility
let currentBlog: null|string = $state(null); let currentBlog: null|string = $state(null);
let currentBlogEvent: null|NDKEvent = $state(null); let currentBlogEvent: null|NDKEvent = $state(null);
const isLeaf = $derived(indexEvent.kind === 30041);
function isInnerActive() { function isInnerActive() {
return currentBlog !== null && $publicationColumnVisibility.inner; return currentBlog !== null && $publicationColumnVisibility.inner;
@ -122,7 +123,7 @@
onMount(() => { onMount(() => {
// Set current columns depending on the publication type // Set current columns depending on the publication type
const isBlog = publicationType === 'blog'; const isBlog = publicationType === 'blog';
publicationColumnVisibility.update(v => ({ ...v, main: !isBlog, blog: isBlog })); publicationColumnVisibility.update(v => ({ ...v, main: !isBlog, blog: isBlog, toc: !(isLeaf || isBlog) }));
// Set up the intersection observer. // Set up the intersection observer.
observer = new IntersectionObserver((entries) => { observer = new IntersectionObserver((entries) => {
@ -142,7 +143,7 @@
</script> </script>
<!-- Table of contents --> <!-- Table of contents -->
{#if publicationType !== 'blog'} {#if publicationType !== 'blog' || !isLeaf}
<TocToggle rootId={rootAddress} /> <TocToggle rootId={rootAddress} />
{/if} {/if}
@ -233,7 +234,7 @@
<SidebarGroup class='sidebar-group-leather'> <SidebarGroup class='sidebar-group-leather'>
<div class="flex justify-between items-baseline"> <div class="flex justify-between items-baseline">
<Heading tag="h1" class="h-leather !text-lg">Discussion</Heading> <Heading tag="h1" class="h-leather !text-lg">Discussion</Heading>
<Button class="btn-leather hidden sm:flex z-30 !p-1 bg-primary-50 dark:bg-primary-900" outline onclick={closeDiscussion}> <Button class="btn-leather hidden sm:flex z-30 !p-1 bg-primary-50 dark:bg-gray-800" outline onclick={closeDiscussion}>
<CloseOutline /> <CloseOutline />
</Button> </Button>
</div> </div>

23
src/lib/components/util/ArticleNav.svelte
Unescape View File

@ -19,6 +19,7 @@
let title: string = $derived(indexEvent.getMatchingTags('title')[0]?.[1]); let title: string = $derived(indexEvent.getMatchingTags('title')[0]?.[1]);
let author: string = $derived(indexEvent.getMatchingTags('author')[0]?.[1] ?? 'unknown'); let author: string = $derived(indexEvent.getMatchingTags('author')[0]?.[1] ?? 'unknown');
let pubkey: string = $derived(indexEvent.getMatchingTags('p')[0]?.[1] ?? null); let pubkey: string = $derived(indexEvent.getMatchingTags('p')[0]?.[1] ?? null);
let isLeaf: boolean = $derived(indexEvent.kind === 30041);
let lastScrollY = $state(0); let lastScrollY = $state(0);
let isVisible = $state(true); let isVisible = $state(true);
@ -116,23 +117,23 @@
<CaretLeftOutline class="!fill-none inline mr-1" /><span class="hidden sm:inline">Back</span> <CaretLeftOutline class="!fill-none inline mr-1" /><span class="hidden sm:inline">Back</span>
</Button> </Button>
{/if} {/if}
{#if publicationType === 'blog'} {#if !isLeaf}
<Button class="btn-leather hidden sm:flex !w-auto {$publicationColumnVisibility.blog ? 'active' : ''}" {#if publicationType === 'blog'}
outline={true} onclick={() => toggleColumn('blog')} > <Button class="btn-leather hidden sm:flex !w-auto {$publicationColumnVisibility.blog ? 'active' : ''}"
<BookOutline class="!fill-none inline mr-1" /><span class="hidden sm:inline">Table of Contents</span> outline={true} onclick={() => toggleColumn('blog')} >
</Button> <BookOutline class="!fill-none inline mr-1" /><span class="hidden sm:inline">Table of Contents</span>
{:else} </Button>
{#if !$publicationColumnVisibility.discussion && !$publicationColumnVisibility.toc} {:else if !$publicationColumnVisibility.discussion && !$publicationColumnVisibility.toc}
<Button class='btn-leather !w-auto' outline={true} onclick={() => toggleColumn('toc')}> <Button class='btn-leather !w-auto' outline={true} onclick={() => toggleColumn('toc')}>
<BookOutline class="!fill-none inline mr-1" /><span class="hidden sm:inline">Table of Contents</span> <BookOutline class="!fill-none inline mr-1" /><span class="hidden sm:inline">Table of Contents</span>
</Button> </Button>
{/if} {/if}
{/if} {/if}
</div> </div>
<div class="flex flex-grow text justify-center items-center"> <div class="flex flex-grow text justify-center items-center">
<p class="max-w-[60vw] line-ellipsis"><b class="text-nowrap">{title}</b> <span class="whitespace-nowrap">by <InlineProfile pubkey={pubkey} title={author} /></span></p> <p class="max-w-[60vw] line-ellipsis"><b class="text-nowrap">{title}</b> <span class="whitespace-nowrap">by <InlineProfile pubkey={pubkey} title={author} /></span></p>
</div> </div>
<div class="flex justify-end space-x-2 md:min-w-52 min-w-8"> <div class="flex justify-end items-center space-x-2 md:min-w-52 min-w-8">
{#if $publicationColumnVisibility.inner} {#if $publicationColumnVisibility.inner}
<Button class='btn-leather !w-auto hidden sm:flex' outline={true} onclick={backToBlog}> <Button class='btn-leather !w-auto hidden sm:flex' outline={true} onclick={backToBlog}>
<CloseOutline class="!fill-none inline mr-1" /><span class="hidden sm:inline">Close</span> <CloseOutline class="!fill-none inline mr-1" /><span class="hidden sm:inline">Close</span>

76
src/lib/components/util/Details.svelte
Unescape View File

@ -2,7 +2,11 @@
import InlineProfile from "$components/util/InlineProfile.svelte"; import InlineProfile from "$components/util/InlineProfile.svelte";
import CardActions from "$components/util/CardActions.svelte"; import CardActions from "$components/util/CardActions.svelte";
import Interactions from "$components/util/Interactions.svelte"; import Interactions from "$components/util/Interactions.svelte";
import { P } from "flowbite-svelte";
// isModal
// - don't show interactions in modal view
// - don't show all the details when _not_ in modal view
let { event, isModal = false } = $props(); let { event, isModal = false } = $props();
let title: string = $derived(event.getMatchingTags('title')[0]?.[1]); let title: string = $derived(event.getMatchingTags('title')[0]?.[1]);
@ -18,18 +22,26 @@
let identifier: string = $derived(event.getMatchingTags('i')[0]?.[1] ?? null); let identifier: string = $derived(event.getMatchingTags('i')[0]?.[1] ?? null);
let hashtags: [] = $derived(event.getMatchingTags('t') ?? []); let hashtags: [] = $derived(event.getMatchingTags('t') ?? []);
let rootId: string = $derived(event.getMatchingTags('d')[0]?.[1] ?? null); let rootId: string = $derived(event.getMatchingTags('d')[0]?.[1] ?? null);
let kind = $derived(event.kind);
</script> </script>
<div class="flex flex-row relative"> <div class="flex flex-col relative mb-2">
{#if !isModal}
<div class="flex flex-row justify-between items-center">
<P class='text-base font-normal'><InlineProfile pubkey={event.pubkey} /></P>
<CardActions event={event}></CardActions>
</div>
{/if}
<div class="flex-grow grid grid-cols-1 md:grid-cols-[auto_1fr] gap-4 items-center"> <div class="flex-grow grid grid-cols-1 md:grid-cols-[auto_1fr] gap-4 items-center">
{#if image} {#if image}
<div> <div class="my-2">
<img class="w-full md:max-w-48 object-contain rounded" alt={title} src={image} /> <img class="w-full md:max-w-48 object-contain rounded" alt={title} src={image} />
</div> </div>
{/if} {/if}
<div class="space-y-4 {!image && !isModal ? 'mt-8' : ''}"> <div class="space-y-4 my-4">
<h1 class="text-3xl font-bold">{title}</h1> <h1 class="text-3xl font-bold">{title}</h1>
<h2 class="text-base font-bold"> <h2 class="text-base font-bold">
by by
@ -39,14 +51,11 @@
{author} {author}
{/if} {/if}
</h2> </h2>
<h4 class="text-base font-thin">Version: {version}</h4> {#if version !== '1' }
<h4 class="text-base font-thin">Version: {version}</h4>
{/if}
</div> </div>
</div> </div>
{#if !isModal}
<div class="absolute right-0 sm:relative sm:flex sm:flex-col space-y-4">
<CardActions event={event}></CardActions>
</div>
{/if}
</div> </div>
{#if summary} {#if summary}
@ -63,28 +72,37 @@
</div> </div>
{/if} {/if}
<div class="flex flex-row my-4"> {#if isModal}
<h4 class='text-base font-normal mt-2'>Index author: <InlineProfile pubkey={event.pubkey} /></h4> <div class="flex flex-row my-4">
</div> <h4 class='text-base font-normal mt-2'>
{#if kind === 30040}
<span>Index author:</span>
{:else}
<span>Author:</span>
{/if}
<InlineProfile pubkey={event.pubkey} />
</h4>
</div>
<div class="flex flex-col pb-4 space-y-1">
{#if source !== null}
<h5 class="text-sm">Source: <a class="underline break-all" href={source} target="_blank">{source}</a></h5>
{/if}
{#if type !== null}
<h5 class="text-sm">Publication type: {type}</h5>
{/if}
{#if language !== null}
<h5 class="text-sm">Language: {language}</h5>
{/if}
{#if publisher !== null}
<h5 class="text-sm">Published by: {publisher}</h5>
{/if}
{#if identifier !== null}
<h5 class="text-sm">{identifier}</h5>
{/if}
</div> <div class="flex flex-col pb-4 space-y-1">
{#if source !== null}
<h5 class="text-sm">Source: <a class="underline break-all" href={source} target="_blank">{source}</a></h5>
{/if}
{#if type !== null}
<h5 class="text-sm">Publication type: {type}</h5>
{/if}
{#if language !== null}
<h5 class="text-sm">Language: {language}</h5>
{/if}
{#if publisher !== null}
<h5 class="text-sm">Published by: {publisher}</h5>
{/if}
{#if identifier !== null}
<h5 class="text-sm">{identifier}</h5>
{/if}
</div>
{/if}
{#if !isModal} {#if !isModal}
<Interactions event={event} rootId={rootId} direction="row"/> <Interactions event={event} rootId={rootId} direction="row"/>

10
tailwind.config.cjs
Unescape View File

@ -22,11 +22,11 @@ const config = {
400: '#ad8351', 400: '#ad8351',
500: '#c6a885', 500: '#c6a885',
600: '#795c39', 600: '#795c39',
700: '#574229', 700: '#564a3e',
800: '#342718', 800: '#3c352c',
900: '#231a10', 900: '#2a241c',
950: '#17110A', 950: '#1d1812',
1000: '#110d08', 1000: '#15110d',
}, },
success: { success: {
50: '#e3f2e7', 50: '#e3f2e7',

Write Preview
Loading…
Cancel
Save