Browse Source

fix: align UserHeader with inline text

the text was previously a few pixels below the line
master
DanConwayDev 2 years ago
parent
commit
65ad8e5aac
No known key found for this signature in database
GPG Key ID: 68E15486D73F75E1
  1. 14
      __snapshots__/repo-summary-card.test.js.snap
  2. BIN
      __snapshots__/repo-summary-list--default.png
  3. BIN
      __snapshots__/repo-summary-list--multiple-maintainers.png
  4. BIN
      __snapshots__/repo-summary-list--no-title.png
  5. BIN
      __snapshots__/repo-summary-list--partially-loaded.png
  6. 28
      __snapshots__/repo-summary-list.test.js.snap
  7. BIN
      __snapshots__/users-header--inline-loading.png
  8. 12
      __snapshots__/users-header.test.js.snap
  9. 1
      src/lib/components/users/UserHeader.svelte

14
__snapshots__/repo-summary-card.test.js.snap

@ -16,7 +16,7 @@ exports[`Repo/Summary/Card Long Details smoke-test 1`] = `
<ul class="reposummarycard inline svelte-18klqbq"> <ul class="reposummarycard inline svelte-18klqbq">
<li class="inline svelte-18klqbq"> <li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-xs inline-block align-middle"> <div class="text-xs 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"
@ -52,7 +52,7 @@ exports[`Repo/Summary/Card Long and No Spaces smoke-test 1`] = `
<ul class="reposummarycard inline svelte-18klqbq"> <ul class="reposummarycard inline svelte-18klqbq">
<li class="inline svelte-18klqbq"> <li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-xs inline-block align-middle"> <div class="text-xs 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"
@ -88,7 +88,7 @@ exports[`Repo/Summary/Card Multiple Maintainers smoke-test 1`] = `
<ul class="reposummarycard inline svelte-18klqbq"> <ul class="reposummarycard inline svelte-18klqbq">
<li class="inline svelte-18klqbq"> <li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-xs inline-block align-middle"> <div class="text-xs 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"
@ -105,7 +105,7 @@ exports[`Repo/Summary/Card Multiple Maintainers smoke-test 1`] = `
</li> </li>
<li class="inline svelte-18klqbq"> <li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-xs inline-block align-middle"> <div class="text-xs 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"
@ -122,7 +122,7 @@ exports[`Repo/Summary/Card Multiple Maintainers smoke-test 1`] = `
</li> </li>
<li class="inline svelte-18klqbq"> <li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-xs inline-block align-middle"> <div class="text-xs 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"
@ -155,7 +155,7 @@ exports[`Repo/Summary/Card No Details smoke-test 1`] = `
<ul class="reposummarycard inline svelte-18klqbq"> <ul class="reposummarycard inline svelte-18klqbq">
<li class="inline svelte-18klqbq"> <li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-xs inline-block align-middle"> <div class="text-xs 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>
@ -188,7 +188,7 @@ exports[`Repo/Summary/Card Short Details smoke-test 1`] = `
<ul class="reposummarycard inline svelte-18klqbq"> <ul class="reposummarycard inline svelte-18klqbq">
<li class="inline svelte-18klqbq"> <li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-xs inline-block align-middle"> <div class="text-xs 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"

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 48 KiB

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 31 KiB

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 24 KiB

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB

28
__snapshots__/repo-summary-list.test.js.snap

@ -23,7 +23,7 @@ exports[`Repo/Summary/List Default smoke-test 1`] = `
<ul class="reposummarycard inline svelte-18klqbq"> <ul class="reposummarycard inline svelte-18klqbq">
<li class="inline svelte-18klqbq"> <li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-xs inline-block align-middle"> <div class="text-xs 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"
@ -56,7 +56,7 @@ exports[`Repo/Summary/List Default smoke-test 1`] = `
<ul class="reposummarycard inline svelte-18klqbq"> <ul class="reposummarycard inline svelte-18klqbq">
<li class="inline svelte-18klqbq"> <li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-xs inline-block align-middle"> <div class="text-xs 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"
@ -89,7 +89,7 @@ exports[`Repo/Summary/List Default smoke-test 1`] = `
<ul class="reposummarycard inline svelte-18klqbq"> <ul class="reposummarycard inline svelte-18klqbq">
<li class="inline svelte-18klqbq"> <li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-xs inline-block align-middle"> <div class="text-xs 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"
@ -122,7 +122,7 @@ exports[`Repo/Summary/List Default smoke-test 1`] = `
<ul class="reposummarycard inline svelte-18klqbq"> <ul class="reposummarycard inline svelte-18klqbq">
<li class="inline svelte-18klqbq"> <li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-xs inline-block align-middle"> <div class="text-xs 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"
@ -139,7 +139,7 @@ exports[`Repo/Summary/List Default smoke-test 1`] = `
</li> </li>
<li class="inline svelte-18klqbq"> <li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-xs inline-block align-middle"> <div class="text-xs 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"
@ -156,7 +156,7 @@ exports[`Repo/Summary/List Default smoke-test 1`] = `
</li> </li>
<li class="inline svelte-18klqbq"> <li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-xs inline-block align-middle"> <div class="text-xs 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"
@ -250,7 +250,7 @@ exports[`Repo/Summary/List Multiple Maintainers smoke-test 1`] = `
<ul class="reposummarycard inline svelte-18klqbq"> <ul class="reposummarycard inline svelte-18klqbq">
<li class="inline svelte-18klqbq"> <li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-xs inline-block align-middle"> <div class="text-xs 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"
@ -267,7 +267,7 @@ exports[`Repo/Summary/List Multiple Maintainers smoke-test 1`] = `
</li> </li>
<li class="inline svelte-18klqbq"> <li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-xs inline-block align-middle"> <div class="text-xs 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"
@ -284,7 +284,7 @@ exports[`Repo/Summary/List Multiple Maintainers smoke-test 1`] = `
</li> </li>
<li class="inline svelte-18klqbq"> <li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-xs inline-block align-middle"> <div class="text-xs 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"
@ -317,7 +317,7 @@ exports[`Repo/Summary/List Multiple Maintainers smoke-test 1`] = `
<ul class="reposummarycard inline svelte-18klqbq"> <ul class="reposummarycard inline svelte-18klqbq">
<li class="inline svelte-18klqbq"> <li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-xs inline-block align-middle"> <div class="text-xs 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"
@ -357,7 +357,7 @@ exports[`Repo/Summary/List No Title smoke-test 1`] = `
<ul class="reposummarycard inline svelte-18klqbq"> <ul class="reposummarycard inline svelte-18klqbq">
<li class="inline svelte-18klqbq"> <li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-xs inline-block align-middle"> <div class="text-xs 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"
@ -390,7 +390,7 @@ exports[`Repo/Summary/List No Title smoke-test 1`] = `
<ul class="reposummarycard inline svelte-18klqbq"> <ul class="reposummarycard inline svelte-18klqbq">
<li class="inline svelte-18klqbq"> <li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-xs inline-block align-middle"> <div class="text-xs 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"
@ -435,7 +435,7 @@ exports[`Repo/Summary/List Partially Loaded smoke-test 1`] = `
<ul class="reposummarycard inline svelte-18klqbq"> <ul class="reposummarycard inline svelte-18klqbq">
<li class="inline svelte-18klqbq"> <li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-xs inline-block align-middle"> <div class="text-xs 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"
@ -468,7 +468,7 @@ exports[`Repo/Summary/List Partially Loaded smoke-test 1`] = `
<ul class="reposummarycard inline svelte-18klqbq"> <ul class="reposummarycard inline svelte-18klqbq">
<li class="inline svelte-18klqbq"> <li class="inline svelte-18klqbq">
<div class="inline-block"> <div class="inline-block">
<div class="text-xs inline-block align-middle"> <div class="text-xs 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"

BIN
__snapshots__/users-header--inline-loading.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.7 KiB

After

Width:  |  Height:  |  Size: 5.7 KiB

12
__snapshots__/users-header.test.js.snap

@ -56,7 +56,7 @@ exports[`Users/Header extra small smoke-test 1`] = `
exports[`Users/Header inline extra small loading smoke-test 1`] = ` exports[`Users/Header inline extra small loading smoke-test 1`] = `
<div class="inline-block"> <div class="inline-block">
<div class="text-xs inline-block align-middle"> <div class="text-xs 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>
@ -71,7 +71,7 @@ exports[`Users/Header inline extra small loading smoke-test 1`] = `
exports[`Users/Header inline extra small smoke-test 1`] = ` exports[`Users/Header inline extra small smoke-test 1`] = `
<div class="inline-block"> <div class="inline-block">
<div class="text-xs inline-block align-middle"> <div class="text-xs 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"
@ -89,7 +89,7 @@ exports[`Users/Header inline extra small smoke-test 1`] = `
exports[`Users/Header inline loading smoke-test 1`] = ` exports[`Users/Header inline loading smoke-test 1`] = `
<div class="inline-block"> <div class="inline-block">
<div class="text-md inline-block align-middle"> <div class="text-md align-middle">
<div class="avatar inline-block align-middle"> <div class="avatar inline-block align-middle">
<div class="rounded inline-block h-5 w-5 skeleton"> <div class="rounded inline-block h-5 w-5 skeleton">
</div> </div>
@ -104,7 +104,7 @@ exports[`Users/Header inline loading smoke-test 1`] = `
exports[`Users/Header inline small loading smoke-test 1`] = ` exports[`Users/Header inline small loading smoke-test 1`] = `
<div class="inline-block"> <div class="inline-block">
<div class="text-sm inline-block align-middle"> <div class="text-sm 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>
@ -119,7 +119,7 @@ exports[`Users/Header inline small loading smoke-test 1`] = `
exports[`Users/Header inline small smoke-test 1`] = ` exports[`Users/Header inline small smoke-test 1`] = `
<div class="inline-block"> <div class="inline-block">
<div class="text-sm inline-block align-middle"> <div class="text-sm 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"
@ -137,7 +137,7 @@ exports[`Users/Header inline small smoke-test 1`] = `
exports[`Users/Header inline smoke-test 1`] = ` exports[`Users/Header inline smoke-test 1`] = `
<div class="inline-block"> <div class="inline-block">
<div class="text-md inline-block align-middle"> <div class="text-md align-middle">
<div class="avatar inline-block align-middle"> <div class="avatar inline-block align-middle">
<div class="rounded inline-block h-5 w-5"> <div class="rounded inline-block h-5 w-5">
<img class="my-0" <img class="my-0"

1
src/lib/components/users/UserHeader.svelte

@ -20,7 +20,6 @@
class:text-xs={size === 'xs'} class:text-xs={size === 'xs'}
class:text-sm={size === 'sm'} class:text-sm={size === 'sm'}
class:text-md={size === 'md'} class:text-md={size === 'md'}
class:inline-block={inline}
class:align-middle={inline} class:align-middle={inline}
class:flex={!inline} class:flex={!inline}
class:items-center={!inline} class:items-center={!inline}

Loading…
Cancel
Save