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

feat(homepage): list more recent repos 

reduce the space used each repo summary and make them less striking as
more are going to be displayed
master
DanConwayDev 2 years ago
parent
8fff6fdce2
commit
b4cf763814
No known key found for this signature in database
GPG Key ID: 68E15486D73F75E1
16 changed files with 141 additions and 199 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. BIN
      __snapshots__/repo-header--short-name.png
  2. BIN
      __snapshots__/repo-summary-card--loading.png
  3. BIN
      __snapshots__/repo-summary-card--long-and-no-spaces.png
  4. BIN
      __snapshots__/repo-summary-card--long-details.png
  5. BIN
      __snapshots__/repo-summary-card--no-details.png
  6. BIN
      __snapshots__/repo-summary-card--short-details.png
  7. 98
      __snapshots__/repo-summary-card.test.js.snap
  8. BIN
      __snapshots__/repo-summary-list--default.png
  9. BIN
      __snapshots__/repo-summary-list--empty.png
  10. BIN
      __snapshots__/repo-summary-list--loading.png
  11. BIN
      __snapshots__/repo-summary-list--no-title.png
  12. BIN
      __snapshots__/repo-summary-list--partially-loaded.png
  13. 168
      __snapshots__/repo-summary-list.test.js.snap
  14. 45
      src/lib/components/RepoSummaryCard.svelte
  15. 27
      src/lib/components/ReposSummaryList.svelte
  16. 2
      src/lib/wrappers/ReposRecent.svelte

BIN
__snapshots__/repo-header--short-name.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.2 KiB

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
__snapshots__/repo-summary-card--loading.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.9 KiB

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
__snapshots__/repo-summary-card--long-and-no-spaces.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 14 KiB

BIN
__snapshots__/repo-summary-card--long-details.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 16 KiB

BIN
__snapshots__/repo-summary-card--no-details.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.9 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB

BIN
__snapshots__/repo-summary-card--short-details.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 9.8 KiB

98
__snapshots__/repo-summary-card.test.js.snap
Unescape View File

