Merge pull request #1206 from rainlanguage/01-22-2024-ListViewOrderbo…

…okFilters-responsive Vaults and orders routes responsive styles.
rainlanguage · Jan 24, 2025 · 5b19f72 · 5b19f72
2 parents 6fdbbea + 0906bac
commit 5b19f72
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 45 deletions.
diff --git a/packages/ui-components/src/lib/components/ListViewOrderbookFilters.svelte b/packages/ui-components/src/lib/components/ListViewOrderbookFilters.svelte
@@ -20,14 +20,17 @@
 	export let isOrdersPage: boolean;
 </script>
 
-<div class="flex min-w-[600px] items-center justify-end gap-x-2">
+<div
+	class="grid w-full items-center gap-4 md:flex md:justify-end lg:min-w-[600px]"
+	style="grid-template-columns: repeat(2, minmax(0, 1fr));"
+>
 	{#if isEmpty($settings?.networks)}
-		<Alert color="gray" data-testid="no-networks-alert">
+		<Alert color="gray" data-testid="no-networks-alert" class="w-full">
 			No networks added to <a class="underline" href="/settings">settings</a>
 		</Alert>
 	{:else}
 		{#if isVaultsPage}
-			<div class="mt-4">
+			<div class="mt-4 w-full lg:w-auto">
 				<CheckboxZeroBalanceVault {hideZeroBalanceVaults} />
 			</div>
 		{/if}

diff --git a/packages/ui-components/src/lib/components/TanstackAppTable.svelte b/packages/ui-components/src/lib/components/TanstackAppTable.svelte
@@ -32,7 +32,7 @@
 	</div>
 {:else if $query.data}
 	<Table
-		divClass="cursor-pointer rounded-lg overflow-hidden dark:border-none border"
+		divClass="cursor-pointer rounded-lg lg:overflow-hidden overflow-auto dark:border-none border"
 		hoverable={rowHoverable}
 	>
 		<TableHead data-testid="head">
@@ -42,6 +42,7 @@
 			{#each $query.data?.pages as page}
 				{#each page as item}
 					<TableBodyRow
+						class="whitespace-nowrap"
 						data-testid="bodyRow"
 						on:click={() => {
 							dispatch('clickRow', { item });

diff --git a/packages/ui-components/src/lib/components/input/InputOrderHash.svelte b/packages/ui-components/src/lib/components/input/InputOrderHash.svelte
@@ -13,7 +13,7 @@
 
 <div data-testid="order-hash-input" class="flex flex-col gap-x-2">
 	<Label>Order Hash</Label>
-	<div class="w-32">
+	<div class="w-full lg:w-32">
 		<input
 			type="text"
 			bind:value

diff --git a/packages/ui-components/src/lib/components/tables/VaultsListTable.svelte b/packages/ui-components/src/lib/components/tables/VaultsListTable.svelte
@@ -18,6 +18,7 @@
 		type VaultWithSubgraphName
 	} from '@rainlanguage/orderbook/js_api';
 	import type { Writable, Readable } from 'svelte/store';
+
 	export let activeOrderbook: Readable<OrderbookConfigSource | undefined>;
 	export let subgraphUrl: Readable<string | undefined>;
 	export let orderHash: Writable<string>;
@@ -90,6 +91,17 @@
 </script>
 
 {#if $query}
+	<ListViewOrderbookFilters
+		{activeSubgraphs}
+		{settings}
+		{accounts}
+		{activeAccountsItems}
+		{activeOrderStatus}
+		{orderHash}
+		{hideZeroBalanceVaults}
+		{isVaultsPage}
+		{isOrdersPage}
+	/>
 	<AppTable
 		{query}
 		emptyMessage="No Vaults Found"
@@ -99,7 +111,7 @@
 		}}
 	>
 		<svelte:fragment slot="title">
-			<div class="flex w-full justify-between py-4">
+			<div class="mt-2 flex w-full justify-between">
 				<div class="flex items-center gap-x-6">
 					<div class="text-3xl font-medium dark:text-white">Vaults</div>
 					{#if handleDepositGenericModal}
@@ -110,23 +122,11 @@
 							data-testid="new-vault-button"
 							on:click={() => {
 								handleDepositGenericModal();
-							}}>New vault</Button
-						>
+							}}
+							>New vault
+						</Button>
 					{/if}
 				</div>
-				<div class="flex flex-col items-end gap-y-2">
-					<ListViewOrderbookFilters
-						{activeSubgraphs}
-						{settings}
-						{accounts}
-						{activeAccountsItems}
-						{activeOrderStatus}
-						{orderHash}
-						{hideZeroBalanceVaults}
-						{isVaultsPage}
-						{isOrdersPage}
-					/>
-				</div>
 			</div>
 		</svelte:fragment>
 		<svelte:fragment slot="head">
@@ -145,15 +145,15 @@
 				{item.subgraphName}
 			</TableBodyCell>
 
-			<TableBodyCell tdClass="break-all px-4 py-4" data-testid="vault-id"
-				>{bigintStringToHex(item.vault.vaultId)}</TableBodyCell
-			>
-			<TableBodyCell tdClass="break-all px-4 py-2 min-w-48" data-testid="vault-orderbook"
-				><Hash type={HashType.Identifier} value={item.vault.orderbook.id} /></TableBodyCell
-			>
-			<TableBodyCell tdClass="break-all px-4 py-2 min-w-48" data-testid="vault-owner"
-				><Hash type={HashType.Wallet} value={item.vault.owner} /></TableBodyCell
-			>
+			<TableBodyCell tdClass="break-all px-4 py-4" data-testid="vault-id">
+				<Hash type={HashType.Identifier} value={bigintStringToHex(item.vault.vaultId)} />
+			</TableBodyCell>
+			<TableBodyCell tdClass="break-all px-4 py-2 min-w-48" data-testid="vault-orderbook">
+				<Hash type={HashType.Identifier} value={item.vault.orderbook.id} />
+			</TableBodyCell>
+			<TableBodyCell tdClass="break-all px-4 py-2 min-w-48" data-testid="vault-owner">
+				<Hash type={HashType.Wallet} value={item.vault.owner} />
+			</TableBodyCell>
 			<TableBodyCell tdClass="break-word p-2 min-w-48" data-testid="vault-token"
 				>{item.vault.token.name}</TableBodyCell
 			>
@@ -174,12 +174,9 @@
 									updateActiveNetworkAndOrderbook(item.subgraphName);
 									goto(`/orders/${order.id}`);
 								}}
-								><Hash
-									type={HashType.Identifier}
-									value={order.orderHash}
-									copyOnClick={false}
-								/></Button
 							>
+								<Hash type={HashType.Identifier} value={order.orderHash} copyOnClick={false} />
+							</Button>
 						{/each}
 						{#if item.vault.ordersAsInput.length > 3}...{/if}
 					</div>
@@ -198,12 +195,9 @@
 									updateActiveNetworkAndOrderbook(item.subgraphName);
 									goto(`/orders/${order.id}`);
 								}}
