Merge pull request #1854 from dusk-network/feature-1747

explorer: refactor client width check to use css
dusk-network · Jun 18, 2024 · 532f0d1 · 532f0d1
2 parents df7f8ca + ee572e7
commit 532f0d1
Show file tree

Hide file tree

Showing 13 changed files with 18,002 additions and 1,207 deletions.
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/BlocksCard.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/BlocksCard.spec.js.snap
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/TransactionsCard.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/TransactionsCard.spec.js.snap
diff --git a/explorer/src/lib/components/blocks-card/BlocksCard.svelte b/explorer/src/lib/components/blocks-card/BlocksCard.svelte
@@ -18,9 +18,6 @@
 
   let itemsToDisplay = ITEMS_TO_DISPLAY;
 
-  /** @type {number} */
-  let clientWidth;
-
   /** @type {Block[]}*/
   let displayedBlocks;
 
@@ -45,7 +42,6 @@
   }
 </script>
 
-<svelte:window bind:outerWidth={clientWidth} />
 <DataCard
   on:retry
   data={blocks}
@@ -58,13 +54,14 @@
     label: "Show More",
   }}
 >
-  {#if clientWidth > 768}
-    <BlocksTable data={displayedBlocks} className="blocks-card__table" />
-  {:else}
-    <div class="blocks-card__list">
-      {#each displayedBlocks as block (block)}
-        <BlocksList data={block} />
-      {/each}
-    </div>
-  {/if}
+  <BlocksTable
+    data={displayedBlocks}
+    className="blocks-card__table mobile-hidden"
+  />
+
+  <div class="blocks-card__list desktop-hidden">
+    {#each displayedBlocks as block (block)}
+      <BlocksList data={block} />
+    {/each}
+  </div>
 </DataCard>
diff --git a/explorer/src/lib/components/latest-blocks-card/LatestBlocksCard.svelte b/explorer/src/lib/components/latest-blocks-card/LatestBlocksCard.svelte
@@ -17,13 +17,9 @@
   /** @type {Boolean} */
   export let loading;
 
-  /** @type {number} */
-  let clientWidth;
-
   $: classes = makeClassName(["latest-blocks-card", className]);
 </script>
 
-<svelte:window bind:outerWidth={clientWidth} />
 <DataCard
   on:retry
   data={blocks}
@@ -37,11 +33,11 @@
     label: "All Blocks",
   }}
 >
-  {#if clientWidth > 768}
-    <BlocksTable data={blocks} />
-  {:else}
+  <BlocksTable data={blocks} className="mobile-hidden" />
+
+  <div class="desktop-hidden">
     {#each blocks as block (block)}
       <BlocksList data={block} />
     {/each}
-  {/if}
+  </div>
 </DataCard>
diff --git a/explorer/src/lib/components/latest-transactions-card/LatestTransactionsCard.svelte b/explorer/src/lib/components/latest-transactions-card/LatestTransactionsCard.svelte
@@ -21,16 +21,12 @@
   /** @type {Boolean} */
   export let loading;
 
-  /** @type {number} */
-  let clientWidth;
-
   /** @type {Boolean} */
   export let isOnHomeScreen = true;
 
   $: classes = makeClassName(["latest-transactions-card", className]);
 </script>
 
-<svelte:window bind:outerWidth={clientWidth} />
 <DataCard
   on:retry
   data={txns}
@@ -47,11 +43,11 @@
       }
     : undefined}
 >
-  {#if clientWidth > 768}
-    <TransactionsTable data={txns} />
-  {:else}
+  <TransactionsTable data={txns} className="mobile-hidden" />
+
+  <div class="desktop-hidden">
     {#each txns as txn (txn)}
       <TransactionsList data={txn} />
     {/each}
-  {/if}
+  </div>
 </DataCard>
diff --git a/explorer/src/lib/components/transactions-card/TransactionsCard.svelte b/explorer/src/lib/components/transactions-card/TransactionsCard.svelte
@@ -22,9 +22,6 @@
 
   let itemsToDisplay = ITEMS_TO_DISPLAY;
 
-  /** @type {number} */
-  let clientWidth;
-
   /** @type {Transaction[]}*/
   let displayedTxns;
 
@@ -49,7 +46,6 @@
   }
 </script>
 
-<svelte:window bind:outerWidth={clientWidth} />
 <DataCard
   on:retry
   data={txns}
@@ -62,16 +58,14 @@
     label: "Show More",
   }}
 >
-  {#if clientWidth > 768}
-    <TransactionsTable
-      data={displayedTxns}
-      className="transactions-card__table"
-    />
-  {:else}
-    <div class="transactions-card__list">
-      {#each displayedTxns as txn (txn)}
-        <TransactionsList data={txn} />
-      {/each}
-    </div>
-  {/if}
+  <TransactionsTable
+    data={displayedTxns}
+    className="transactions-card__table mobile-hidden"
+  />
+
+  <div class="transactions-card__list desktop-hidden">
+    {#each displayedTxns as txn (txn)}
+      <TransactionsList data={txn} />
+    {/each}
+  </div>
 </DataCard>