diff --git a/README.md b/README.md index 1f080a7..0f12880 100644 --- a/README.md +++ b/README.md @@ -30,4 +30,4 @@ ### start local services - `just supabase-up`: Start up local supabase with some seed data -- `just watch-server`: Start dioxus app running at `localhost:3000` with hot reload +- `just watch`: Start dioxus app running at `localhost:3000` with hot reload diff --git a/app/assets/aviary.png b/app/assets/aviary.png index c4dd69e..47e94c4 100644 Binary files a/app/assets/aviary.png and b/app/assets/aviary.png differ diff --git a/app/assets/aviary_active.png b/app/assets/aviary_active.png new file mode 100644 index 0000000..4b74689 Binary files /dev/null and b/app/assets/aviary_active.png differ diff --git a/app/src/main.rs b/app/src/main.rs index 65f0995..586615d 100644 --- a/app/src/main.rs +++ b/app/src/main.rs @@ -16,17 +16,13 @@ mod utils; fn main() { // Init storage dioxus_sdk::set_dir!(); + // Init logger let log_level = option_env!("RUST_LOG") .and_then(|level| level.parse().ok()) .unwrap_or(Level::INFO); dioxus_logger::init(log_level).expect("failed to init logger"); - // launch(App) - // use below until --port 3000 supported on fullstack - #[allow(clippy::let_unit_value)] - // let cfg = server_only!( - // dioxus::fullstack::Config::new().addr(std::net::SocketAddr::from(([0, 0, 0, 0], 3000))) - // ); - // LaunchBuilder::fullstack().with_cfg(cfg).launch(ui::App) + + // Launch the app launch(ui::App) } diff --git a/app/src/ui/mod.rs b/app/src/ui/mod.rs index 770d1e9..214fd2a 100644 --- a/app/src/ui/mod.rs +++ b/app/src/ui/mod.rs @@ -69,33 +69,29 @@ enum Route { #[component] fn HeaderFooter() -> Element { let route: Route = use_route(); - let is_index = matches!(route, Route::Index {}); + const AVIARY: &str = asset!("assets/aviary.png"); + const AVIARY_ACTIVE: &str = asset!("assets/aviary_active.png"); + let aviary_src = if matches!(route, Route::Birds {}) { + AVIARY_ACTIVE + } else { + AVIARY + }; rsx! { div { class: "flex flex-col sm:h-dvh selection:bg-purple-dark overflow-x-clip sm:overflow-x-visible", header { id: "header", - class: "text-green-dark grow-0 shrink-0 px-1 py-2 w-full flex flex-row justify-between sm:justify-center items-center gap-4", - class: if is_index { - "h-20 text-5xl" - } else { - "h-16 sm:h-20 text-4xl sm:text-5xl" - }, - // TODO: hambuger menu for mobile (with nice animation 3 bars to X) + class: "text-green-dark grow-0 shrink-0 px-1 py-2 w-full flex flex-row justify-between sm:justify-center items-center gap-8", + class: "h-16 sm:h-20 text-4xl sm:text-5xl", div { class: "shrink-0", Link { - class: "outline-purple-dark", + class: "outline-none focus-visible:ring", to: Route::Birds {}, - // TODO: use hover:bg-url-[highlighted] to use the yellow fill on hover - img { - class: if is_index { - "h-12" - } else { - "h-10 sm:h-12" - }, - src: asset!("assets/aviary.png"), - alt: "Your Aviary", + div { + class: "bg-contain bg-no-repeat bg-center", + class: "h-10 w-8 sm:h-12 sm:w-10", + background_image: "url({aviary_src})", } span { class: "sr-only", "Your Aviary" } } @@ -111,12 +107,7 @@ fn HeaderFooter() -> Element { } // Just jank until another icon is here div { - class: "shrink-0", - class: if is_index { - "w-[41px]" - } else { - "w-[34px] sm:w-[41px]" - }, + class: "shrink-0 h-10 w-8 sm:h-12 sm:w-10", } } div { diff --git a/app/src/ui/pages/index.rs b/app/src/ui/pages/index.rs index 5c9370c..6a681b1 100644 --- a/app/src/ui/pages/index.rs +++ b/app/src/ui/pages/index.rs @@ -13,7 +13,7 @@ pub fn Index() -> Element { // screen-lg == 1024px, 5/10 of the lg-screen is 512px class: "lg:ml-auto lg:max-w-[512px] flex flex-col justify-between gap-5", div { - class: "text-4xl text-center uppercase", + class: "text-3xl sm:text-4xl text-center uppercase", "10 new birds every day" } PackOfTheDay { } @@ -25,17 +25,17 @@ pub fn Index() -> Element { // screen-lg == 1024px, 5/10 of the lg-screen is 512px class: "lg:mr-auto lg:ml-48 lg:max-w-[512px] uppercase", div { - class: "w-full sm:w-56 text-5xl text-left text-bold leading-normal sm:leading-tight", + class: "w-full sm:w-56 text-4xl sm:text-5xl text-left text-bold leading-normal sm:leading-tight", "A game that helps you memorize bird calls." } } } div { - class: "text-5xl col-span-10 text-left bg-yellow-dark text p-8 sm:p-16", + class: "text-4xl sm:text-5xl col-span-10 text-left bg-yellow-dark text p-8 sm:p-16", div { class: "max-w-screen-lg mx-auto", span { - class: "text-5xl", + class: "text-4xl sm:text-5xl", "The wild speaks. " } span { diff --git a/justfile b/justfile index 7bac650..5fb90c6 100644 --- a/justfile +++ b/justfile @@ -1,13 +1,13 @@ set dotenv-load -# watch server +# run initial setup initial-setup: #!/usr/bin/env bash cd app npm install -# watch server -watch-server platform='web': +# watch app w/ hotreload +watch platform='web': #!/usr/bin/env bash set -euxo pipefail cd app