From b9911ab1eb96b43f1952c7b27dbfaf3b339052b5 Mon Sep 17 00:00:00 2001
From: An <82987608+AngieDutra@users.noreply.github.com>
Date: Tue, 4 Jul 2023 19:50:16 -0300
Subject: [PATCH] home and nav responsive
---
assets/css/app.css | 15 ++--
assets/js/app.js | 14 ++++
.../components/layouts/app.html.heex | 36 ++++----
.../components/layouts/root.html.heex | 2 +-
.../live/pages/home/index.ex | 83 ++++++++++++-------
priv/static/images/menu.svg | 1 +
6 files changed, 97 insertions(+), 54 deletions(-)
create mode 100644 priv/static/images/menu.svg
diff --git a/assets/css/app.css b/assets/css/app.css
index 1c550c92..20c3b1fa 100644
--- 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 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;
@@ -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;
diff --git a/assets/js/app.js b/assets/js/app.js
index 50ce464e..1cc3f98f 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -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();
diff --git a/lib/starknet_explorer_web/components/layouts/app.html.heex b/lib/starknet_explorer_web/components/layouts/app.html.heex
index 07f80fcb..86648243 100644
--- a/lib/starknet_explorer_web/components/layouts/app.html.heex
+++ b/lib/starknet_explorer_web/components/layouts/app.html.heex
@@ -1,21 +1,27 @@
-