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

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

@ -186,7 +186,6 @@
indexEvent={indexEvent} 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 <Publication
rootAddress={indexEvent.tagAddress()} rootAddress={indexEvent.tagAddress()}
publicationType={data.publicationType} publicationType={data.publicationType}
@ -194,7 +193,6 @@
publicationTree={publicationTree} publicationTree={publicationTree}
toc={toc} toc={toc}
/> />
</div>
{:else if loading} {:else if loading}
<main class="publication"> <main class="publication">
<div class="flex items-center justify-center min-h-screen"> <div class="flex items-center justify-center min-h-screen">

Write Preview
Loading…
Cancel
Save