matous-volf/todo-baggins
1
1
Fork 0
Code Issues 24 Pull Requests 1 Actions Projects 1 Activity

feat: wider screen UI responsivity (#137)

Browse Source
This commit was merged in pull request #137.
This commit is contained in:
Matouš Volf
2026-03-05 10:50:37 +00:00
committed by Gitea
parent fc0d0c158c 64389d8c0d
commit c0d0000bcb
16 changed files with 105 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/app.rs
View File

@@ -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::<Route> {}
}
}

7
src/components/bottom_panel.rs
View File

@@ -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,
}
}

4
src/components/category_calendar_task_list.rs
View File

@@ -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",
{

6
src/components/category_today_task_list.rs
View File

@@ -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,

2
src/components/create_button.rs
View File

@@ -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;

1
src/components/mod.rs
View File

@@ -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;

23
src/components/navigation.rs → src/components/navigation/bottom.rs
View File

@@ -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<bool>) -> Element {
pub(crate) fn Bottom(is_expanded: Signal<bool>) -> 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<bool>) -> 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
}

7
src/components/navigation_item.rs → src/components/navigation/item.rs
View File

@@ -3,17 +3,14 @@ use dioxus::prelude::*;
use dioxus_free_icons::{Icon, IconShape};
#[component]
pub(crate) fn NavigationItem<I: IconShape + Clone + PartialEq + 'static>(
route: Route,
icon: I,
) -> Element {
pub(crate) fn Item<I: IconShape + Clone + PartialEq + 'static>(route: Route, icon: I) -> Element {
let current_route = use_route::<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",

7
src/components/navigation/mod.rs Normal file
View File

@@ -0,0 +1,7 @@
mod bottom;
mod item;
mod side;
pub(crate) use bottom::Bottom;
use item::Item;
pub(crate) use side::Side;

52
src/components/navigation/side.rs Normal file
View File

@@ -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<String>) -> 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
}
}
}
}

2
src/components/project_list.rs
View File

@@ -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());

2
src/components/sticky_bottom.rs
View File

@@ -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}
}
}

2
src/components/task_list.rs
View File

@@ -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 {

20
src/layouts/navigation.rs
View File

@@ -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::<Route> {}
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::<Route> {}
}
}
StickyBottom {
CreateButton {},
div {
class: "m-4 self-end",
CreateButton {},
}
BottomPanel {}
}
}

2
src/views/project_form_page.rs
View File

@@ -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 {}
}
}

2
src/views/task_form_page.rs
View File

@@ -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 {}
}
}