Skip to content

Commit

Permalink
style: make avatars on drip-list-card clickable, add focus to avatar …
Browse files Browse the repository at this point in the history
…if alone
  • Loading branch information
evvvritt committed Sep 7, 2023
1 parent 2668c03 commit 16332f3
Show file tree
Hide file tree
Showing 4 changed files with 14 additions and 14 deletions.
8 changes: 4 additions & 4 deletions src/lib/components/drip-list-card/drip-list-card.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@
showIdentity: false,
outline: true,
size: 'medium',
disableLink: true,
disableTooltip: true,
},
})),
);
Expand All @@ -92,7 +92,7 @@
showIdentity: false,
outline: true,
size: 'medium',
disableLink: true,
disableTooltip: true,
},
})),
);
Expand All @@ -106,7 +106,7 @@
showIdentity: false,
outline: true,
size: 'medium',
disableLink: true,
disableTooltip: true,
},
});
}
Expand Down Expand Up @@ -210,7 +210,7 @@
{#if supportersPile && supportersPile.length > 0}
<div in:fade|local={{ duration: 300 }} class="supporters">
<span class="muted">Supported by</span>
<Pile components={supportersPile ?? []} />
<Pile components={supportersPile ?? []} itemsClickable={true} />
</div>
{/if}
</div>
Expand Down
5 changes: 4 additions & 1 deletion src/lib/components/identity-badge/identity-badge.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,10 @@
this={getLink() ? 'a' : 'span'}
href={getLink()}
target={linkToNewTab ? '_blank' : undefined}
class="identity-badge flex items-center relative text-left text-foreground tabular-nums"
class="identity-badge flex items-center relative text-left text-foreground tabular-nums {showAvatar &&
!showIdentity
? 'focus-visible:ring-8 focus-visible:ring-primary-level-1 rounded-full'
: ''}"
class:flex-row-reverse={isReverse}
class:select-none={disableSelection}
style:height={showAvatar ? `${currentSize}px` : ''}
Expand Down
6 changes: 2 additions & 4 deletions src/lib/components/pile/pile.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
export let transitionedOut = false;
export let maxItems = 4;
export let itemsClickable = false;
export let components: {
component: typeof SvelteComponent;
Expand All @@ -26,6 +27,7 @@
{#if !transitionedOut}
<div
class="item"
class:pointer-events-none={!itemsClickable}
out:fly|local={{
y: 16,
duration: 200,
Expand Down Expand Up @@ -71,10 +73,6 @@
align-items: center;
}
.pile .item {
pointer-events: none;
}
.pile .item:not(:first-child) {
margin-left: -0.5rem;
}
Expand Down
9 changes: 4 additions & 5 deletions src/lib/components/user-avatar/user-avatar.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,15 @@
<div class="avatar" style:height={currentSize} style:width={currentSize}>
{#if src}
<img
class:with-outline={outline}
class:outlined={outline}
bind:this={imgElem}
alt="user avatar"
{src}
on:load={() => (loaded = true)}
/>
{/if}
<img
class:with-outline={outline}
class:outlined={outline}
class="placeholder"
src={placeholderSrc}
alt="user avatar placeholder"
Expand All @@ -33,7 +33,6 @@
<style>
.avatar {
position: relative;
margin: 1px;
flex-shrink: 0;
}
Expand All @@ -48,8 +47,8 @@
box-sizing: border-box;
}
img.with-outline {
border: 1px solid var(--color-foreground);
img.outlined {
box-shadow: var(--elevation-low);
}
.placeholder {
Expand Down

0 comments on commit 16332f3

Please sign in to comment.