tweak: tweak styling on tiny cards

PluralKit · Oct 4, 2024 · 9e8080b · 9e8080b
1 parent df829ef
commit 9e8080b
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 14 deletions.
diff --git a/src/components/dash/groups/GroupList.svelte b/src/components/dash/groups/GroupList.svelte
@@ -63,12 +63,10 @@
     />
   {/each}
 {:else if list.settings.view.type === ViewType.TINY}
-  <div class="flex justify-center">
-    <div
-      class={`grid justify-start mx-auto w-full gap-3 grid-cols-2 max-w-96 sm:max-w-none sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 ${!wide ? "xl:grid-cols-4" : ""}`}
-    >
+  <div class="max-w-96 sm:max-w-none mx-auto px-8 sm:px-0">
+    <div class="w-full justify-start flex flex-wrap">
       {#each list.list.paginated as group (group.uuid)}
-        <GroupTiny {group} asPage={false} />
+        <GroupTiny {group} asPage={false} {wide} />
       {/each}
     </div>
   </div>

diff --git a/src/components/dash/groups/GroupTiny.svelte b/src/components/dash/groups/GroupTiny.svelte
@@ -1,14 +1,17 @@
 <script lang="ts">
   import type { Group } from "$api/types"
   import { page } from "$app/stores"
+  import { dash } from "$lib/dash/dash.svelte"
   import { IconLock, IconShare, IconUser } from "@tabler/icons-svelte"
 
   let {
     group,
     asPage,
+    wide = dash.settings.display?.forceControlsAtTop === true,
   }: {
     group: Group
     asPage: boolean
+    wide?: boolean
   } = $props()
 
   let params = $page.url.searchParams
@@ -24,12 +27,15 @@
 </script>
 
 <a
-  class={`max-w-32 self-stretch flex flex-col`}
+  class={`
+    center-small
+    self-stretch flex flex-col w-1/2 sm:w-1/4 md:w-1/5 lg:w-1/6 ${!wide ? "xl:w-1/5" : ""}
+  `}
   href={link()}
   aria-label={asPage ? "View group list" : "View group page"}
 >
   <div
-    class="box rounded-lg flex flex-col gap-2 p-0 transition-all hover:scale-105 h-full"
+    class="box rounded-lg m-1 flex flex-col gap-2 p-0 transition-all hover:scale-105 h-full"
     style={group.color ? `border: 4px solid #${group.color}` : ""}
   >
     {#if group.icon}
@@ -55,3 +61,13 @@
     </div>
   </div>
 </a>
+
+<style>
+  @media (max-width: 399px) {
+    .center-small {
+      margin: 0 auto;
+      width: 100%;
+      max-width: 10rem;
+    }
+  }
+</style>
diff --git a/src/components/dash/members/MemberList.svelte b/src/components/dash/members/MemberList.svelte
@@ -61,12 +61,10 @@
     />
   {/each}
 {:else if list.settings.view.type === ViewType.TINY}
-  <div class="flex justify-center">
-    <div
-      class={`grid justify-start mx-auto w-full gap-3 grid-cols-2 max-w-96 sm:max-w-none sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 ${!wide ? "xl:grid-cols-4" : ""}`}
-    >
+  <div class="max-w-96 sm:max-w-none mx-auto px-8 sm:px-0">
+    <div class="w-full justify-start flex flex-wrap">
       {#each list.list.paginated as member (member.uuid)}
-        <MemberTiny {member} asPage={false} />
+        <MemberTiny {member} asPage={false} {wide} />
       {/each}
     </div>
   </div>

diff --git a/src/components/dash/members/MemberTiny.svelte b/src/components/dash/members/MemberTiny.svelte
@@ -1,14 +1,17 @@
 <script lang="ts">
   import type { Member } from "$api/types"
   import { page } from "$app/stores"
+  import { dash } from "$lib/dash/dash.svelte"
   import { IconLock, IconShare, IconUser } from "@tabler/icons-svelte"
 
   let {
     member,
     asPage,
+    wide = dash.settings.display?.forceControlsAtTop === true,
   }: {
     member: Member
     asPage: boolean
+    wide?: boolean
   } = $props()
 
   let params = $page.url.searchParams
@@ -24,12 +27,15 @@
 </script>
 
 <a
-  class={`self-stretch flex flex-col`}
+  class={`
+    center-small
+    self-stretch flex flex-col w-1/2 sm:w-1/4 md:w-1/5 lg:w-1/6 ${!wide ? "xl:w-1/5" : ""}
+  `}
   href={link()}
   aria-label={asPage ? "View member list" : "View member page"}
 >
   <div
-    class="box rounded-lg flex flex-col gap-2 p-0 transition-all hover:scale-105 h-full"
+    class="box rounded-lg m-1 flex flex-col gap-2 p-0 transition-all hover:scale-105 h-full"
     style={member.color ? `border: 4px solid #${member.color}` : ""}
   >
     {#if member.avatar_url || member.webhook_avatar_url}
@@ -59,3 +65,13 @@
     </div>
   </div>
 </a>
+
+<style>
+  @media (max-width: 399px) {
+    .center-small {
+      margin: 0 auto;
+      width: 100%;
+      max-width: 10rem;
+    }
+  }
+</style>