style: make avatars on drip-list-card clickable, add focus to avatar …

…if alone
drips-network · Sep 7, 2023 · 16332f3 · 16332f3
1 parent 2668c03
commit 16332f3
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 14 deletions.
diff --git a/src/lib/components/drip-list-card/drip-list-card.svelte b/src/lib/components/drip-list-card/drip-list-card.svelte
@@ -69,7 +69,7 @@
           showIdentity: false,
           outline: true,
           size: 'medium',
-          disableLink: true,
+          disableTooltip: true,
         },
       })),
     );
@@ -92,7 +92,7 @@
           showIdentity: false,
           outline: true,
           size: 'medium',
-          disableLink: true,
+          disableTooltip: true,
         },
       })),
     );
@@ -106,7 +106,7 @@
           showIdentity: false,
           outline: true,
           size: 'medium',
-          disableLink: true,
+          disableTooltip: true,
         },
       });
     }
@@ -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>

diff --git a/src/lib/components/identity-badge/identity-badge.svelte b/src/lib/components/identity-badge/identity-badge.svelte
@@ -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` : ''}

diff --git a/src/lib/components/pile/pile.svelte b/src/lib/components/pile/pile.svelte
@@ -7,6 +7,7 @@
   export let transitionedOut = false;
 
   export let maxItems = 4;
+  export let itemsClickable = false;
 
   export let components: {
     component: typeof SvelteComponent;
@@ -26,6 +27,7 @@
       {#if !transitionedOut}
         <div
           class="item"
+          class:pointer-events-none={!itemsClickable}
           out:fly|local={{
             y: 16,
             duration: 200,
@@ -71,10 +73,6 @@
     align-items: center;
   }
 
-  .pile .item {
-    pointer-events: none;
-  }
-
   .pile .item:not(:first-child) {
     margin-left: -0.5rem;
   }

diff --git a/src/lib/components/user-avatar/user-avatar.svelte b/src/lib/components/user-avatar/user-avatar.svelte
@@ -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"
@@ -33,7 +33,6 @@
 <style>
   .avatar {
     position: relative;
-    margin: 1px;
     flex-shrink: 0;
   }
 
@@ -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 {