From 64389d8c0dc11c1de95126aa7bb66f81ca9e4835 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matou=C5=A1=20Volf?= Date: Mon, 9 Feb 2026 22:10:12 +0100 Subject: [PATCH] feat: wider screen UI responsivity --- src/components/app.rs | 2 +- src/components/bottom_panel.rs | 7 +-- src/components/category_calendar_task_list.rs | 4 +- src/components/category_today_task_list.rs | 6 +-- src/components/create_button.rs | 2 +- src/components/mod.rs | 1 - .../{navigation.rs => navigation/bottom.rs} | 23 ++++---- .../item.rs} | 7 +-- src/components/navigation/mod.rs | 7 +++ src/components/navigation/side.rs | 52 +++++++++++++++++++ src/components/project_list.rs | 2 +- src/components/sticky_bottom.rs | 2 +- src/components/task_list.rs | 2 +- src/layouts/navigation.rs | 20 +++++-- src/views/project_form_page.rs | 2 +- src/views/task_form_page.rs | 2 +- 16 files changed, 105 insertions(+), 36 deletions(-) rename src/components/{navigation.rs => navigation/bottom.rs} (84%) rename src/components/{navigation_item.rs => navigation/item.rs} (77%) create mode 100644 src/components/navigation/mod.rs create mode 100644 src/components/navigation/side.rs diff --git a/src/components/app.rs b/src/components/app.rs index 2ef5cfe..7597077 100644 --- a/src/components/app.rs +++ b/src/components/app.rs @@ -48,7 +48,7 @@ pub(crate) fn App() -> Element { document::Link { rel: "manifest", href: MANIFEST, crossorigin: "use-credentials" } div { - class: "min-h-screen py-4 flex flex-col text-gray-300 bg-gray-900", + class: "min-h-screen flex flex-col text-gray-300 bg-gray-900", Router:: {} } } diff --git a/src/components/bottom_panel.rs b/src/components/bottom_panel.rs index f230871..098763c 100644 --- a/src/components/bottom_panel.rs +++ b/src/components/bottom_panel.rs @@ -1,6 +1,7 @@ -use crate::components::navigation::Navigation; use dioxus::prelude::*; +use crate::components::navigation; + #[component] pub(crate) fn BottomPanel() -> Element { let navigation_expanded = use_signal(|| false); @@ -10,12 +11,12 @@ pub(crate) fn BottomPanel() -> Element { class: format!( "flex flex-col pointer-events-auto bg-gray-800 transition-[height] duration-[500ms] ease-[cubic-bezier(0.79,0.14,0.15,0.86)] overflow-y-scroll {}", if navigation_expanded() { - "h-[130px]" + "h-[132px]" } else { "h-[66px]" } ), - Navigation { + navigation::Bottom { is_expanded: navigation_expanded, } } diff --git a/src/components/category_calendar_task_list.rs b/src/components/category_calendar_task_list.rs index 16df019..1ea63c5 100644 --- a/src/components/category_calendar_task_list.rs +++ b/src/components/category_calendar_task_list.rs @@ -23,12 +23,12 @@ pub(crate) fn CategoryCalendarTaskList() -> Element { rsx! { div { - class: "pt-4 flex flex-col gap-8", + class: "pt-3 flex flex-col gap-8", for date_current in today_date.iter_days().take(CALENDAR_LENGTH_DAYS) { div { class: "flex flex-col gap-4", div { - class: "px-7 flex flex-row items-center gap-2 text-gray-500 font-bold", + class: "px-7 sm:px-8 flex flex-row items-center gap-2 text-gray-500 font-bold", div { class: "pt-1", { diff --git a/src/components/category_today_task_list.rs b/src/components/category_today_task_list.rs index b09982e..cadc24b 100644 --- a/src/components/category_today_task_list.rs +++ b/src/components/category_today_task_list.rs @@ -52,7 +52,7 @@ pub(crate) fn CategoryTodayTaskList() -> Element { div { class: "flex flex-col gap-4", div { - class: "px-7 flex flex-row items-center gap-2 text-gray-500 font-bold", + class: "px-7 sm:px-8 flex flex-row items-center gap-2 text-gray-500 font-bold", Icon { class: "mx-1.5", icon: FaWater @@ -70,7 +70,7 @@ pub(crate) fn CategoryTodayTaskList() -> Element { div { class: "flex flex-col gap-4", div { - class: "px-7 flex flex-row items-center gap-2 text-gray-500 font-bold", + class: "px-7 sm:px-8 flex flex-row items-center gap-2 text-gray-500 font-bold", Icon { class: "mx-1.25", height: 22, @@ -90,7 +90,7 @@ pub(crate) fn CategoryTodayTaskList() -> Element { div { class: "flex flex-col gap-4", div { - class: "px-7 flex flex-row items-center gap-2 text-gray-500 font-bold", + class: "px-7 sm:px-8 flex flex-row items-center gap-2 text-gray-500 font-bold", Icon { class: "mx-1.25", height: 22, diff --git a/src/components/create_button.rs b/src/components/create_button.rs index a67576d..48fa6fe 100644 --- a/src/components/create_button.rs +++ b/src/components/create_button.rs @@ -10,7 +10,7 @@ pub(crate) fn CreateButton() -> Element { let current_route = use_route(); rsx! { ButtonPrimary { - class: "pointer-events-auto m-4 self-end *:rounded-full! *:p-4", + class: "pointer-events-auto sm:self-auto *:rounded-full! *:p-4", onclick: move |_| { *TASK_BEING_EDITED.write() = None; *PROJECT_BEING_EDITED.write() = None; diff --git a/src/components/mod.rs b/src/components/mod.rs index 4ca3745..8fd2dca 100644 --- a/src/components/mod.rs +++ b/src/components/mod.rs @@ -10,7 +10,6 @@ pub(crate) mod error_boundary_message; pub(crate) mod input; pub(crate) mod input_label; pub(crate) mod navigation; -pub(crate) mod navigation_item; pub(crate) mod project_form; pub(crate) mod project_list; pub(crate) mod project_select; diff --git a/src/components/navigation.rs b/src/components/navigation/bottom.rs similarity index 84% rename from src/components/navigation.rs rename to src/components/navigation/bottom.rs index 0ced100..fb2a0a9 100644 --- a/src/components/navigation.rs +++ b/src/components/navigation/bottom.rs @@ -1,4 +1,3 @@ -use crate::components::navigation_item::NavigationItem; use crate::route::Route; use dioxus::prelude::*; use dioxus_free_icons::Icon; @@ -9,13 +8,13 @@ use dioxus_free_icons::icons::fa_solid_icons::{ }; #[component] -pub(crate) fn Navigation(is_expanded: Signal) -> Element { +pub(crate) fn Bottom(is_expanded: Signal) -> Element { rsx! { div { class: "grid grid-cols-5 justify-stretch", button { class: format!( - "py-2 flex flex-row justify-center items-center cursor-pointer", + "py-2 flex flex-row justify-center items-center sm:hidden cursor-pointer", ), onclick: move |_| is_expanded.set(!is_expanded()), div { @@ -30,41 +29,41 @@ pub(crate) fn Navigation(is_expanded: Signal) -> Element { } } }, - NavigationItem { + super::Item { route: Route::CategoryNextStepsPage, icon: FaSignsPost }, - NavigationItem { + super::Item { route: Route::CategoryCalendarPage, icon: FaCalendarDays }, - NavigationItem { + super::Item { route: Route::CategoryTodayPage, icon: FaCalendarDay }, - NavigationItem { + super::Item { route: Route::CategoryInboxPage, icon: FaInbox }, {if is_expanded() { rsx! { - NavigationItem { + super::Item { route: Route::ProjectsPage, icon: FaList }, - NavigationItem { + super::Item { route: Route::CategoryTrashPage, icon: FaTrashCan }, - NavigationItem { + super::Item { route: Route::CategoryDonePage, icon: FaVolcano }, - NavigationItem { + super::Item { route: Route::CategorySomedayMaybePage, icon: FaLightbulb }, - NavigationItem { + super::Item { route: Route::CategoryWaitingForPage, icon: FaHourglassHalf } diff --git a/src/components/navigation_item.rs b/src/components/navigation/item.rs similarity index 77% rename from src/components/navigation_item.rs rename to src/components/navigation/item.rs index 720c535..c7d46d1 100644 --- a/src/components/navigation_item.rs +++ b/src/components/navigation/item.rs @@ -3,17 +3,14 @@ use dioxus::prelude::*; use dioxus_free_icons::{Icon, IconShape}; #[component] -pub(crate) fn NavigationItem( - route: Route, - icon: I, -) -> Element { +pub(crate) fn Item(route: Route, icon: I) -> Element { let current_route = use_route::(); rsx! { Link { to: route.clone(), class: format!( - "py-2.5 flex flex-row justify-center items-center hover:*:bg-gray-900 active:*:text-gray-400", + "py-2.5 sm:px-6 flex flex-row justify-center items-center hover:*:bg-gray-900 active:*:text-gray-400", ), div { class: format!("pt-2.5 px-4 {} transition-all duration-150", diff --git a/src/components/navigation/mod.rs b/src/components/navigation/mod.rs new file mode 100644 index 0000000..766c08b --- /dev/null +++ b/src/components/navigation/mod.rs @@ -0,0 +1,7 @@ +mod bottom; +mod item; +mod side; + +pub(crate) use bottom::Bottom; +use item::Item; +pub(crate) use side::Side; diff --git a/src/components/navigation/side.rs b/src/components/navigation/side.rs new file mode 100644 index 0000000..a94ba58 --- /dev/null +++ b/src/components/navigation/side.rs @@ -0,0 +1,52 @@ +use crate::route::Route; +use dioxus::prelude::*; +use dioxus_free_icons::icons::fa_regular_icons::FaLightbulb; +use dioxus_free_icons::icons::fa_solid_icons::{ + FaCalendarDay, FaCalendarDays, FaHourglassHalf, FaInbox, FaList, FaSignsPost, FaTrashCan, + FaVolcano, +}; + +#[component] +pub(crate) fn Side(class: Option) -> Element { + rsx! { + div { + class: format!("flex flex-col {}", class.unwrap_or(String::new())), + super::Item { + route: Route::CategoryInboxPage, + icon: FaInbox + }, + super::Item { + route: Route::CategoryTodayPage, + icon: FaCalendarDay + }, + super::Item { + route: Route::CategoryCalendarPage, + icon: FaCalendarDays + }, + super::Item { + route: Route::CategoryNextStepsPage, + icon: FaSignsPost + }, + super::Item { + route: Route::CategoryWaitingForPage, + icon: FaHourglassHalf + }, + super::Item { + route: Route::CategorySomedayMaybePage, + icon: FaLightbulb + }, + super::Item { + route: Route::CategoryDonePage, + icon: FaVolcano + }, + super::Item { + route: Route::CategoryTrashPage, + icon: FaTrashCan + }, + super::Item { + route: Route::ProjectsPage, + icon: FaList + } + } + } +} diff --git a/src/components/project_list.rs b/src/components/project_list.rs index aa8001f..1bf8a6a 100644 --- a/src/components/project_list.rs +++ b/src/components/project_list.rs @@ -11,7 +11,7 @@ pub(crate) fn ProjectList() -> Element { class: "flex flex-col", for project in projects { div { - class: "px-7 py-4 hover:bg-gray-800 font-medium text-pretty wrap-anywhere select-none transition-all duration-150 cursor-pointer", + class: "px-7 sm:px-8 py-4 hover:bg-gray-800 font-medium text-pretty wrap-anywhere select-none transition-all duration-150 cursor-pointer", key: "{project.id}", onclick: move |_| { *PROJECT_BEING_EDITED.write() = Some(project.clone()); diff --git a/src/components/sticky_bottom.rs b/src/components/sticky_bottom.rs index 043ba7d..193451f 100644 --- a/src/components/sticky_bottom.rs +++ b/src/components/sticky_bottom.rs @@ -4,7 +4,7 @@ use dioxus::prelude::*; pub(crate) fn StickyBottom(children: Element) -> Element { rsx! { div { - class: "fixed bottom-0 left-0 right-0 flex flex-col pointer-events-none", + class: "fixed bottom-0 left-0 right-0 flex flex-col pointer-events-none sm:hidden", {children} } } diff --git a/src/components/task_list.rs b/src/components/task_list.rs index 008cf6d..e6f52d6 100644 --- a/src/components/task_list.rs +++ b/src/components/task_list.rs @@ -23,7 +23,7 @@ pub(crate) fn TaskList( div { key: "{task.task.id}", class: format!( - "px-7 pt-3.75 {} flex flex-row items-start gap-4 hover:bg-gray-800 cursor-pointer select-none transition-all duration-150", + "px-7 sm:px-8 pt-3.75 {} flex flex-row items-start gap-4 hover:bg-gray-800 cursor-pointer select-none transition-all duration-150", if task.task.deadline.is_some() || !task.subtasks.is_empty() { "pb-0.25" } else if let Category::Calendar { time, .. } = &task.task.category { diff --git a/src/layouts/navigation.rs b/src/layouts/navigation.rs index 9dc2b5f..dca2f66 100644 --- a/src/layouts/navigation.rs +++ b/src/layouts/navigation.rs @@ -1,3 +1,4 @@ +use crate::components; use crate::components::bottom_panel::BottomPanel; use crate::components::create_button::CreateButton; use crate::components::sticky_bottom::StickyBottom; @@ -27,11 +28,24 @@ pub(crate) fn Navigation() -> Element { rsx! { div { - class: "grow flex flex-col pb-36", - Outlet:: {} + class: "grow flex flex-col sm:flex-row pb-36 sm:pb-0", + div { + class: "hidden sm:flex sm:flex-col gap-4 py-3.25 items-center bg-gray-800", + components::navigation::Side {}, + div { + CreateButton {} + } + } + div { + class: "grow flex flex-col py-4", + Outlet:: {} + } } StickyBottom { - CreateButton {}, + div { + class: "m-4 self-end", + CreateButton {}, + } BottomPanel {} } } diff --git a/src/views/project_form_page.rs b/src/views/project_form_page.rs index 7528841..8aad0fa 100644 --- a/src/views/project_form_page.rs +++ b/src/views/project_form_page.rs @@ -5,7 +5,7 @@ use dioxus::prelude::*; pub(crate) fn ProjectFormPage() -> Element { rsx! { ErrorBoundaryMessage { - class: "grow py-4 flex flex-col gap-12", + class: "grow py-8 max-w-xl w-full mx-auto flex flex-col gap-12", ProjectForm {} } } diff --git a/src/views/task_form_page.rs b/src/views/task_form_page.rs index c184611..fcb6df3 100644 --- a/src/views/task_form_page.rs +++ b/src/views/task_form_page.rs @@ -5,7 +5,7 @@ use dioxus::prelude::*; pub(crate) fn TaskFormPage() -> Element { rsx! { ErrorBoundaryMessage { - class: "grow py-4 flex flex-col gap-12", + class: "grow py-8 max-w-xl w-full mx-auto flex flex-col gap-12", TaskForm {} } } -- 2.49.1