Skip to content

Commit

Permalink
- Move pinned data into top-level layout.ts
Browse files Browse the repository at this point in the history 
- Update and clean up page and layout code
  • Loading branch information
@allanlasser
allanlasser committed Nov 22, 2024
1 parent afb1fb7 commit 664520a
Show file tree
Hide file tree
Showing 24 changed files with 461 additions and 419 deletions.
1 change: 1 addition & 0 deletions src/lib/components/documents/DocumentListItem.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,7 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
text-overflow: ellipsis;
/* white-space: nowrap; */
max-width: 100%;
margin: 0;
}
.meta {
Expand Down
216 changes: 109 additions & 107 deletions src/lib/components/layouts/AddOnBrowser.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
import { _ } from "svelte-i18n";
import { Hourglass24, Plug24 } from "svelte-octicons";
import AddOnsNavigation from "$lib/components/addons/AddOnsNavigation.svelte";
import Scheduled from "$lib/components/addons/Scheduled.svelte";
import Empty from "$lib/components/common/Empty.svelte";
import Error from "$lib/components/common/Error.svelte";
Expand All @@ -27,6 +26,10 @@
import Premium from "$lib/components/icons/Premium.svelte";
import Star from "$lib/components/icons/Star.svelte";
import ContentLayout from "$lib/components/layouts/ContentLayout.svelte";
import Documents from "../sidebar/Documents.svelte";
import Projects from "../sidebar/Projects.svelte";
import AddOns from "$lib/components/sidebar/AddOns.svelte";
import SidebarLayout from "./SidebarLayout.svelte";
export let addons: Promise<APIResponse<Page<AddOnListItem>>>;
export let events: Promise<APIResponse<Page<Event>>>;
Expand All @@ -50,107 +53,119 @@
$: showTip = ["active", "featured", "premium"].includes(active);
</script>

<div class="container">
<nav class="nav">
<AddOnsNavigation {active} />
</nav>
<main>
<ContentLayout>
<PageToolbar slot="header">
<Search name="query" {query} slot="center" />
</PageToolbar>
{#if showTip}
<div class="tip">
{#if active === "active"}
<Tip
--background-color="var(--orange-1)"
--border-color="var(--orange)"
--fill="var(--orange-4)"
>
<Pin size={1.75} slot="icon" />
{$_("addonBrowserDialog.pinnedTip")}
</Tip>
{:else if active === "featured"}
<Tip
--background-color="var(--yellow-1)"
--border-color="var(--yellow)"
--fill="var(--yellow-4)"
>
<Star size={1.75} slot="icon" />
{$_("addonBrowserDialog.featuredTip")}
</Tip>
{:else if active === "premium"}
<Tip
--background-color="var(--green-1)"
--border-color="var(--green)"
--fill="var(--green-4)"
>
<Premium size={1.75} slot="icon" />
{$_("addonBrowserDialog.premiumTip")}
</Tip>
{/if}
</div>
{/if}
{#await addons}
<SidebarLayout>
<svelte:fragment slot="navigation">
<Documents />
<Projects />
<AddOns />
</svelte:fragment>
<div class="container" slot="content">
<main>
<ContentLayout>
<PageToolbar slot="header">
<Search name="query" {query} slot="center" />
</PageToolbar>
{#if showTip}
<div class="tip">
{#if active === "active"}
<Tip
--background-color="var(--orange-1)"
--border-color="var(--orange)"
--fill="var(--orange-4)"
>
<Pin size={1.75} slot="icon" />
{$_("addonBrowserDialog.pinnedTip")}
</Tip>
{:else if active === "featured"}
<Tip
--background-color="var(--yellow-1)"
--border-color="var(--yellow)"
--fill="var(--yellow-4)"
>
<Star size={1.75} slot="icon" />
{$_("addonBrowserDialog.featuredTip")}
</Tip>
{:else if active === "premium"}
<Tip
--background-color="var(--green-1)"
--border-color="var(--green)"
--fill="var(--green-4)"
>
<Premium size={1.75} slot="icon" />
{$_("addonBrowserDialog.premiumTip")}
</Tip>
{/if}
</div>
{/if}
{#await addons}
<Empty icon={Hourglass24}>{$_("common.loading")}</Empty>
{:then { data: page }}
{#each page?.results ?? [] as addon}
<ListItem {addon} />
{:else}
<Empty icon={Plug24}>{$_("addonBrowserDialog.empty")}</Empty>
{/each}
{:catch error}
<Error>{String(error)}</Error>
{/await}

<PageToolbar slot="footer">
<svelte:fragment slot="center">
{#await addons}
<Paginator />
{:then { data: page }}
<Paginator
has_next={Boolean(page?.next)}
has_previous={Boolean(page?.previous)}
on:next={() => {
if (page?.next) paginate(page.next);
}}
on:previous={() => {
if (page?.previous) paginate(page.previous);
}}
/>
{/await}
</svelte:fragment>
</PageToolbar>
</ContentLayout>
</main>
<aside class="history">
{#await events}
<Empty icon={Hourglass24}>{$_("common.loading")}</Empty>
{:then { data: page }}
{#each page?.results ?? [] as addon}
<ListItem {addon} />
{:else}
<Empty icon={Plug24}>{$_("addonBrowserDialog.empty")}</Empty>
{/each}
{:catch error}
<Error>{String(error)}</Error>
{:then { data: events }}
<Scheduled
events={events?.results ?? []}
next={events?.next}
previous={events?.previous}
/>
{/await}

<PageToolbar slot="footer">
<svelte:fragment slot="center">
{#await addons}
<Paginator />
{:then { data: page }}
<Paginator
has_next={Boolean(page?.next)}
has_previous={Boolean(page?.previous)}
on:next={() => {
if (page?.next) paginate(page.next);
}}
on:previous={() => {
if (page?.previous) paginate(page.previous);
}}
/>
{/await}
</svelte:fragment>
</PageToolbar>
</ContentLayout>
</main>
<aside class="history">
{#await events}
<Empty icon={Hourglass24}>{$_("common.loading")}</Empty>
{:then { data: events }}
<Scheduled
events={events?.results ?? []}
next={events?.next}
previous={events?.previous}
/>
{/await}

{#await runs}
<Empty icon={Hourglass24}>{$_("common.loading")}</Empty>
{:then { data: runs }}
<History
runs={runs?.results ?? []}
next={runs?.next}
previous={runs?.previous}
/>
{/await}
</aside>
</div>
{#await runs}
<Empty icon={Hourglass24}>{$_("common.loading")}</Empty>
{:then { data: runs }}
<History
runs={runs?.results ?? []}
next={runs?.next}
previous={runs?.previous}
/>
{/await}
</aside>
</div>
</SidebarLayout>

<style>
.tip {
margin: 1rem;
}
nav,
.container {
width: 100%;
max-width: var(--app-max-w, 100rem);
margin: 0 auto;
max-height: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
}
aside {
padding: 1rem 0.5rem;
max-height: 100%;
Expand All @@ -163,24 +178,11 @@
background: var(--gray-1);
box-shadow: inset var(--shadow-2);
}
.nav {
min-width: 16rem;
max-width: 18rem;
}
.history {
max-width: unset;
display: flex;
flex-direction: column;
gap: 2rem;
padding: 1rem;
}
.container {
width: 100%;
max-width: var(--app-max-w, 100rem);
margin: 0 auto;
max-height: 100%;
display: grid;
grid-template-columns: 18rem 2fr 40%;
grid-template-rows: 1fr;
}
</style>
Loading

0 comments on commit 664520a

Please sign in to comment.