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. 278
      __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. 568
      __snapshots__/repo-summary-list.test.js.snap
  12. 38
      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

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

@ -4,35 +4,35 @@ 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">
<span>
</span>
<div class="text-right">
<div class="inline-block">
<div class="text-sm inline-block align-middle">
<div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0"
src="../test-profile-image.jpg"
alt="Rather Long Display Name"
>
</div>
</div>
<div class="pl-0 inline-block">
Rather Long Display Name
</div>
</div>
</div>
</div>
</p>
<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... 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">
Lorem ipsum dolor sit amet, consectetur adipi... Lorem ipsum dolor sit amet, consectetur adipi...
</p> </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="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0"
src="../test-profile-image.jpg"
alt="Rather Long Display Name"
>
</div>
</div>
<div class="pl-0 inline-block">
Rather Long Display Name
</div>
</div>
</div>
</li>
</ul>
</div>
</div> </div>
`; `;
@ -40,35 +40,35 @@ 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">
<span>
</span>
<div class="text-right">
<div class="inline-block">
<div class="text-sm inline-block align-middle">
<div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0"
src="../test-profile-image.jpg"
alt="DanConwayDev"
>
</div>
</div>
<div class="pl-0 inline-block">
DanConwayDev
</div>
</div>
</div>
</div>
</p>
<a class="link-primary break-words" <a class="link-primary break-words"
href="/repo/" href="/repo/"
> >
LongNameLongNameLongNameLongNameLongNameLongN... LongNameLongNameLongNameLongNameLongNameLongN...
</a> </a>
<p class="text-muted break-words text-sm"> <p class="text-muted break-words pb-1 text-sm">
LoremipsumLoremipsumLoremipsumLoremipsumLorem... LoremipsumLoremipsumLoremipsumLoremipsumLorem...
</p> </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="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0"
src="../test-profile-image.jpg"
alt="DanConwayDev"
>
</div>
</div>
<div class="pl-0 inline-block">
DanConwayDev
</div>
</div>
</div>
</li>
</ul>
</div>
</div> </div>
`; `;
@ -76,69 +76,69 @@ 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
<div class="inline-block"> </a>
<div class="text-sm inline-block align-middle"> <p class="text-muted break-words pb-1 text-sm">
<div class="avatar inline-block align-middle"> short description
<div class="rounded inline-block h-3.5 w-3.5"> </p>
<img class="my-0" <div class="break-words text-right text-xs text-slate-400">
src="../test-profile-image.jpg" <ul class="reposummarycard inline svelte-18klqbq">
alt="Will" <li class="inline svelte-18klqbq">
> <div class="inline-block">
<div class="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0"
src="../test-profile-image.jpg"
alt="Will"
>
</div>
</div>
<div class="pl-0 inline-block">
Will
</div> </div>
</div>
<div class="pl-0 inline-block">
Will
</div> </div>
</div> </div>
</div> </li>
</div> <li class="inline svelte-18klqbq">
<div class="text-right"> <div class="inline-block">
<div class="inline-block"> <div class="text-xs inline-block align-middle">
<div class="text-sm 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" src="../test-profile-image.jpg"
src="../test-profile-image.jpg" alt="DanConwayDev"
alt="DanConwayDev" >
> </div>
</div>
<div class="pl-0 inline-block">
DanConwayDev
</div> </div>
</div>
<div class="pl-0 inline-block">
DanConwayDev
</div> </div>
</div> </div>
</div> </li>
</div> <li class="inline svelte-18klqbq">
<div class="text-right"> <div class="inline-block">
<div class="inline-block"> <div class="text-xs inline-block align-middle">
<div class="text-sm 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" src="../test-profile-image.jpg"
src="../test-profile-image.jpg" alt="sectore"
alt="sectore" >
> </div>
</div>
<div class="pl-0 inline-block">
sectore
</div> </div>
</div>
<div class="pl-0 inline-block">
sectore
</div> </div>
</div> </div>
</div> </li>
</div> </ul>
</p> </div>
<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">
<span>
</span>
<div class="text-right">
<div class="inline-block">
<div class="text-sm inline-block align-middle">
<div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5 skeleton">
</div>
</div>
<div class="pl-0 inline-block">
<div class="skeleton w-24 h-3">
</div>
</div>
</div>
</div>
</div>
</p>
<a class="link-primary break-words" <a class="link-primary break-words"
href="/repo/" href="/repo/"
> >
Untitled Untitled
</a> </a>
<p class="text-muted break-words text-sm"> <div class="break-words text-right text-xs text-slate-400">
</p> <ul class="reposummarycard inline svelte-18klqbq">
<li class="inline svelte-18klqbq">
<div class="inline-block">
<div class="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5 skeleton">
</div>
</div>
<div class="pl-0 inline-block">
<div class="skeleton w-24 h-2.5">
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div> </div>
`; `;
@ -178,35 +176,35 @@ 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">
<span>
</span>
<div class="text-right">
<div class="inline-block">
<div class="text-sm inline-block align-middle">
<div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0"
src="../test-profile-image.jpg"
alt="Will"
>
</div>
</div>
<div class="pl-0 inline-block">
Will
</div>
</div>
</div>
</div>
</p>
<a class="link-primary break-words" <a class="link-primary break-words"
href="/repo/" href="/repo/"
> >
Short Name Short Name
</a> </a>
<p class="text-muted break-words text-sm"> <p class="text-muted break-words pb-1 text-sm">
short description short description
</p> </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="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0"
src="../test-profile-image.jpg"
alt="Will"
>
</div>
</div>
<div class="pl-0 inline-block">
Will
</div>
</div>
</div>
</li>
</ul>
</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: 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

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

