spenke-nordic-ab/pomoday-app
2
0
Fork 0
Code Issues 1 Pull Requests 4 Actions Packages Projects Releases Wiki Activity

Refactor task components, add mobile-friendly enhancements, and improve settings management

Browse Source 
- Introduced `TodoItemTouch`, a responsive task item optimized for mobile interaction with swipe actions.
- Added `MobileActions` for streamlined task creation and settings access on smaller screens.
- Refactored `App.vue` to adapt layouts dynamically for mobile and desktop users.
- Implemented collapsible, categorized task lists with improved handling in `TodoList` and `TodoListTouch`.
- Improved task swipe actions with `useSwipe` for smoother UI interactions.
- Updated styling with DaisyUI theme customization and multi-theme support.
- Enhanced `useSettings` with a `todayShown` toggle for quick agenda visibility.
This commit is contained in:
Paul Spenke
2026-03-04 10:41:23 +01:00
parent 2fea267ce9
commit 353bbea093
20 changed files with 500 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/styles/main.css
View File

@@ -2,41 +2,80 @@
@plugin "daisyui";
@plugin "daisyui/theme" {
name: "emerald";
name: "lofi";
default: true;
prefersdark: true;
prefersdark: false;
color-scheme: "light";
--color-base-100: oklch(100% 0 0);
--color-base-200: oklch(93% 0 0);
--color-base-300: oklch(86% 0 0);
--color-base-content: oklch(35.519% 0.032 262.988);
--color-primary: oklch(76.662% 0.135 153.45);
--color-primary-content: oklch(33.387% 0.04 162.24);
--color-secondary: oklch(61.302% 0.202 261.294);
--color-base-200: oklch(97% 0 0);
--color-base-300: oklch(94% 0 0);
--color-base-content: oklch(0% 0 0);
--color-primary: oklch(15.906% 0 0);
--color-primary-content: oklch(100% 0 0);
--color-secondary: oklch(21.455% 0.001 17.278);
--color-secondary-content: oklch(100% 0 0);
--color-accent: oklch(72.772% 0.149 33.2);
--color-accent-content: oklch(0% 0 0);
--color-neutral: oklch(35.519% 0.032 262.988);
--color-neutral-content: oklch(98.462% 0.001 247.838);
--color-info: oklch(72.06% 0.191 231.6);
--color-info-content: oklch(0% 0 0);
--color-success: oklch(64.8% 0.15 160);
--color-success-content: oklch(0% 0 0);
--color-warning: oklch(84.71% 0.199 83.87);
--color-warning-content: oklch(0% 0 0);
--color-error: oklch(71.76% 0.221 22.18);
--color-error-content: oklch(0% 0 0);
--radius-selector: 1rem;
--radius-field: 0.5rem;
--radius-box: 1rem;
--color-accent: oklch(26.861% 0 0);
--color-accent-content: oklch(100% 0 0);
--color-neutral: oklch(0% 0 0);
--color-neutral-content: oklch(100% 0 0);
--color-info: oklch(79.54% 0.103 205.9);
--color-info-content: oklch(15.908% 0.02 205.9);
--color-success: oklch(90.13% 0.153 164.14);
--color-success-content: oklch(18.026% 0.03 164.14);
--color-warning: oklch(88.37% 0.135 79.94);
--color-warning-content: oklch(17.674% 0.027 79.94);
--color-error: oklch(78.66% 0.15 28.47);
--color-error-content: oklch(15.732% 0.03 28.47);
--radius-selector: 0rem;
--radius-field: 0rem;
--radius-box: 0rem;
--size-selector: 0.25rem;
--size-field: 0.25rem;
--border: 1px;
--depth: 0;
--noise: 0;
--border: 2px;
--depth: 1;
--noise: 1;
}
@plugin "daisyui/theme" {
name: "black";
default: false;
prefersdark: true;
color-scheme: "dark";
--color-base-100: oklch(0% 0 0);
--color-base-200: oklch(19% 0 0);
--color-base-300: oklch(22% 0 0);
--color-base-content: oklch(87.609% 0 0);
--color-primary: oklch(35% 0 0);
--color-primary-content: oklch(100% 0 0);
--color-secondary: oklch(35% 0 0);
--color-secondary-content: oklch(100% 0 0);
--color-accent: oklch(35% 0 0);
--color-accent-content: oklch(100% 0 0);
--color-neutral: oklch(35% 0 0);
--color-neutral-content: oklch(100% 0 0);
--color-info: oklch(45.201% 0.313 264.052);
--color-info-content: oklch(89.04% 0.062 264.052);
--color-success: oklch(51.975% 0.176 142.495);
--color-success-content: oklch(90.395% 0.035 142.495);
--color-warning: oklch(96.798% 0.211 109.769);
--color-warning-content: oklch(19.359% 0.042 109.769);
--color-error: oklch(62.795% 0.257 29.233);
--color-error-content: oklch(12.559% 0.051 29.233);
--radius-selector: 0rem;
--radius-field: 0rem;
--radius-box: 0rem;
--size-selector: 0.25rem;
--size-field: 0.25rem;
--border: 2px;
--depth: 1;
--noise: 1;
}
/* Transitions */
.fade-enter-active,