From e33f7f31bdad79c4499bc05920c75085af36892b Mon Sep 17 00:00:00 2001 From: cookspam Date: Sun, 8 Sep 2024 17:39:28 -0400 Subject: [PATCH] change navbar for small screen. --- src/components/activity.rs | 68 +++++++++++--------------------------- src/components/navbar.rs | 14 ++++---- 2 files changed, 27 insertions(+), 55 deletions(-) diff --git a/src/components/activity.rs b/src/components/activity.rs index 5a46893..8a15eb1 100644 --- a/src/components/activity.rs +++ b/src/components/activity.rs @@ -22,59 +22,31 @@ pub enum ActivityFilter { #[component] pub fn Activity(cx: Scope) -> Element { - // let filter = use_state(cx, || ActivityFilter::Global); - // let offset = use_state(cx, || 0u64); - // let (transfers, has_more) = use_transfers(cx, filter, offset); + let spam_gang = asset_path("mining_gang_resized.png"); let go = asset_path("letsgo.png"); let back = asset_path("letsback.png"); - // match transfers { - // AsyncResult::Ok(transfers) => { - // render! { - // div { - // class: "flex flex-col gap-4 grow w-full h-2/3 pb-20 min-h-16 rounded justify-start", - // div { - // class: "flex flex-row justify-between", - // h2 { - // class: "text-lg md:text-2xl font-bold my-auto", - // "Activity" - // } - // FilterButtons { - // filter: filter, - // offset: offset - // } - // } - // ActivityTable{ - // offset: offset, - // transfers: transfers, - // has_more: has_more - // } - // } - // } - // } - // _ => { - render! { - div { - // class: "flex flex-row h-64 w-full loading rounded", - class: "relative flex flex-col h-64 w-full mt-24", - img { - src: "{spam_gang}", - class: "absolute bottom-24 left-8 w-128 h-48 md:w-128 md:h-48", - - } - img { - src: "{go}", - class: "absolute bottom-24 left-72 w-32 h-16 md:w-32 md:h-16 animate-jump_right", - } - img { - src: "{back}", - class: "absolute bottom-24 left-72 w-32 h-20 md:w-32 md:h-20 animate-move_left", - } - } + render! { + div { + // class: "flex flex-row h-64 w-full loading rounded", + class: "relative flex flex-col h-64 w-full mt-24", + img { + src: "{spam_gang}", + class: "absolute bottom-24 left-8 w-128 h-48 md:w-128 md:h-48", + + } + img { + src: "{go}", + class: "absolute bottom-24 left-72 w-32 h-16 md:w-32 md:h-16 animate-jump_right", + } + img { + src: "{back}", + class: "absolute bottom-24 left-72 w-32 h-20 md:w-32 md:h-20 animate-move_left", } - // } - // } + } + } + } #[derive(Props, PartialEq)] diff --git a/src/components/navbar.rs b/src/components/navbar.rs index a70e7c5..3f052e2 100644 --- a/src/components/navbar.rs +++ b/src/components/navbar.rs @@ -42,7 +42,7 @@ pub fn Navbar(cx: Scope) -> Element { div { class: "flex w-full", div { - class: "max-w-[96rem] w-full flex flex-row justify-between mx-auto px-4 sm:px-8 py-4", // Reduce py for smaller screens + class: "max-w-[96rem] w-full flex flex-row justify-between mx-auto px-4 sm:px-8 py-6", // Reduce py for smaller screens Link { to: Route::Landing {}, class: "flex flex-row h-10 gap-1 my-auto", @@ -55,12 +55,12 @@ pub fn Navbar(cx: Scope) -> Element { } } div { - class: "flex flex-row gap-1 sm:gap-1 md:gap-2 lg:gap-3 flex-wrap sm:flex-nowrap", // Reduced gap for smaller screens + class: "flex flex-row gap-1 sm:gap-2 md:gap-4 lg:gap-10 flex-wrap sm:flex-nowrap", // Reduced gap for smaller screens Link { - class: "transition-colors flex flex-col items-center gap-1 sm:gap-2 px-2 sm:px-0 py-2 rounded-full text-gray-300 dark:text-gray-700 hover:text-black dark:hover:text-white", // Reduced padding + class: "transition-colors flex flex-col sm:flex-row items-center gap-1 sm:gap-1 md:gap-2 lg:gap-3 px-2 sm:px-0 py-2 rounded-full text-gray-300 dark:text-gray-700 hover:text-black dark:hover:text-white", // Reduced padding to: Route::Home {}, span { - class: "w-5 h-5", // Smaller icon on small screens + class: "w-5 h-5 sm:w-6 sm:h-6 my-auto", // Smaller icon on small screens "⛏️" } span { @@ -69,7 +69,7 @@ pub fn Navbar(cx: Scope) -> Element { } } Link { - class: "transition-colors flex flex-col items-center gap-1 sm:gap-1 md:gap-2 lg:gap-3 px-2 sm:px-0 py-2 rounded-full text-gray-300 dark:text-gray-700 hover:text-black dark:hover:text-white", // Reduced padding + class: "transition-colors flex flex-col items-center sm:flex-row gap-1 sm:gap-1 md:gap-2 lg:gap-3 px-2 sm:px-0 py-2 rounded-full text-gray-300 dark:text-gray-700 hover:text-black dark:hover:text-white", // Reduced padding to: Route::Stats {}, StatsIcon {} span { @@ -78,7 +78,7 @@ pub fn Navbar(cx: Scope) -> Element { } } Link { - class: "transition-colors flex flex-col items-center gap-1 sm:gap-1 md:gap-2 lg:gap-3 px-2 sm:px-0 py-2 rounded-full text-black dark:text-gray-700 hover:text-gray-600 dark:hover:text-white", // Reduced padding + class: "transition-colors flex flex-col items-center sm:flex-row gap-1 sm:gap-1 md:gap-2 lg:gap-3 px-2 sm:px-0 py-2 rounded-full text-black dark:text-gray-700 hover:text-gray-600 dark:hover:text-white", // Reduced padding to: Route::Apps {}, span { class: "w-5 h-5", // Smaller icon on small screens @@ -90,7 +90,7 @@ pub fn Navbar(cx: Scope) -> Element { } } Link { - class: "transition-colors flex flex-col items-center gap-1 sm:gap-1 md:gap-2 lg:gap-3 px-2 sm:px-0 py-2 rounded-full text-gray-300 dark:text-gray-700 hover:text-black dark:hover:text-white", // Reduced padding + class: "transition-colors flex flex-col items-center sm:flex-row gap-1 sm:gap-1 md:gap-2 lg:gap-3 px-2 sm:px-0 py-2 rounded-full text-gray-300 dark:text-gray-700 hover:text-black dark:hover:text-white", // Reduced padding to: Route::Settings {}, MyPageIcon {} span {