responsive list pages and icons for nav options

lambdaclass · Jul 5, 2023 · 25523e7 · 25523e7
1 parent b9911ab
commit 25523e7
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 43 deletions.
diff --git a/assets/css/app.css b/assets/css/app.css
@@ -11,17 +11,17 @@ h2 {
   @apply font-ibm-plex text-2xl mb-4;
 }
 .blocks-grid {
-  @apply grid lg:grid-cols-6 gap-1 lg:gap-8 py-5 lg:py-0;
+  @apply grid md:grid-cols-6 gap-1 md:gap-8 py-5 md:py-0;
 }
 .transactions-grid {
-  @apply grid lg:grid-cols-7 gap-1 lg:gap-8 py-5 lg:py-0;
+  @apply grid md:grid-cols-7 gap-1 md:gap-8 py-5 md:py-0;
 }
 .blocks-grid > div,
 .transactions-grid > div {
   @apply py-2;
 }
 .table-block {
-  @apply flex flex-col overflow-x-hidden text-sm lg:py-3 px-5 justify-between text-left text-white rounded-lg bg-[#232331];
+  @apply flex flex-col overflow-x-hidden text-sm md:py-3 px-5 justify-between text-left text-white rounded-lg bg-[#232331];
 }
 .table-header {
   @apply text-sm flex justify-between items-baseline py-2;
@@ -30,14 +30,14 @@ h2 {
   @apply font-semibold text-lg;
 }
 .table-th {
-  @apply hidden lg:grid font-ibm-plex text-sm pb-2 text-gray-400;
+  @apply hidden md:grid font-ibm-plex text-sm pb-2 text-gray-400;
 }
 .list-h {
-  @apply font-ibm-plex text-sm pb-2 text-gray-400 lg:hidden;
+  @apply font-ibm-plex text-sm pb-2 text-gray-400 md:hidden;
 }
 form {
   @apply relative;
 }
 input {
-  @apply !bg-[#232331] !border-none !text-se-lilac !pr-10;
+  @apply !bg-[#232331] !border-none !text-se-lilac !pr-10 xl:!w-80;
 }
diff --git a/lib/starknet_explorer_web/components/layouts/app.html.heex b/lib/starknet_explorer_web/components/layouts/app.html.heex
@@ -1,20 +1,27 @@
-<main class="px-5 md:px-10 lg:px-5 min-h-screen py-24">
+<main class="px-5 md:px-10 min-h-screen py-24">
   <header>
-    <nav class="absolute top-0 left-0 w-screen flex justify-between items-center px-5 lg:px-10 py-5">
-      <a href="/" class="z-50 text-lg">
+    <nav class="absolute top-0 left-0 w-screen flex justify-between items-center px-5 md:px-10 py-5">
+      <a href="/" class="z-50 text-xl">
         <span class="uppercase">Starknet</span>
         <span class="font-semibold">Explorer</span>
       </a>
-      <img id="hamburger" class="z-50 lg:hidden" src={~p"/images/menu.svg"} />
+      <img id="hamburger" class="z-50 md:hidden" src={~p"/images/menu.svg"} />
       <div
         id="menu-options"
-        class="absolute lg:relative top-0 left-0 w-screen lg:w-auto h-screen lg:h-auto transition-all duration-300 opacity-0 lg:opacity-100 pointer-events-none lg:pointer-events-auto flex flex-col lg:flex-row justify-start items-center gap-5 bg-[#111118]/95 my-16 lg:my-0 py-10 lg:py-0 border-t lg:border-t-0"
+        class="absolute md:relative top-0 left-0 w-screen md:w-auto h-screen md:h-auto transition-all duration-300 opacity-0 md:opacity-100 pointer-events-none md:pointer-events-auto flex flex-col md:flex-row justify-start items-streach gap-10 bg-[#111118] my-16 md:my-0 py-10 md:py-0 border-t md:border-t-0 px-5 md:px-0"
       >
-        <a href="/blocks" class="hover:text-se-blue transition-all duration-300">
-          Blocks
+        <a
+          href="/blocks"
+          class="hover:text-se-blue transition-all duration-300 flex gap-2 items-center"
+        >
+          <img class="md:hidden" src={~p"/images/box.svg"} /> <span>Blocks</span>
         </a>
-        <a href="/transactions" class="hover:text-se-blue transition-all duration-300">
-          Transactions
+        <a
+          href="/transactions"
+          class="hover:text-se-blue transition-all duration-300 flex gap-2 items-center"
+        >
+          <img class="md:hidden" src={~p"/images/corner-up-right.svg"} />
+          <span>Transactions</span>
         </a>
         <%= live_render(@socket, StarknetExplorerWeb.SearchLive,
           id: "search-bar",

diff --git a/lib/starknet_explorer_web/live/block_index_live.ex b/lib/starknet_explorer_web/live/block_index_live.ex
@@ -10,31 +10,42 @@ defmodule StarknetExplorerWeb.BlockIndexLive do
         <h2>Blocks</h2>
       </div>
       <div class="table-block">
-        <ul class="blocks-grid table-th">
-          <li scope="col">Number</li>
-          <li class="col-span-2" scope="col">Block Hash</li>
-          <li class="col-span-2" scope="col">Status</li>
-          <li scope="col">Age</li>
-        </ul>
+        <div class="blocks-grid table-th">
+          <div scope="col">Number</div>
+          <div class="col-span-2" scope="col">Block Hash</div>
+          <div class="col-span-2" scope="col">Status</div>
+          <div scope="col">Age</div>
+        </div>
         <div id="blocks">
           <%= for block <- @blocks do %>
-            <ul id={"block-#{block["block_number"]}"} class="blocks-grid border-t border-gray-600 ">
-              <li scope="row">
+            <div
+              id={"block-#{block["block_number"]}"}
+              class="blocks-grid border-t first-of-type:border-t-0 md:first-of-type:border-t border-gray-600 "
+            >
+              <div scope="row">
+                <div class="list-h">Number</div>
                 <%= live_redirect(to_string(block["block_number"]),
                   to: "/block/#{block["block_number"]}",
                   class: "text-se-lilac hover:text-se-hover-lilac underline-none"
                 ) %>
-              </li>
-              <li class="col-span-2" scope="row">
+              </div>
+              <div class="col-span-2" scope="row">
+                <div class="list-h">Block Hash</div>
                 <%= live_redirect(Utils.shorten_block_hash(block["block_hash"]),
                   to: "/block/#{block["block_hash"]}",
                   class: "text-se-blue hover:text-se-hover-blue underline-none",
                   title: block["block_hash"]
                 ) %>
-              </li>
-              <li class="col-span-2" scope="row"><%= block["status"] %></li>
-              <li scope="row"><%= Utils.get_block_age(block) %></li>
-            </ul>
+              </div>
+              <div class="col-span-2" scope="row">
+                <div class="list-h">Status</div>
+                <%= block["status"] %>
+              </div>
+              <div scope="row">
+                <div class="list-h">Age</div>
+                <%= Utils.get_block_age(block) %>
+              </div>
+            </div>
           <% end %>
         </div>
       </div>

diff --git a/lib/starknet_explorer_web/live/transaction_index_live.ex b/lib/starknet_explorer_web/live/transaction_index_live.ex
@@ -10,28 +10,39 @@ defmodule StarknetExplorerWeb.TransactionIndexLive do
         <h2>Transactions</h2>
       </div>
       <div class="table-block">
-        <ul class="transactions-grid table-th">
-          <li class="col-span-2" scope="col">Transaction Hash</li>
-          <li class="col-span-2" scope="col">Type</li>
-          <li class="col-span-2" scope="col">Status</li>
-          <li scope="col">Age</li>
-        </ul>
+        <div class="transactions-grid table-th">
+          <div class="col-span-2" scope="col">Transaction Hash</div>
+          <div class="col-span-2" scope="col">Type</div>
+          <div class="col-span-2" scope="col">Status</div>
+          <div scope="col">Age</div>
+        </div>
         <div id="transactions">
           <%= for block <- @latest_block do %>
             <%= for {transaction, idx} <- Enum.with_index(block["transactions"]) do %>
-              <ul id={"transaction-#{idx}"} class="transactions-grid border-t border-gray-600">
-                <li class="col-span-2" scope="row">
+              <div
+                id={"transaction-#{idx}"}
+                class="transactions-grid border-t first-of-type:border-t-0 md:first-of-type:border-t border-gray-600"
+              >
+                <div class="col-span-2" scope="row">
+                  <div class="list-h">Transaction Hash</div>
                   <%= live_redirect(Utils.shorten_block_hash(transaction["transaction_hash"]),
                     to: "/transactions/#{transaction["transaction_hash"]}",
                     class: "text-se-blue hover:text-se-hover-blue underline-none"
                   ) %>
-                </li>
-                <li class="col-span-2" scope="row">
+                </div>
+                <div class="col-span-2" scope="row">
+                  <div class="list-h">Type</div>
                   <%= transaction["type"] %>
-                </li>
-                <li class="col-span-2" scope="row"><%= block["status"] %></li>
-                <li scope="row"><%= Utils.get_block_age(block) %></li>
-              </ul>
+                </div>
+                <div class="col-span-2" scope="row">
+                  <div class="list-h">Status</div>
+                  <%= block["status"] %>
+                </div>
+                <div scope="row">
+                  <div class="list-h">Age</div>
+                  <%= Utils.get_block_age(block) %>
+                </div>
+              </div>
             <% end %>
           <% end %>
         </div>

diff --git a/priv/static/images/box.svg b/priv/static/images/box.svg
diff --git a/priv/static/images/check-square.svg b/priv/static/images/check-square.svg
diff --git a/priv/static/images/copy.svg b/priv/static/images/copy.svg
diff --git a/priv/static/images/corner-up-right.svg b/priv/static/images/corner-up-right.svg