@ -1,73 +1,61 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Repo/Summary/Card Long Details smoke-test 1`] = ` exports[`Repo/Summary/Card Long Details smoke-test 1`] = `
<a class="card w-96 bg-primary text-primary-content" <div class="p-4 bg-base-200 my-2 rounded-lg">
href="/repo/" <a class="link-primary break-words"
> href="/repo/"
<div class="card-body"> >
<h2 class="card-title svelte-jesdj"> Long Name that goes on and on and on and on a...
Long Name that goes on and on and on and on a... </a>
</h2> <p class="text-sm text-muted break-words">
<p class="svelte-jesdj"> Lorem ipsum dolor sit amet, consectetur adipi...
Lorem ipsum dolor sit amet, consectetur adipi... </p>
</p> </div>
</div>
</a>
`; `;
exports[`Repo/Summary/Card Long and No Spaces smoke-test 1`] = ` exports[`Repo/Summary/Card Long and No Spaces smoke-test 1`] = `
<a class="card w-96 bg-primary text-primary-content" <div class="p-4 bg-base-200 my-2 rounded-lg">
href="/repo/" <a class="link-primary break-words"
> href="/repo/"
<div class="card-body"> >
<h2 class="card-title svelte-jesdj"> LongNameLongNameLongNameLongNameLongNameLongN...
LongNameLongNameLongNameLongNameLongNameLongN... </a>
</h2> <p class="text-sm text-muted break-words">
<p class="svelte-jesdj"> LoremipsumLoremipsumLoremipsumLoremipsumLorem...
LoremipsumLoremipsumLoremipsumLoremipsumLorem... </p>
</p> </div>
</div>
</a>
`; `;
exports[`Repo/Summary/Card No Details smoke-test 1`] = ` exports[`Repo/Summary/Card No Details smoke-test 1`] = `
<a class="card w-96 bg-primary text-primary-content" <div class="p-4 bg-base-200 my-2 rounded-lg">
href="/repo/" <a class="link-primary break-words"
> href="/repo/"
<div class="card-body"> >
<h2 class="card-title svelte-jesdj"> Untitled
Untitled </a>
</h2> <p class="text-sm text-muted break-words">
<p class="svelte-jesdj"> </p>
</p> </div>
</div>
</a>
`; `;
exports[`Repo/Summary/Card Short Details smoke-test 1`] = ` exports[`Repo/Summary/Card Short Details smoke-test 1`] = `
<a class="card w-96 bg-primary text-primary-content" <div class="p-4 bg-base-200 my-2 rounded-lg">
href="/repo/" <a class="link-primary break-words"
> href="/repo/"
<div class="card-body"> >
<h2 class="card-title svelte-jesdj"> Short Name
Short Name </a>
</h2> <p class="text-sm text-muted break-words">
<p class="svelte-jesdj"> short description
short description </p>
</p> </div>
</div>
</a>
`; `;
exports[`Repo/Summary/Card loading smoke-test 1`] = ` exports[`Repo/Summary/Card loading smoke-test 1`] = `
<div class="card w-96 bg-neutral text-neutral-focus"> <div class="p-4 bg-base-200 my-2 rounded-lg">
<div class="card-body"> <div class="h-5 mb-2 skeleton w-40">
<div class="text-center"> </div>
<div class="h-6 mt-1 mb-3 skeleton w-40"> <div class="h-4 skeleton w-100">
</div>
<div class="h-4 mb-1 skeleton w-100">
</div>
</div>
</div> </div>
</div> </div>
`; `;

BIN
__snapshots__/repo-summary-list--default.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 33 KiB

BIN
__snapshots__/repo-summary-list--empty.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.7 KiB

After

Width:  |  Height:  |  Size: 7.7 KiB

BIN
__snapshots__/repo-summary-list--loading.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
__snapshots__/repo-summary-list--no-title.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 20 KiB

BIN
__snapshots__/repo-summary-list--partially-loaded.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 22 KiB

168
__snapshots__/repo-summary-list.test.js.snap
Unescape View File

@ -1,54 +1,50 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Repo/Summary/List Default smoke-test 1`] = ` exports[`Repo/Summary/List Default smoke-test 1`] = `
<div class="space-y-5"> <div class="min-width">
<div class="prose"> <div class="prose mb-3">
<h3> <h3>
Featured Repositories Featured Repositories
</h3> </h3>
</div> </div>
<a class="card w-96 bg-primary text-primary-content" <div class>
href="/repo/" <div class="p-4 bg-base-200 my-2 rounded-lg">
> <a class="link-primary break-words"
<div class="card-body"> href="/repo/"
<h2 class="card-title svelte-jesdj"> >
Short Name Short Name
</h2> </a>
<p class="svelte-jesdj"> <p class="text-sm text-muted break-words">
short description short description
</p> </p>
</div> </div>
</a> <div class="p-4 bg-base-200 my-2 rounded-lg">
<a class="card w-96 bg-primary text-primary-content" <a class="link-primary break-words"
href="/repo/" href="/repo/"
> >
<div class="card-body">
<h2 class="card-title svelte-jesdj">
Long Name that goes on and on and on and on a... Long Name that goes on and on and on and on a...
</h2> </a>
<p class="svelte-jesdj"> <p class="text-sm text-muted break-words">
Lorem ipsum dolor sit amet, consectetur adipi... Lorem ipsum dolor sit amet, consectetur adipi...
</p> </p>
</div> </div>
</a> <div class="p-4 bg-base-200 my-2 rounded-lg">
<a class="card w-96 bg-primary text-primary-content" <a class="link-primary break-words"
href="/repo/" href="/repo/"
> >
<div class="card-body">
<h2 class="card-title svelte-jesdj">
LongNameLongNameLongNameLongNameLongNameLongN... LongNameLongNameLongNameLongNameLongNameLongN...
</h2> </a>
<p class="svelte-jesdj"> <p class="text-sm text-muted break-words">
LoremipsumLoremipsumLoremipsumLoremipsumLorem... LoremipsumLoremipsumLoremipsumLoremipsumLorem...
</p> </p>
</div> </div>
</a> </div>
</div> </div>
`; `;
exports[`Repo/Summary/List Empty smoke-test 1`] = ` exports[`Repo/Summary/List Empty smoke-test 1`] = `
<div class="space-y-5"> <div class="min-width">
<div class="prose"> <div class="prose mb-3">
<h3> <h3>
Latest Latest
</h3> </h3>
@ -60,39 +56,29 @@ exports[`Repo/Summary/List Empty smoke-test 1`] = `
`; `;
exports[`Repo/Summary/List Loading smoke-test 1`] = ` exports[`Repo/Summary/List Loading smoke-test 1`] = `
<div class="space-y-5"> <div class="min-width">
<div class="prose"> <div class="prose mb-3">
<h3> <h3>
Latest Latest
</h3> </h3>
</div> </div>
<div class="card w-96 bg-neutral text-neutral-focus"> <div class>
<div class="card-body"> <div class="p-4 bg-base-200 my-2 rounded-lg">
<div class="text-center"> <div class="h-5 mb-2 skeleton w-40">
<div class="h-6 mt-1 mb-3 skeleton w-40"> </div>
</div> <div class="h-4 skeleton w-100">
<div class="h-4 mb-1 skeleton w-100">
</div>
</div> </div>
</div> </div>
</div> <div class="p-4 bg-base-200 my-2 rounded-lg">
<div class="card w-96 bg-neutral text-neutral-focus"> <div class="h-5 mb-2 skeleton w-40">
<div class="card-body"> </div>
<div class="text-center"> <div class="h-4 skeleton w-100">
<div class="h-6 mt-1 mb-3 skeleton w-40">
</div>
<div class="h-4 mb-1 skeleton w-100">
</div>
</div> </div>
</div> </div>
</div> <div class="p-4 bg-base-200 my-2 rounded-lg">
<div class="card w-96 bg-neutral text-neutral-focus"> <div class="h-5 mb-2 skeleton w-40">
<div class="card-body"> </div>
<div class="text-center"> <div class="h-4 skeleton w-100">
<div class="h-6 mt-1 mb-3 skeleton w-40">
</div>
<div class="h-4 mb-1 skeleton w-100">
</div>
</div> </div>
</div> </div>
</div> </div>
@ -100,72 +86,64 @@ exports[`Repo/Summary/List Loading smoke-test 1`] = `
`; `;
exports[`Repo/Summary/List No Title smoke-test 1`] = ` exports[`Repo/Summary/List No Title smoke-test 1`] = `
<div class="space-y-5"> <div class="min-width">
<a class="card w-96 bg-primary text-primary-content" <div class>
href="/repo/" <div class="p-4 bg-base-200 my-2 rounded-lg">
> <a class="link-primary break-words"
<div class="card-body"> href="/repo/"
<h2 class="card-title svelte-jesdj"> >
Short Name Short Name
</h2> </a>
<p class="svelte-jesdj"> <p class="text-sm text-muted break-words">
short description short description
</p> </p>
</div> </div>
</a> <div class="p-4 bg-base-200 my-2 rounded-lg">
<a class="card w-96 bg-primary text-primary-content" <a class="link-primary break-words"
href="/repo/" href="/repo/"
> >
<div class="card-body">
<h2 class="card-title svelte-jesdj">
Long Name that goes on and on and on and on a... Long Name that goes on and on and on and on a...
</h2> </a>
<p class="svelte-jesdj"> <p class="text-sm text-muted break-words">
Lorem ipsum dolor sit amet, consectetur adipi... Lorem ipsum dolor sit amet, consectetur adipi...
</p> </p>
</div> </div>
</a> </div>
</div> </div>
`; `;
exports[`Repo/Summary/List Partially Loaded smoke-test 1`] = ` exports[`Repo/Summary/List Partially Loaded smoke-test 1`] = `
<div class="space-y-5"> <div class="min-width">
<div class="prose"> <div class="prose mb-3">
<h3> <h3>
Latest Latest
</h3> </h3>
</div> </div>
<a class="card w-96 bg-primary text-primary-content" <div class>
href="/repo/" <div class="p-4 bg-base-200 my-2 rounded-lg">
> <a class="link-primary break-words"
<div class="card-body"> href="/repo/"
<h2 class="card-title svelte-jesdj"> >
Short Name Short Name
</h2> </a>
<p class="svelte-jesdj"> <p class="text-sm text-muted break-words">
short description short description
</p> </p>
</div> </div>
</a> <div class="p-4 bg-base-200 my-2 rounded-lg">
<a class="card w-96 bg-primary text-primary-content" <a class="link-primary break-words"
href="/repo/" href="/repo/"
> >
<div class="card-body">
<h2 class="card-title svelte-jesdj">
Long Name that goes on and on and on and on a... Long Name that goes on and on and on and on a...
</h2> </a>
<p class="svelte-jesdj"> <p class="text-sm text-muted break-words">
Lorem ipsum dolor sit amet, consectetur adipi... Lorem ipsum dolor sit amet, consectetur adipi...
</p> </p>
</div> </div>
</a> <div class="p-4 bg-base-200 my-2 rounded-lg">
<div class="card w-96 bg-neutral text-neutral-focus"> <div class="h-5 mb-2 skeleton w-40">
<div class="card-body"> </div>
<div class="text-center"> <div class="h-4 skeleton w-100">
<div class="h-6 mt-1 mb-3 skeleton w-40">
</div>
<div class="h-4 mb-1 skeleton w-100">
</div>
</div> </div>
</div> </div>
</div> </div>

