Skip to content
This repository has been archived by the owner on Oct 4, 2024. It is now read-only.

Commit

Permalink
home and nav responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@AngieDutra
AngieDutra committed Jul 4, 2023
1 parent 81ac09f commit b9911ab
Show file tree
Hide file tree
Showing 6 changed files with 97 additions and 54 deletions.
15 changes: 9 additions & 6 deletions assets/css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,17 @@ h2 {
@apply font-ibm-plex text-2xl mb-4;
}
.blocks-grid {
@apply grid grid-cols-6 gap-8;
@apply grid lg:grid-cols-6 gap-1 lg:gap-8 py-5 lg:py-0;
}
.transactions-grid {
@apply grid grid-cols-7 gap-8;
@apply grid lg:grid-cols-7 gap-1 lg:gap-8 py-5 lg:py-0;
}
.blocks-grid li,
.transactions-grid li {
.blocks-grid > div,
.transactions-grid > div {
@apply py-2;
}
.table-block {
@apply flex flex-col overflow-x-hidden text-sm py-3 px-5 justify-between text-left text-white rounded-lg bg-[#232331];
@apply flex flex-col overflow-x-hidden text-sm lg: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;
Expand All @@ -30,7 +30,10 @@ h2 {
@apply font-semibold text-lg;
}
.table-th {
@apply font-ibm-plex text-sm pb-2 text-gray-400;
@apply hidden lg: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;
}
form {
@apply relative;
Expand Down
14 changes: 14 additions & 0 deletions assets/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,20 @@ const setYear = () => {
copyright.innerHTML = `LambdaClass © ${new Date().getFullYear()}`;
};
setYear();

// Hamburger menu
const hamburgerMenu = () => {
const hamburger = document.getElementById("hamburger");
const options = document.querySelector("#menu-options");
hamburger.addEventListener("click", () => {
options.classList.toggle("open");
options.classList.toggle("opacity-0");
options.classList.toggle("pointer-events-none");
document.body.classList.toggle("overflow-hidden");
});
};
hamburgerMenu();

// connect if there are any LiveViews on the page
liveSocket.connect();

Expand Down
36 changes: 21 additions & 15 deletions lib/starknet_explorer_web/components/layouts/app.html.heex
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,27 @@
<main class="min-h-screen py-24">
<header class="absolute top-0 left-0 right-0 bg-[#111118]/80 flex justify-between items-center px-10 py-5">
<div class="flex justify-center items-center gap-4">
<a href="/" class="text-lg">
<main class="px-5 md:px-10 lg:px-5 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">
<span class="uppercase">Starknet</span>
<span class="font-semibold">Explorer</span>
</a>
</div>
<div class="flex items-center gap-10">
<a href="/blocks" class="hover:text-se-blue transition-all duration-300"> Blocks </a>
<a href="/transactions" class="hover:text-se-blue transition-all duration-300">
Transactions
</a>
<%= live_render(@socket, StarknetExplorerWeb.SearchLive,
id: "search-bar",
flash: @flash
) %>
</div>
<img id="hamburger" class="z-50 lg: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"
>
<a href="/blocks" class="hover:text-se-blue transition-all duration-300">
Blocks
</a>
<a href="/transactions" class="hover:text-se-blue transition-all duration-300">
Transactions
</a>
<%= live_render(@socket, StarknetExplorerWeb.SearchLive,
id: "search-bar",
flash: @flash
) %>
</div>
</nav>
</header>
<div><.flash_group flash={@flash} /> <%= @inner_content %></div>
</main>
2 changes: 1 addition & 1 deletion lib/starknet_explorer_web/components/layouts/root.html.heex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
</script>
</head>
<body class="bg-[#111118] text-white antialiased relative">
<body class="bg-[#111118] text-white antialiased relative lg:overflow-auto">
<%= @inner_content %>
<footer class="absolute bottom-0 left-0 right-0 flex justify-center items-center mt-10 py-4 text-gray-500">
<p id="copyright"></p>
Expand Down
83 changes: 51 additions & 32 deletions lib/starknet_explorer_web/live/pages/home/index.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
<h1>Welcome to</h1>
<h2>Starknet Explorer</h2>
</div>
<div class="mx-auto max-w-6xl grid grid-cols-2 gap-10 mt-10">
<div class="mx-auto max-w-6xl grid lg:grid-cols-2 gap-10 mt-10">
<div>
<div class="table-header">
<div class="table-title">Latest Blocks</div>
Expand All @@ -32,33 +32,44 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
</a>
</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 <- Enum.take(@blocks, 15) 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 lg: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 transition-all duration-300 underline-none font-medium"
"text-se-lilac hover:text-se-hover-lilac transition-all duration-300 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 transition-all duration-300 underline-none font-medium",
"text-se-blue hover:text-se-hover-blue transition-all duration-300 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>
Expand All @@ -75,30 +86,38 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
</div>
<div class="table-block">
<div class="table-th">
<ul class="transactions-grid">
<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">
<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>
<div id="transactions">
<%= for block <- @latest_block do %>
<%= for {transaction, idx} <- Enum.take(Enum.with_index(block["transactions"]), 15) 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 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 transition-all duration-300 underline-none font-medium"
"text-se-blue hover:text-se-hover-blue transition-all duration-300 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>
Expand Down
1 change: 1 addition & 0 deletions priv/static/images/menu.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit b9911ab

Please sign in to comment.