-								><Hash
-									type={HashType.Identifier}
-									value={order.orderHash}
-									copyOnClick={false}
-								/></Button
 							>
+								<Hash type={HashType.Identifier} value={order.orderHash} copyOnClick={false} />
+							</Button>
 						{/each}
 						{#if item.vault.ordersAsOutput.length > 3}...{/if}
 					</div>
@@ -237,15 +231,17 @@
 							on:click={(e) => {
 								e.stopPropagation();
 								handleDepositModal(item.vault, $query.refetch);
-							}}>Deposit</DropdownItem
-						>
+							}}
+							>Deposit
+						</DropdownItem>
 						<DropdownItem
 							data-testid="withdraw-button"
 							on:click={(e) => {
 								e.stopPropagation();
 								handleWithdrawModal(item.vault, $query.refetch);
-							}}>Withdraw</DropdownItem
-						>
+							}}
+							>Withdraw
+						</DropdownItem>
 					</Dropdown>
 				{/if}
 			{/if}

diff --git a/packages/webapp/src/routes/+layout.svelte b/packages/webapp/src/routes/+layout.svelte
@@ -16,7 +16,7 @@
 <QueryClientProvider client={queryClient}>
 	<div class="flex min-h-screen w-full justify-start bg-white dark:bg-gray-900 dark:text-gray-400">
 		<Sidebar {colorTheme} page={$page} />
-		<main class="mx-auto h-full w-full grow overflow-x-auto pl-20 pt-8 lg:ml-64 lg:p-8">
+		<main class="mx-auto h-full w-full grow overflow-x-auto px-4 pt-14 lg:ml-64 lg:p-8">
 			<slot />
 		</main>
 	</div>