Skip to content

Commit

Permalink
change navbar for small screen.
Browse files Browse the repository at this point in the history
  • Loading branch information
@cookspam
cookspam committed Sep 8, 2024
1 parent b17ed25 commit e33f7f3
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 55 deletions.
68 changes: 20 additions & 48 deletions src/components/activity.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)]
Expand Down
14 changes: 7 additions & 7 deletions src/components/navbar.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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 {
Expand All @@ -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 {
Expand All @@ -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
Expand All @@ -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 {
Expand Down

0 comments on commit e33f7f3

Please sign in to comment.