Merge pull request #23 from cmintey/item-card-fixes

improved the layout of item cards, especially for mobile
cmintey · Feb 13, 2023 · c178413 · c178413
2 parents c323a7e + fb71a64
commit c178413
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 24 deletions.
diff --git a/src/lib/components/PasswordInput.svelte b/src/lib/components/PasswordInput.svelte
@@ -5,7 +5,7 @@
 	export let required = false;
 	export let autocomplete: string | null | undefined = undefined;
 	export let error = false;
-	export let value: string | null | undefined = undefined;
+	export let value: string | null | undefined = "";
 
 	let visible = false;
 

diff --git a/src/lib/components/wishlists/ItemCard.svelte b/src/lib/components/wishlists/ItemCard.svelte
@@ -18,11 +18,11 @@
 			name: string;
 		} | null;
 	};
-
 	export let user: {
 		username: string;
 		userId: string;
 	};
+	export let showFor = false;
 
 	let image_url: string;
 
@@ -166,36 +166,37 @@
 </script>
 
 <div class="card" class:variant-ghost-warning={!item.approved}>
-	<div class="p-4 flex flex-row space-x-4">
-		{#if image_url}
-			<div>
-				<img src={image_url} alt="product" class="w-24 md:w-32" />
-			</div>
-		{/if}
-		<div
-			class="flex flex-col px-0 md:px-1 w-full"
-			class:w-[calc(100%-7rem)]={image_url}
-			class:md:w-[calc(100%-8rem)]={image_url}
-		>
-			<span class="truncate hover:whitespace-normal font-bold text-2xl">
+	<div class="flex flex-col space-y-2 p-4">
+		<div class="flex w-full">
+			<span class="truncate font-bold text-2xl">
 				{#if item.url}
 					<a class="dark:!text-primary-200" href={item.url}>{item.name}</a>
 				{:else}
 					{item.name}
 				{/if}
 			</span>
+		</div>
 
-			{#if item.price}
-				<span class="text-lg font-semibold">${item.price}</span>
+		<div class="flex flex-row space-x-2">
+			{#if image_url}
+				<img src={image_url} alt="product" class="w-36" />
 			{/if}
 
-			<span class="text-lg">
-				Added by <span class="text-primary-700-200-token font-bold">{item.addedBy?.name}</span>
-				{#if item.user?.name}
-					for <span class="text-secondary-700-200-token font-bold">{item.user.name}</span>
+			<div class="flex flex-col">
+				{#if item.price}
+					<span class="text-lg font-semibold">${item.price}</span>
 				{/if}
-			</span>
-			<p>{item.note}</p>
+
+				<span class="text-lg">
+					{#if showFor}
+						For <span class="text-secondary-700-200-token font-bold">{item.user?.name}</span>
+					{:else}
+						Added by <span class="text-secondary-700-200-token font-bold">{item.addedBy?.name}</span
+						>
+					{/if}
+				</span>
+				<p>{item.note}</p>
+			</div>
 		</div>
 	</div>
 

diff --git a/src/routes/pledges/+page.svelte b/src/routes/pledges/+page.svelte
@@ -14,7 +14,7 @@
 {:else}
 	<div class="flex flex-col space-y-4">
 		{#each data.items as item}
-			<ItemCard {item} user={data.user} />
+			<ItemCard {item} user={data.user} showFor />
 		{/each}
 	</div>
 {/if}
diff --git a/src/routes/wishlists/[username]/+page.svelte b/src/routes/wishlists/[username]/+page.svelte
@@ -78,12 +78,15 @@
 			<ItemCard {item} user={data.user} />
 		{/each}
 	</div>
+	<footer>
+		<div class="h-16" />
+	</footer>
 {/if}
 
 <!-- Add Item button -->
 {#if data.listOwner.isMe || data.suggestionsEnabled}
 	<button
-		class="btn variant-filled w-16 h-16 rounded-full fixed z-90 bottom-10 right-8"
+		class="btn variant-ghost-surface w-16 h-16 rounded-full fixed z-90 bottom-4 right-4 md:bottom-10 md:right-10"
 		on:click={() => goto(`${$page.url}/new`)}
 	>
 		<iconify-icon icon="ri:add-fill" width="32" height="32" />