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

Publications, part 2

master
Nuša Pukšič 6 months ago committed by buttercat1791
parent
9425026b52
commit
9ea6e8b3e8
3 changed files with 136 additions and 148 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 280
      src/lib/components/publications/Publication.svelte
  2. 2
      src/lib/stores.ts
  3. 2
      src/routes/publication/[type]/[identifier]/+page.svelte

280
src/lib/components/publications/Publication.svelte
Unescape View File

@ -251,17 +251,19 @@ @@ -251,17 +251,19 @@
// #endregion
</script>
<!-- Table of contents -->
{#if publicationType !== "blog" && !isLeaf}
<!-- Add gap & items-start so sticky sidebars size correctly -->
<div class="grid grid-cols-[1fr_3fr_1fr] gap-4 items-start">
<!-- Table of contents -->
{#if publicationType !== "blog" && !isLeaf}
<Sidebar
isOpen={isTocOpen}
closeSidebar={closeTocSidebar}
class="z-50 max-h-[calc(100vh-170px)] ml-4 bg-transparent"
/* Make sidebar sticky & independently scrollable */
class="z-10 ml-4 bg-transparent sticky top-24 max-h-[calc(100vh-6rem)] overflow-y-auto
border border-s-4 rounded border-primary-200 dark:border-primary-800
bg-primary-50 dark:bg-primary-1000"
position="static"
backdrop={false}
activeUrl={`#${activeAddress ?? ""}`}
classes={{
div: 'bg-primary-50 dark:bg-primary-1000 border border-s-4 rounded border-primary-200 dark:border-primary-800',
div: 'bg-transparent', /* inner wrapper neutral */
active: 'bg-primary-100 dark:bg-primary-800 p-2 rounded-lg',
nonactive: 'bg-primary-50 dark:bg-primary-800',
}}
@ -274,8 +276,7 @@ @@ -274,8 +276,7 @@
{rootAddress}
{toc}
depth={2}
onSectionFocused={(address: string) =>
publicationTree.setBookmark(address)}
onSectionFocused={(address: string) => publicationTree.setBookmark(address)}
onLoadMore={() => {
if (!isLoading && !isDone && publicationTree) {
loadMore(4);
@ -283,145 +284,134 @@ @@ -283,145 +284,134 @@
}}
/>
</Sidebar>
{/if}
<!-- Default publications -->
{#if $publicationColumnVisibility.main}
<div class="flex flex-col p-4 space-y-4 overflow-auto max-w-2xl flex-grow-2">
<div
class="card-leather bg-highlight dark:bg-primary-800 p-4 mb-4 rounded-lg border"
>
<Details event={indexEvent} />
</div>
<!-- Publication sections/cards -->
{#each leaves as leaf, i}
{#if leaf == null}
<Alert class="flex space-x-2">
<ExclamationCircleOutline class="w-5 h-5" />
Error loading content. One or more events could not be loaded.
</Alert>
{:else}
{@const address = leaf.tagAddress()}
<PublicationSection
{rootAddress}
{leaves}
{address}
{publicationTree}
{toc}
ref={(el) => onPublicationSectionMounted(el, address)}
/>
{/if}
{/each}
<div class="flex justify-center my-4">
{#if isLoading}
<Button disabled color="primary">Loading...</Button>
{:else if !isDone}
<Button color="primary" onclick={() => loadMore(1)}>Show More</Button>
{:else}
<p class="text-gray-500 dark:text-gray-400">
You've reached the end of the publication.
</p>
{/if}
</div>
</div>
{/if}
<!-- Blog list -->
{#if $publicationColumnVisibility.blog}
<div
class={`flex flex-col p-4 space-y-4 overflow-auto max-w-xl flex-grow-1 ${isInnerActive() ? "discreet" : ""}`}
>
<div
class="card-leather bg-highlight dark:bg-primary-800 p-4 mb-4 rounded-lg border"
>
<Details event={indexEvent} />
</div>
<!-- List blog excerpts -->
{#each leaves as leaf, i}
{#if leaf}
<BlogHeader
rootId={leaf.tagAddress()}
event={leaf}
onBlogUpdate={loadBlog}
active={!isInnerActive()}
/>
{/if}
{/each}
</div>
{/if}
{#if isInnerActive()}
{#key currentBlog}
<div
class="flex flex-col p-4 max-w-3xl overflow-auto flex-grow-2 max-h-[calc(100vh-170px)] sticky"
>
{#each leaves as leaf, i}
{#if leaf && leaf.tagAddress() === currentBlog}
<div
class="card-leather bg-highlight dark:bg-primary-800 p-4 mb-4 rounded-lg border"
>
<Details event={leaf} />
</div>
<PublicationSection
{rootAddress}
{leaves}
address={leaf.tagAddress()}
{publicationTree}
{toc}
ref={(el) => setLastElementRef(el, i)}
/>
<Card class="ArticleBox !hidden card-leather min-w-full mt-4">
<Interactions rootId={currentBlog} />
</Card>
{/if}
{/each}
</div>
{/key}
{/if}
{#if $publicationColumnVisibility.discussion}
<Sidebar class="sidebar-leather right-0 md:!pl-8">
<SidebarWrapper>
<SidebarGroup class="sidebar-group-leather">
<div class="flex justify-between items-baseline">
<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-gray-800"
outline
onclick={closeDiscussion}
>
<CloseOutline />
</Button>
{/if}
<div>
<!-- Default publications -->
{#if $publicationColumnVisibility.main}
<!-- Remove overflow-auto so page scroll drives it -->
<div class="flex flex-col p-4 space-y-4 max-w-2xl flex-grow-2">
<div
class="card-leather bg-highlight dark:bg-primary-800 p-4 mb-4 rounded-lg border"
>
<Details event={indexEvent} />
</div>
<!-- Publication sections/cards -->
{#each leaves as leaf, i}
{#if leaf == null}
<Alert class="flex space-x-2">
<ExclamationCircleOutline class="w-5 h-5" />
Error loading content. One or more events could not be loaded.
</Alert>
{:else}
{@const address = leaf.tagAddress()}
<PublicationSection
{rootAddress}
{leaves}
{address}
{publicationTree}
{toc}
ref={(el) => onPublicationSectionMounted(el, address)}
/>
{/if}
{/each}
<div class="flex justify-center my-4">
{#if isLoading}
<Button disabled color="primary">Loading...</Button>
{:else if !isDone}
<Button color="primary" onclick={() => loadMore(1)}>Show More</Button>
{:else}
<p class="text-gray-500 dark:text-gray-400">
You've reached the end of the publication.
</p>
{/if}
</div>
</div>
{/if}
<!-- Blog list -->
{#if $publicationColumnVisibility.blog}
<!-- Remove overflow-auto -->
<div
class={`flex flex-col p-4 space-y-4 max-w-xl flex-grow-1 ${isInnerActive() ? "discreet" : ""}`}
>
<div
class="card-leather bg-highlight dark:bg-primary-800 p-4 mb-4 rounded-lg border"
>
<Details event={indexEvent} />
</div>
<div class="flex flex-col space-y-4">
<!-- TODO
alternative for other publications and
when blog is not opened, but discussion is opened from the list
-->
{#if showBlogHeader() && currentBlog && currentBlogEvent}
<!-- List blog excerpts -->
{#each leaves as leaf, i}
{#if leaf}
<BlogHeader
rootId={currentBlog}
event={currentBlogEvent}
rootId={leaf.tagAddress()}
event={leaf}
onBlogUpdate={loadBlog}
active={true}
active={!isInnerActive()}
/>
{/if}
<div class="flex flex-col w-full space-y-4">
<Card class="ArticleBox card-leather w-full grid max-w-xl">
<div class="flex flex-col my-2">
<span>Unknown</span>
<span class="text-gray-500">1.1.1970</span>
</div>
<div class="flex flex-col flex-grow space-y-4">
This is a very intelligent comment placeholder that applies to
all the content equally well.
</div>
</Card>
</div>
{/each}
</div>
{/if}
{#if isInnerActive()}
{#key currentBlog}
<!-- Remove overflow-auto & sticky; allow page scroll -->
<div class="flex flex-col p-4 max-w-3xl flex-grow-2">
<!-- ...existing code... -->
</div>
</SidebarGroup>
</SidebarWrapper>
</Sidebar>
{/if}
{/key}
{/if}
</div>
{#if $publicationColumnVisibility.discussion}
<!-- Make discussion sidebar sticky & scrollable -->
<Sidebar
position="static"
class="sticky top-24 max-h-[calc(100vh-6rem)] overflow-y-auto bg-primary-50 dark:bg-primary-1000
border border-primary-200 dark:border-primary-800 rounded"
>
<SidebarWrapper>
<SidebarGroup>
<div class="flex justify-between items-baseline">
<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-gray-800"
outline
onclick={closeDiscussion}
>
<CloseOutline />
</Button>
</div>
<div class="flex flex-col space-y-4">
<!-- TODO
alternative for other publications and
when blog is not opened, but discussion is opened from the list
-->
{#if showBlogHeader() && currentBlog && currentBlogEvent}
<BlogHeader
rootId={currentBlog}
event={currentBlogEvent}
onBlogUpdate={loadBlog}
active={true}
/>
{/if}
<div class="flex flex-col w-full space-y-4">
<Card class="ArticleBox card-leather w-full grid max-w-xl">
<div class="flex flex-col my-2">
<span>Unknown</span>
<span class="text-gray-500">1.1.1970</span>
</div>
<div class="flex flex-col flex-grow space-y-4">
This is a very intelligent comment placeholder that applies to
all the content equally well.
</div>
</Card>
</div>
</div>
</SidebarGroup>
</SidebarWrapper>
</Sidebar>
{/if}
</div>

2
src/lib/stores.ts
Unescape View File

@ -21,7 +21,7 @@ const defaultVisibility: PublicationLayoutVisibility = { @@ -21,7 +21,7 @@ const defaultVisibility: PublicationLayoutVisibility = {
blog: true,
main: true,
inner: false,
discussion: false,
discussion: true,
editing: false,
};

2
src/routes/publication/[type]/[identifier]/+page.svelte
Unescape View File

@ -186,7 +186,6 @@ @@ -186,7 +186,6 @@
indexEvent={indexEvent}
/>
<div class="publication flex flex-row {data.publicationType} px-4 space-y-4 overflow-auto mx-auto flex-grow-2 mt-[70px]">
<Publication
rootAddress={indexEvent.tagAddress()}
publicationType={data.publicationType}
@ -194,7 +193,6 @@ @@ -194,7 +193,6 @@
publicationTree={publicationTree}
toc={toc}
/>
</div>
{:else if loading}
<main class="publication">
<div class="flex items-center justify-center min-h-screen">

Write Preview
Loading…
Cancel
Save