45
src/lib/components/RepoSummaryCard.svelte
Unescape View File

@ -14,8 +14,6 @@
</script> </script>
<script lang="ts"> <script lang="ts">
import { slide } from "svelte/transition";
export let { name, description, repo_id: repo_id, loading } = defaults; export let { name, description, repo_id: repo_id, loading } = defaults;
let short_name: string; let short_name: string;
$: { $: {
@ -27,37 +25,12 @@
description.length > 50 ? description.slice(0, 45) + "..." : description; description.length > 50 ? description.slice(0, 45) + "..." : description;
</script> </script>
{#if loading} <div class="p-4 bg-base-200 my-2 rounded-lg">
<div {#if loading}
transition:slide={{ duration: 50 }} <div class="h-5 mb-2 skeleton w-40"></div>
class="card w-96 bg-neutral text-neutral-focus" <div class="h-4 skeleton w-100"></div>
> {:else}
<div class="card-body"> <a class="link-primary break-words" href="/repo/{repo_id}">{short_name}</a>
<div class="text-center"> <p class="text-sm text-muted break-words">{short_descrption}</p>
<div class="h-6 mt-1 mb-3 skeleton w-40"></div> {/if}
<div class="h-4 mb-1 skeleton w-100"></div> </div>
</div>
</div>
</div>
{:else}
<a
transition:slide={{ duration: 50 }}
class="card w-96 bg-primary text-primary-content"
href="/repo/{repo_id}"
>
<div class="card-body">
<h2 class="card-title">{short_name}</h2>
<p>{short_descrption}</p>
</div>
</a>
{/if}
<style>
h2 {
display: inline-block;
}
p,
h2 {
word-wrap: break-word;
}
</style>

27
src/lib/components/ReposSummaryList.svelte
Unescape View File

@ -11,23 +11,26 @@
export let loading: boolean = false; export let loading: boolean = false;
</script> </script>
<div class="space-y-5"> <div class="min-width">
{#if title.length > 0} {#if title.length > 0}
<div class="prose"> <div class="prose mb-3">
<h3>{title}</h3> <h3>{title}</h3>
</div> </div>
{/if} {/if}
{#if repos.length == 0 && !loading} {#if repos.length == 0 && !loading}
<p class="prose">None</p> <p class="prose">None</p>
{/if} {:else}
{#each repos as { name, description, repo_id }} <div class="">
<RepoSummaryCard {name} {description} {repo_id} /> {#each repos as { name, description, repo_id }}
{/each} <RepoSummaryCard {name} {description} {repo_id} />
{#if loading} {/each}
<RepoSummaryCard loading={true} /> {#if loading}
{#if repos.length == 0} <RepoSummaryCard loading={true} />
<RepoSummaryCard loading={true} /> {#if repos.length == 0}
<RepoSummaryCard loading={true} /> <RepoSummaryCard loading={true} />
{/if} <RepoSummaryCard loading={true} />
{/if}
{/if}
</div>
{/if} {/if}
</div> </div>

2
src/lib/wrappers/ReposRecent.svelte
Unescape View File

@ -5,7 +5,7 @@
import { ndk } from "$lib/stores/ndk"; import { ndk } from "$lib/stores/ndk";
import { onDestroy } from "svelte"; import { onDestroy } from "svelte";
export let limit: number = 5; export let limit: number = 10;
let repos: Args[] = []; let repos: Args[] = [];
let loading: boolean = true; let loading: boolean = true;

Write Preview
Loading…
Cancel
Save