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

feat(homepage): reduce prominence of repo authors 

in repo summary cards by:
 - making them smaller
 - moving them to the bottom
 - putting them all on one line

 this also creates a less cramped ui
master
DanConwayDev 2 years ago
parent
44833b5f15
commit
e84643a805
No known key found for this signature in database
GPG Key ID: 68E15486D73F75E1
12 changed files with 449 additions and 435 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-summary-card--long-and-no-spaces.png
  2. BIN
      __snapshots__/repo-summary-card--long-details.png
  3. BIN
      __snapshots__/repo-summary-card--multiple-maintainers.png
  4. BIN
      __snapshots__/repo-summary-card--no-details.png
  5. BIN
      __snapshots__/repo-summary-card--short-details.png
  6. 150
      __snapshots__/repo-summary-card.test.js.snap
  7. BIN
      __snapshots__/repo-summary-list--default.png
  8. BIN
      __snapshots__/repo-summary-list--multiple-maintainers.png
  9. BIN
      __snapshots__/repo-summary-list--no-title.png
  10. BIN
      __snapshots__/repo-summary-list--partially-loaded.png
  11. 292
      __snapshots__/repo-summary-list.test.js.snap
  12. 34
      src/lib/components/RepoSummaryCard.svelte

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: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

BIN
__snapshots__/repo-summary-card--multiple-maintainers.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 14 KiB

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.9 KiB

After

Width:  |  Height:  |  Size: 7.2 KiB

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

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