@ -11,168 +11,168 @@ 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">
<span>
</span>
<div class="text-right">
<div class="inline-block">
<div class="text-sm inline-block align-middle">
<div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0"
src="../test-profile-image.jpg"
alt="Will"
>
</div>
</div>
<div class="pl-0 inline-block">
Will
</div>
</div>
</div>
</div>
</p>
<a class="link-primary break-words" <a class="link-primary break-words"
href="/repo/" href="/repo/"
> >
Short Name Short Name
</a> </a>
<p class="text-muted break-words text-sm"> <p class="text-muted break-words pb-1 text-sm">
short description short description
</p> </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="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0"
src="../test-profile-image.jpg"
alt="Will"
>
</div>
</div>
<div class="pl-0 inline-block">
Will
</div>
</div>
</div>
</li>
</ul>
</div>
</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;"
> >
<p class="text-muted float-right break-words text-sm">
<span>
</span>
<div class="text-right">
<div class="inline-block">
<div class="text-sm inline-block align-middle">
<div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0"
src="../test-profile-image.jpg"
alt="Rather Long Display Name"
>
</div>
</div>
<div class="pl-0 inline-block">
Rather Long Display Name
</div>
</div>
</div>
</div>
</p>
<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... 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">
Lorem ipsum dolor sit amet, consectetur adipi... Lorem ipsum dolor sit amet, consectetur adipi...
</p> </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="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0"
src="../test-profile-image.jpg"
alt="Rather Long Display Name"
>
</div>
</div>
<div class="pl-0 inline-block">
Rather Long Display Name
</div>
</div>
</div>
</li>
</ul>
</div>
</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;"
> >
<p class="text-muted float-right break-words text-sm">
<span>
</span>
<div class="text-right">
<div class="inline-block">
<div class="text-sm inline-block align-middle">
<div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0"
src="../test-profile-image.jpg"
alt="DanConwayDev"
>
</div>
</div>
<div class="pl-0 inline-block">
DanConwayDev
</div>
</div>
</div>
</div>
</p>
<a class="link-primary break-words" <a class="link-primary break-words"
href="/repo/" href="/repo/"
> >
LongNameLongNameLongNameLongNameLongNameLongN... LongNameLongNameLongNameLongNameLongNameLongN...
</a> </a>
<p class="text-muted break-words text-sm"> <p class="text-muted break-words pb-1 text-sm">
LoremipsumLoremipsumLoremipsumLoremipsumLorem... LoremipsumLoremipsumLoremipsumLoremipsumLorem...
</p> </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="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0"
src="../test-profile-image.jpg"
alt="DanConwayDev"
>
</div>
</div>
<div class="pl-0 inline-block">
DanConwayDev
</div>
</div>
</div>
</li>
</ul>
</div>
</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: 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
<div class="inline-block"> </a>
<div class="text-sm inline-block align-middle"> <p class="text-muted break-words pb-1 text-sm">
<div class="avatar inline-block align-middle"> short description
<div class="rounded inline-block h-3.5 w-3.5"> </p>
<img class="my-0" <div class="break-words text-right text-xs text-slate-400">
src="../test-profile-image.jpg" <ul class="reposummarycard inline svelte-18klqbq">
alt="Will" <li class="inline svelte-18klqbq">
> <div class="inline-block">
<div class="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0"
src="../test-profile-image.jpg"
alt="Will"
>
</div>
</div>
<div class="pl-0 inline-block">
Will
</div> </div>
</div>
<div class="pl-0 inline-block">
Will
</div> </div>
</div> </div>
</div> </li>
</div> <li class="inline svelte-18klqbq">
<div class="text-right"> <div class="inline-block">
<div class="inline-block"> <div class="text-xs inline-block align-middle">
<div class="text-sm 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" src="../test-profile-image.jpg"
src="../test-profile-image.jpg" alt="DanConwayDev"
alt="DanConwayDev" >
> </div>
</div>
<div class="pl-0 inline-block">
DanConwayDev
</div> </div>
</div>
<div class="pl-0 inline-block">
DanConwayDev
</div> </div>
</div> </div>
</div> </li>
</div> <li class="inline svelte-18klqbq">
<div class="text-right"> <div class="inline-block">
<div class="inline-block"> <div class="text-xs inline-block align-middle">
<div class="text-sm 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" src="../test-profile-image.jpg"
src="../test-profile-image.jpg" alt="sectore"
alt="sectore" >
> </div>
</div>
<div class="pl-0 inline-block">
sectore
</div> </div>
</div>
<div class="pl-0 inline-block">
sectore
</div> </div>
</div> </div>
</div> </li>
</div> </ul>
</p> </div>
<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,102 +238,102 @@ 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
<div class="inline-block"> </a>
<div class="text-sm inline-block align-middle"> <p class="text-muted break-words pb-1 text-sm">
<div class="avatar inline-block align-middle"> short description
<div class="rounded inline-block h-3.5 w-3.5"> </p>
<img class="my-0" <div class="break-words text-right text-xs text-slate-400">
src="../test-profile-image.jpg" <ul class="reposummarycard inline svelte-18klqbq">
alt="Will" <li class="inline svelte-18klqbq">
> <div class="inline-block">
<div class="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0"
src="../test-profile-image.jpg"
alt="Will"
>
</div>
</div>
<div class="pl-0 inline-block">
Will
</div> </div>
</div>
<div class="pl-0 inline-block">
Will
</div> </div>
</div> </div>
</div> </li>
</div> <li class="inline svelte-18klqbq">
<div class="text-right"> <div class="inline-block">
<div class="inline-block"> <div class="text-xs inline-block align-middle">
<div class="text-sm 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" src="../test-profile-image.jpg"
src="../test-profile-image.jpg" alt="DanConwayDev"
alt="DanConwayDev" >
> </div>
</div>
<div class="pl-0 inline-block">
DanConwayDev
</div> </div>
</div>
<div class="pl-0 inline-block">
DanConwayDev
</div> </div>
</div> </div>
</div> </li>
</div> <li class="inline svelte-18klqbq">
<div class="text-right"> <div class="inline-block">
<div class="inline-block"> <div class="text-xs inline-block align-middle">
<div class="text-sm 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" src="../test-profile-image.jpg"
src="../test-profile-image.jpg" alt="sectore"
alt="sectore" >
> </div>
</div>
<div class="pl-0 inline-block">
sectore
</div> </div>
</div>
<div class="pl-0 inline-block">
sectore
</div> </div>
</div> </div>
</div> </li>
</div> </ul>
</p> </div>
<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 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">
<span>
</span>
<div class="text-right">
<div class="inline-block">
<div class="text-sm inline-block align-middle">
<div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0"
src="../test-profile-image.jpg"
alt="Rather Long Display Name"
>
</div>
</div>
<div class="pl-0 inline-block">
Rather Long Display Name
</div>
</div>
</div>
</div>
</p>
<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... 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">
Lorem ipsum dolor sit amet, consectetur adipi... Lorem ipsum dolor sit amet, consectetur adipi...
</p> </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="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0"
src="../test-profile-image.jpg"
alt="Rather Long Display Name"
>
</div>
</div>
<div class="pl-0 inline-block">
Rather Long Display Name
</div>
</div>
</div>
</li>
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -345,68 +345,68 @@ 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">
<span>
</span>
<div class="text-right">
<div class="inline-block">
<div class="text-sm inline-block align-middle">
<div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0"
src="../test-profile-image.jpg"
alt="Will"
>
</div>
</div>
<div class="pl-0 inline-block">
Will
</div>
</div>
</div>
</div>
</p>
<a class="link-primary break-words" <a class="link-primary break-words"
href="/repo/" href="/repo/"
> >
Short Name Short Name
</a> </a>
<p class="text-muted break-words text-sm"> <p class="text-muted break-words pb-1 text-sm">
short description short description
</p> </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="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0"
src="../test-profile-image.jpg"
alt="Will"
>
</div>
</div>
<div class="pl-0 inline-block">
Will
</div>
</div>
</div>
</li>
</ul>
</div>
</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;"
> >
<p class="text-muted float-right break-words text-sm">
<span>
</span>
<div class="text-right">
<div class="inline-block">
<div class="text-sm inline-block align-middle">
<div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0"
src="../test-profile-image.jpg"
alt="Rather Long Display Name"
>
</div>
</div>
<div class="pl-0 inline-block">
Rather Long Display Name
</div>
</div>
</div>
</div>
</p>
<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... 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">
Lorem ipsum dolor sit amet, consectetur adipi... Lorem ipsum dolor sit amet, consectetur adipi...
</p> </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="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0"
src="../test-profile-image.jpg"
alt="Rather Long Display Name"
>
</div>
</div>
<div class="pl-0 inline-block">
Rather Long Display Name
</div>
</div>
</div>
</li>
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -423,68 +423,68 @@ 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">
<span>
</span>
<div class="text-right">
<div class="inline-block">
<div class="text-sm inline-block align-middle">
<div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0"
src="../test-profile-image.jpg"
alt="Will"
>
</div>
</div>
<div class="pl-0 inline-block">
Will
</div>
</div>
</div>
</div>
</p>
<a class="link-primary break-words" <a class="link-primary break-words"
href="/repo/" href="/repo/"
> >
Short Name Short Name
</a> </a>
<p class="text-muted break-words text-sm"> <p class="text-muted break-words pb-1 text-sm">
short description short description
</p> </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="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0"
src="../test-profile-image.jpg"
alt="Will"
>
</div>
</div>
<div class="pl-0 inline-block">
Will
</div>
</div>
</div>
</li>
</ul>
</div>
</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;"
> >
<p class="text-muted float-right break-words text-sm">
<span>
</span>
<div class="text-right">
<div class="inline-block">
<div class="text-sm inline-block align-middle">
<div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0"
src="../test-profile-image.jpg"
alt="Rather Long Display Name"
>
</div>
</div>
<div class="pl-0 inline-block">
Rather Long Display Name
</div>
</div>
</div>
</div>
</p>
<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... 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">
Lorem ipsum dolor sit amet, consectetur adipi... Lorem ipsum dolor sit amet, consectetur adipi...
</p> </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="text-xs inline-block align-middle">
<div class="avatar inline-block align-middle">
<div class="rounded inline-block h-3.5 w-3.5">
<img class="my-0"
src="../test-profile-image.jpg"
alt="Rather Long Display Name"
>
</div>
</div>
<div class="pl-0 inline-block">
Rather Long Display Name
</div>
</div>
</div>
</li>
</ul>
</div>
</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;"

38
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}
{short_descrption} <p class="text-muted break-words pb-1 text-sm">
</p> {short_descrption}
</p>
{/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>
{/if} {/if}
</div> </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