@ -4,12 +4,19 @@ exports[`Repo/Summary/Card Long Details smoke-test 1`] = `
<div class="my-2 rounded-lg bg-base-200 p-4" <div class="my-2 rounded-lg bg-base-200 p-4"
style="min-height: 3.325rem;" style="min-height: 3.325rem;"
> >
<p class="text-muted float-right break-words text-sm"> <a class="link-primary break-words"
<span> href="/repo/"
</span> >
<div class="text-right"> Long Name that goes on and on and on and on a...
</a>
<p class="text-muted break-words pb-1 text-sm">
Lorem ipsum dolor sit amet, consectetur adipi...
</p>
<div class="break-words text-right text-xs text-slate-400">
<ul class="reposummarycard inline svelte-18klqbq">
<li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-sm inline-block align-middle"> <div class="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle"> <div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5"> <div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0" <img class="my-0"
@ -23,16 +30,9 @@ exports[`Repo/Summary/Card Long Details smoke-test 1`] = `
</div> </div>
</div> </div>
</div> </div>
</li>
</ul>
</div> </div>
</p>
<a class="link-primary break-words"
href="/repo/"
>
Long Name that goes on and on and on and on a...
</a>
<p class="text-muted break-words text-sm">
Lorem ipsum dolor sit amet, consectetur adipi...
</p>
</div> </div>
`; `;
@ -40,12 +40,19 @@ exports[`Repo/Summary/Card Long and No Spaces smoke-test 1`] = `
<div class="my-2 rounded-lg bg-base-200 p-4" <div class="my-2 rounded-lg bg-base-200 p-4"
style="min-height: 3.325rem;" style="min-height: 3.325rem;"
> >
<p class="text-muted float-right break-words text-sm"> <a class="link-primary break-words"
<span> href="/repo/"
</span> >
<div class="text-right"> LongNameLongNameLongNameLongNameLongNameLongN...
</a>
<p class="text-muted break-words pb-1 text-sm">
LoremipsumLoremipsumLoremipsumLoremipsumLorem...
</p>
<div class="break-words text-right text-xs text-slate-400">
<ul class="reposummarycard inline svelte-18klqbq">
<li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-sm inline-block align-middle"> <div class="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle"> <div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5"> <div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0" <img class="my-0"
@ -59,16 +66,9 @@ exports[`Repo/Summary/Card Long and No Spaces smoke-test 1`] = `
</div> </div>
</div> </div>
</div> </div>
</li>
</ul>
</div> </div>
</p>
<a class="link-primary break-words"
href="/repo/"
>
LongNameLongNameLongNameLongNameLongNameLongN...
</a>
<p class="text-muted break-words text-sm">
LoremipsumLoremipsumLoremipsumLoremipsumLorem...
</p>
</div> </div>
`; `;
@ -76,12 +76,19 @@ exports[`Repo/Summary/Card Multiple Maintainers smoke-test 1`] = `
<div class="my-2 rounded-lg bg-base-200 p-4" <div class="my-2 rounded-lg bg-base-200 p-4"
style="min-height: 5.975rem;" style="min-height: 5.975rem;"
> >
<p class="text-muted float-right break-words text-sm"> <a class="link-primary break-words"
<span> href="/repo/"
</span> >
<div class="text-right"> Short Name
</a>
<p class="text-muted break-words pb-1 text-sm">
short description
</p>
<div class="break-words text-right text-xs text-slate-400">
<ul class="reposummarycard inline svelte-18klqbq">
<li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-sm inline-block align-middle"> <div class="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle"> <div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5"> <div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0" <img class="my-0"
@ -95,10 +102,10 @@ exports[`Repo/Summary/Card Multiple Maintainers smoke-test 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div> </li>
<div class="text-right"> <li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-sm inline-block align-middle"> <div class="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle"> <div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5"> <div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0" <img class="my-0"
@ -112,10 +119,10 @@ exports[`Repo/Summary/Card Multiple Maintainers smoke-test 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div> </li>
<div class="text-right"> <li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-sm inline-block align-middle"> <div class="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle"> <div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5"> <div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0" <img class="my-0"
@ -129,16 +136,9 @@ exports[`Repo/Summary/Card Multiple Maintainers smoke-test 1`] = `
</div> </div>
</div> </div>
</div> </div>
</li>
</ul>
</div> </div>
</p>
<a class="link-primary break-words"
href="/repo/"
>
Short Name
</a>
<p class="text-muted break-words text-sm">
short description
</p>
</div> </div>
`; `;
@ -146,31 +146,29 @@ exports[`Repo/Summary/Card No Details smoke-test 1`] = `
<div class="my-2 rounded-lg bg-base-200 p-4" <div class="my-2 rounded-lg bg-base-200 p-4"
style="min-height: 3.325rem;" style="min-height: 3.325rem;"
> >
<p class="text-muted float-right break-words text-sm"> <a class="link-primary break-words"
<span> href="/repo/"
</span> >
<div class="text-right"> Untitled
</a>
<div class="break-words text-right text-xs text-slate-400">
<ul class="reposummarycard inline svelte-18klqbq">
<li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-sm inline-block align-middle"> <div class="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle"> <div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5 skeleton"> <div class="rounded inline-block h-3.5 w-3.5 skeleton">
</div> </div>
</div> </div>
<div class="pl-0 inline-block"> <div class="pl-0 inline-block">
<div class="skeleton w-24 h-3"> <div class="skeleton w-24 h-2.5">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</li>
</ul>
</div> </div>
</p>
<a class="link-primary break-words"
href="/repo/"
>
Untitled
</a>
<p class="text-muted break-words text-sm">
</p>
</div> </div>
`; `;
@ -178,12 +176,19 @@ exports[`Repo/Summary/Card Short Details smoke-test 1`] = `
<div class="my-2 rounded-lg bg-base-200 p-4" <div class="my-2 rounded-lg bg-base-200 p-4"
style="min-height: 3.325rem;" style="min-height: 3.325rem;"
> >
<p class="text-muted float-right break-words text-sm"> <a class="link-primary break-words"
<span> href="/repo/"
</span> >
<div class="text-right"> Short Name
</a>
<p class="text-muted break-words pb-1 text-sm">
short description
</p>
<div class="break-words text-right text-xs text-slate-400">
<ul class="reposummarycard inline svelte-18klqbq">
<li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-sm inline-block align-middle"> <div class="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle"> <div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5"> <div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0" <img class="my-0"
@ -197,16 +202,9 @@ exports[`Repo/Summary/Card Short Details smoke-test 1`] = `
</div> </div>
</div> </div>
</div> </div>
</li>
</ul>
</div> </div>
</p>
<a class="link-primary break-words"
href="/repo/"
>
Short Name
</a>
<p class="text-muted break-words text-sm">
short description
</p>
</div> </div>
`; `;

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 48 KiB

BIN
__snapshots__/repo-summary-list--multiple-maintainers.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 33 KiB

After

Width:  |  Height:  |  Size: 31 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: 24 KiB

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB

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

@ -11,12 +11,19 @@ exports[`Repo/Summary/List Default smoke-test 1`] = `
<div class="my-2 rounded-lg bg-base-200 p-4" <div class="my-2 rounded-lg bg-base-200 p-4"
style="min-height: 3.325rem;" style="min-height: 3.325rem;"
> >
<p class="text-muted float-right break-words text-sm"> <a class="link-primary break-words"
<span> href="/repo/"
</span> >
<div class="text-right"> Short Name
</a>
<p class="text-muted break-words pb-1 text-sm">
short description
</p>
<div class="break-words text-right text-xs text-slate-400">
<ul class="reposummarycard inline svelte-18klqbq">
<li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-sm inline-block align-middle"> <div class="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle"> <div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5"> <div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0" <img class="my-0"
@ -30,26 +37,26 @@ exports[`Repo/Summary/List Default smoke-test 1`] = `
</div> </div>
</div> </div>
</div> </div>
</li>
</ul>
</div> </div>
</p> </div>
<div class="my-2 rounded-lg bg-base-200 p-4"
style="min-height: 3.325rem;"
>
<a class="link-primary break-words" <a class="link-primary break-words"
href="/repo/" href="/repo/"
> >
Short Name Long Name that goes on and on and on and on a...
</a> </a>
<p class="text-muted break-words text-sm"> <p class="text-muted break-words pb-1 text-sm">
short description Lorem ipsum dolor sit amet, consectetur adipi...
</p> </p>
</div> <div class="break-words text-right text-xs text-slate-400">
<div class="my-2 rounded-lg bg-base-200 p-4" <ul class="reposummarycard inline svelte-18klqbq">
style="min-height: 3.325rem;" <li class="inline svelte-18klqbq">
>
<p class="text-muted float-right break-words text-sm">
<span>
</span>
<div class="text-right">
<div class="inline-block"> <div class="inline-block">
<div class="text-sm inline-block align-middle"> <div class="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle"> <div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5"> <div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0" <img class="my-0"
@ -63,26 +70,26 @@ exports[`Repo/Summary/List Default smoke-test 1`] = `
</div> </div>
</div> </div>
</div> </div>
</li>
</ul>
</div> </div>
</p> </div>
<div class="my-2 rounded-lg bg-base-200 p-4"
style="min-height: 3.325rem;"
>
<a class="link-primary break-words" <a class="link-primary break-words"
href="/repo/" href="/repo/"
> >
Long Name that goes on and on and on and on a... LongNameLongNameLongNameLongNameLongNameLongN...
</a> </a>
<p class="text-muted break-words text-sm"> <p class="text-muted break-words pb-1 text-sm">
Lorem ipsum dolor sit amet, consectetur adipi... LoremipsumLoremipsumLoremipsumLoremipsumLorem...
</p> </p>
</div> <div class="break-words text-right text-xs text-slate-400">
<div class="my-2 rounded-lg bg-base-200 p-4" <ul class="reposummarycard inline svelte-18klqbq">
style="min-height: 3.325rem;" <li class="inline svelte-18klqbq">
>
<p class="text-muted float-right break-words text-sm">
<span>
</span>
<div class="text-right">
<div class="inline-block"> <div class="inline-block">
<div class="text-sm inline-block align-middle"> <div class="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle"> <div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5"> <div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0" <img class="my-0"
@ -96,26 +103,26 @@ exports[`Repo/Summary/List Default smoke-test 1`] = `
</div> </div>
</div> </div>
</div> </div>
</li>
</ul>
</div> </div>
</p> </div>
<div class="my-2 rounded-lg bg-base-200 p-4"
style="min-height: 5.975rem;"
>
<a class="link-primary break-words" <a class="link-primary break-words"
href="/repo/" href="/repo/"
> >
LongNameLongNameLongNameLongNameLongNameLongN... Short Name
</a> </a>
<p class="text-muted break-words text-sm"> <p class="text-muted break-words pb-1 text-sm">
LoremipsumLoremipsumLoremipsumLoremipsumLorem... short description
</p> </p>
</div> <div class="break-words text-right text-xs text-slate-400">
<div class="my-2 rounded-lg bg-base-200 p-4" <ul class="reposummarycard inline svelte-18klqbq">
style="min-height: 5.975rem;" <li class="inline svelte-18klqbq">
>
<p class="text-muted float-right break-words text-sm">
<span>
</span>
<div class="text-right">
<div class="inline-block"> <div class="inline-block">
<div class="text-sm inline-block align-middle"> <div class="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle"> <div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5"> <div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0" <img class="my-0"
@ -129,10 +136,10 @@ exports[`Repo/Summary/List Default smoke-test 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div> </li>
<div class="text-right"> <li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-sm inline-block align-middle"> <div class="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle"> <div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5"> <div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0" <img class="my-0"
@ -146,10 +153,10 @@ exports[`Repo/Summary/List Default smoke-test 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div> </li>
<div class="text-right"> <li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-sm inline-block align-middle"> <div class="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle"> <div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5"> <div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0" <img class="my-0"
@ -163,16 +170,9 @@ exports[`Repo/Summary/List Default smoke-test 1`] = `
</div> </div>
</div> </div>
</div> </div>
</li>
</ul>
</div> </div>
</p>
<a class="link-primary break-words"
href="/repo/"
>
Short Name
</a>
<p class="text-muted break-words text-sm">
short description
</p>
</div> </div>
</div> </div>
</div> </div>
@ -238,12 +238,19 @@ exports[`Repo/Summary/List Multiple Maintainers smoke-test 1`] = `
<div class="my-2 rounded-lg bg-base-200 p-4" <div class="my-2 rounded-lg bg-base-200 p-4"
style="min-height: 5.975rem;" style="min-height: 5.975rem;"
> >
<p class="text-muted float-right break-words text-sm"> <a class="link-primary break-words"
<span> href="/repo/"
</span> >
<div class="text-right"> Short Name
</a>
<p class="text-muted break-words pb-1 text-sm">
short description
</p>
<div class="break-words text-right text-xs text-slate-400">
<ul class="reposummarycard inline svelte-18klqbq">
<li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-sm inline-block align-middle"> <div class="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle"> <div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5"> <div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0" <img class="my-0"
@ -257,10 +264,10 @@ exports[`Repo/Summary/List Multiple Maintainers smoke-test 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div> </li>
<div class="text-right"> <li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-sm inline-block align-middle"> <div class="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle"> <div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5"> <div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0" <img class="my-0"
@ -274,10 +281,10 @@ exports[`Repo/Summary/List Multiple Maintainers smoke-test 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div> </li>
<div class="text-right"> <li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-sm inline-block align-middle"> <div class="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle"> <div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5"> <div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0" <img class="my-0"
@ -291,26 +298,26 @@ exports[`Repo/Summary/List Multiple Maintainers smoke-test 1`] = `
</div> </div>
</div> </div>
</div> </div>
</li>
</ul>
</div> </div>
</p> </div>
<div class="my-2 rounded-lg bg-base-200 p-4"
style="min-height: 3.325rem;"
>
<a class="link-primary break-words" <a class="link-primary break-words"
href="/repo/" href="/repo/"
> >
Short Name Long Name that goes on and on and on and on a...
</a> </a>
<p class="text-muted break-words text-sm"> <p class="text-muted break-words pb-1 text-sm">
short description Lorem ipsum dolor sit amet, consectetur adipi...
</p> </p>
</div> <div class="break-words text-right text-xs text-slate-400">
<div class="my-2 rounded-lg bg-base-200 p-4" <ul class="reposummarycard inline svelte-18klqbq">
style="min-height: 3.325rem;" <li class="inline svelte-18klqbq">
>
<p class="text-muted float-right break-words text-sm">
<span>
</span>
<div class="text-right">
<div class="inline-block"> <div class="inline-block">
<div class="text-sm inline-block align-middle"> <div class="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle"> <div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5"> <div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0" <img class="my-0"
@ -324,16 +331,9 @@ exports[`Repo/Summary/List Multiple Maintainers smoke-test 1`] = `
</div> </div>
</div> </div>
</div> </div>
</li>
</ul>
</div> </div>
</p>
<a class="link-primary break-words"
href="/repo/"
>
Long Name that goes on and on and on and on a...
</a>
<p class="text-muted break-words text-sm">
Lorem ipsum dolor sit amet, consectetur adipi...
</p>
</div> </div>
</div> </div>
</div> </div>
@ -345,12 +345,19 @@ exports[`Repo/Summary/List No Title smoke-test 1`] = `
<div class="my-2 rounded-lg bg-base-200 p-4" <div class="my-2 rounded-lg bg-base-200 p-4"
style="min-height: 3.325rem;" style="min-height: 3.325rem;"
> >
<p class="text-muted float-right break-words text-sm"> <a class="link-primary break-words"
<span> href="/repo/"
</span> >
<div class="text-right"> Short Name
</a>
<p class="text-muted break-words pb-1 text-sm">
short description
</p>
<div class="break-words text-right text-xs text-slate-400">
<ul class="reposummarycard inline svelte-18klqbq">
<li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-sm inline-block align-middle"> <div class="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle"> <div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5"> <div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0" <img class="my-0"
@ -364,26 +371,26 @@ exports[`Repo/Summary/List No Title smoke-test 1`] = `
</div> </div>
</div> </div>
</div> </div>
</li>
</ul>
</div> </div>
</p> </div>
<div class="my-2 rounded-lg bg-base-200 p-4"
style="min-height: 3.325rem;"
>
<a class="link-primary break-words" <a class="link-primary break-words"
href="/repo/" href="/repo/"
> >
Short Name Long Name that goes on and on and on and on a...
</a> </a>
<p class="text-muted break-words text-sm"> <p class="text-muted break-words pb-1 text-sm">
short description Lorem ipsum dolor sit amet, consectetur adipi...
</p> </p>
</div> <div class="break-words text-right text-xs text-slate-400">
<div class="my-2 rounded-lg bg-base-200 p-4" <ul class="reposummarycard inline svelte-18klqbq">
style="min-height: 3.325rem;" <li class="inline svelte-18klqbq">
>
<p class="text-muted float-right break-words text-sm">
<span>
</span>
<div class="text-right">
<div class="inline-block"> <div class="inline-block">
<div class="text-sm inline-block align-middle"> <div class="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle"> <div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5"> <div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0" <img class="my-0"
@ -397,16 +404,9 @@ exports[`Repo/Summary/List No Title smoke-test 1`] = `
</div> </div>
</div> </div>
</div> </div>
</li>
</ul>
</div> </div>
</p>
<a class="link-primary break-words"
href="/repo/"
>
Long Name that goes on and on and on and on a...
</a>
<p class="text-muted break-words text-sm">
Lorem ipsum dolor sit amet, consectetur adipi...
</p>
</div> </div>
</div> </div>
</div> </div>
@ -423,12 +423,19 @@ exports[`Repo/Summary/List Partially Loaded smoke-test 1`] = `
<div class="my-2 rounded-lg bg-base-200 p-4" <div class="my-2 rounded-lg bg-base-200 p-4"
style="min-height: 3.325rem;" style="min-height: 3.325rem;"
> >
<p class="text-muted float-right break-words text-sm"> <a class="link-primary break-words"
<span> href="/repo/"
</span> >
<div class="text-right"> Short Name
</a>
<p class="text-muted break-words pb-1 text-sm">
short description
</p>
<div class="break-words text-right text-xs text-slate-400">
<ul class="reposummarycard inline svelte-18klqbq">
<li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-sm inline-block align-middle"> <div class="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle"> <div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5"> <div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0" <img class="my-0"
@ -442,26 +449,26 @@ exports[`Repo/Summary/List Partially Loaded smoke-test 1`] = `
</div> </div>
</div> </div>
</div> </div>
</li>
</ul>
</div> </div>
</p> </div>
<div class="my-2 rounded-lg bg-base-200 p-4"
style="min-height: 3.325rem;"
>
<a class="link-primary break-words" <a class="link-primary break-words"
href="/repo/" href="/repo/"
> >
Short Name Long Name that goes on and on and on and on a...
</a> </a>
<p class="text-muted break-words text-sm"> <p class="text-muted break-words pb-1 text-sm">
short description Lorem ipsum dolor sit amet, consectetur adipi...
</p> </p>
</div> <div class="break-words text-right text-xs text-slate-400">
<div class="my-2 rounded-lg bg-base-200 p-4" <ul class="reposummarycard inline svelte-18klqbq">
style="min-height: 3.325rem;" <li class="inline svelte-18klqbq">
>
<p class="text-muted float-right break-words text-sm">
<span>
</span>
<div class="text-right">
<div class="inline-block"> <div class="inline-block">
<div class="text-sm inline-block align-middle"> <div class="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle"> <div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5"> <div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0" <img class="my-0"
@ -475,16 +482,9 @@ exports[`Repo/Summary/List Partially Loaded smoke-test 1`] = `
</div> </div>
</div> </div>
</div> </div>
</li>
</ul>
</div> </div>
</p>
<a class="link-primary break-words"
href="/repo/"
>
Long Name that goes on and on and on and on a...
</a>
<p class="text-muted break-words text-sm">
Lorem ipsum dolor sit amet, consectetur adipi...
</p>
</div> </div>
<div class="my-2 rounded-lg bg-base-200 p-4" <div class="my-2 rounded-lg bg-base-200 p-4"
style="min-height: 3.325rem;" style="min-height: 3.325rem;"

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

@ -22,19 +22,35 @@
<div class="skeleton mb-2 h-5 w-40"></div> <div class="skeleton mb-2 h-5 w-40"></div>
<div class="w-100 skeleton h-4"></div> <div class="w-100 skeleton h-4"></div>
{:else} {:else}
<p class="text-muted float-right break-words text-sm">
<span></span>
{#each maintainers as user}
<div class="text-right">
<UserHeader {user} inline={true} size="sm" />
</div>
{/each}
</p>
<a class="link-primary break-words" href="/repo/{encodeURI(repo_id)}" <a class="link-primary break-words" href="/repo/{encodeURI(repo_id)}"
>{short_name}</a >{short_name}</a
> >
<p class="text-muted break-words text-sm"> {#if short_descrption.length > 0}
<p class="text-muted break-words pb-1 text-sm">
{short_descrption} {short_descrption}
</p> </p>
{/if} {/if}
<div class="break-words text-right text-xs text-slate-400">
<ul class="reposummarycard inline">
{#each maintainers as user}
<li class="inline">
<UserHeader {user} inline={true} size="xs" />
</li>
{/each}
</ul>
</div> </div>
{/if}
</div>
<style lang="postcss">
.reposummarycard li::before {
content: ', ';
}
.reposummarycard li:last-child::before {
content: ' or ';
}
.reposummarycard li:first-child::before {
content: '';
}
</style>

Write Preview
Loading…
Cancel
Save