mARTin-B78/My-Weekly-ToDo-List
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(design): redesign AnyDay/Someday area — pill tabs + card layout

Browse Source 
Tabs:
- Pill-shaped tabs (border-radius: 20px) with proper background on inactive
- Inactive tabs now use readable dark text (--weekly-text) instead of
  barely-visible --weekly-text-light
- Active tab: accent color + white text + glow shadow (box-shadow)
- Count badges: larger, higher contrast, 700 font-weight
- Tab bar: taller padding (8px), thicker bottom border (2px)

Cards:
- Rounded corners (10px), border + subtle drop shadow
- Cards now 240px wide (was 300px) for better density
- Grid padding changed from padding-bottom only to full 12px padding
- List header has subtle tinted background + reduced height (48px)
- Title font tweaked to 0.85rem/700 (was 1.15rem/800) to match card size
- Add-task button padding aligned to card edges (12px horizontal)
- Removed p-2 Tailwind class that was double-padding the card

v1.107.0
This commit is contained in:
mARTin-B78 2026-05-11 09:45:16 +02:00
parent 16e51be26d
commit f0df18c853
3 changed files with 63 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "my-weekly-todo-list", "name": "my-weekly-todo-list",
"version": "1.106.6", "version": "1.107.0",
"description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view", "description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {

107
src/app/globals.css
View File

@ -1360,14 +1360,14 @@ h3 {
display: flex !important; display: flex !important;
flex-direction: row !important; flex-direction: row !important;
flex-wrap: nowrap !important; flex-wrap: nowrap !important;
gap: 1.5rem; gap: 12px;
width: max-content; width: max-content;
min-width: 100%; min-width: 100%;
padding-bottom: 1rem; padding: 12px 12px 16px;
align-items: flex-start; align-items: flex-start;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
scroll-behavior: smooth; scroll-behavior: smooth;
overflow: visible; /* Let parent container handle scrolling */ overflow: visible;
} }
/* Scrollbar Styling for Someday Container */ /* Scrollbar Styling for Someday Container */
@ -1413,27 +1413,33 @@ h3 {
display: none; display: none;
} }
/* Ruled paper lines for someday tasks */ /* Someday list cards */
.weekly-someday-list { .weekly-someday-list {
padding: 0; padding: 0;
min-height: 200px; min-height: 200px;
flex: 0 0 300px; /* Slightly wider lists */ flex: 0 0 240px;
width: 300px; width: 240px;
transition: transform 0.2s ease, opacity 0.2s ease; transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
max-width: 100%; max-width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-y: visible; overflow-y: visible;
scrollbar-width: none; /* Hide scrollbar Firefox */ scrollbar-width: none;
-ms-overflow-style: none; /* Hide scrollbar IE/Edge */ -ms-overflow-style: none;
background: var(--weekly-bg, #fff);
border: 1px solid var(--weekly-border, #e5e7eb);
border-radius: 10px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
overflow: hidden;
} }
.weekly-someday-list::-webkit-scrollbar { .weekly-someday-list::-webkit-scrollbar {
display: none; /* Hide scrollbar Chrome/Safari/Webkit */ display: none;
} }
.weekly-container.dark-mode .weekly-someday-list { .weekly-container.dark-mode .weekly-someday-list {
background-image: none; background-image: none;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
} }
.task-list-slot { .task-list-slot {
@ -1504,7 +1510,7 @@ h3 {
} }
.weekly-someday-list:last-child { .weekly-someday-list:last-child {
border-right: none; /* gap handles spacing, no extra right border needed */
} }
.weekly-someday-list.is-dragging { .weekly-someday-list.is-dragging {
@ -1540,32 +1546,34 @@ h3 {
} }
.weekly-someday-list-title-header { .weekly-someday-list-title-header {
padding: 0 1rem; padding: 10px 12px;
margin-bottom: 0; margin-bottom: 0;
height: 56px; min-height: 48px;
min-height: 56px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
border-bottom: 1px solid var(--weekly-border); border-bottom: 1px solid var(--weekly-border);
background: rgba(0, 0, 0, 0.02);
} }
.weekly-container.dark-mode .weekly-someday-list-title-header { .weekly-container.dark-mode .weekly-someday-list-title-header {
border-bottom-color: var(--weekly-border); border-bottom-color: var(--weekly-border);
background: rgba(255, 255, 255, 0.03);
} }
.weekly-someday-list-title-input { .weekly-someday-list-title-input {
font-size: 1.15rem; font-size: 0.85rem;
font-weight: 800; font-weight: 700;
letter-spacing: 0.08em; letter-spacing: 0.06em;
color: var(--weekly-text, #222); color: var(--weekly-text, #222);
background: transparent; background: transparent;
border: none; border: none;
flex: 1; flex: 1;
min-width: 0; min-width: 0;
padding: 4px 0; padding: 2px 0;
outline: none; outline: none;
transition: opacity 0.15s ease; transition: opacity 0.15s ease;
text-transform: uppercase;
} }
.weekly-someday .weekly-task-item { .weekly-someday .weekly-task-item {
@ -1583,17 +1591,17 @@ h3 {
.someday-add-task-btn { .someday-add-task-btn {
background: none; background: none;
border: none; border: none;
color: #aaa; color: #bbb;
cursor: pointer; cursor: pointer;
font-size: 0.85rem; font-size: 0.8rem;
padding: 4px 0; padding: 8px 12px;
text-align: left; text-align: left;
width: 100%; width: 100%;
transition: color 0.15s ease; transition: color 0.15s ease;
} }
.someday-add-task-btn:hover { .someday-add-task-btn:hover {
color: #666; color: #888;
} }
/* Someday Tabs Bar (horizontal above grid) */ /* Someday Tabs Bar (horizontal above grid) */
@ -1602,10 +1610,11 @@ h3 {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
gap: 4px; gap: 4px;
padding: 4px 8px; padding: 8px 12px;
border-bottom: 1px solid var(--weekly-border); border-bottom: 2px solid var(--weekly-border);
overflow-x: auto; overflow-x: auto;
scrollbar-width: none; scrollbar-width: none;
background: var(--weekly-bg);
} }
.someday-tabs-bar::-webkit-scrollbar { .someday-tabs-bar::-webkit-scrollbar {
@ -1617,8 +1626,8 @@ h3 {
border: none; border: none;
cursor: pointer; cursor: pointer;
color: var(--weekly-text-light, #999); color: var(--weekly-text-light, #999);
padding: 3px; padding: 5px;
border-radius: 4px; border-radius: 6px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -1633,34 +1642,39 @@ h3 {
.someday-tabs-bar-divider { .someday-tabs-bar-divider {
width: 1px; width: 1px;
height: 16px; height: 20px;
background: var(--weekly-border, #e5e7eb); background: var(--weekly-border, #e5e7eb);
flex-shrink: 0; flex-shrink: 0;
margin: 0 2px; margin: 0 4px;
} }
/* Someday Tab Buttons (horizontal) */ /* Someday Tab Buttons (horizontal) */
.someday-tab-btn-h { .someday-tab-btn-h {
background: none; background: var(--weekly-hover-bg, rgba(0, 0, 0, 0.05));
border: none; border: 1px solid transparent;
cursor: pointer; cursor: pointer;
color: var(--weekly-text-light, #999); color: var(--weekly-text, #444);
font-size: 0.75rem; font-size: 0.8rem;
font-weight: 500; font-weight: 600;
padding: 3px 10px; padding: 5px 13px;
border-radius: 3px; border-radius: 20px;
white-space: nowrap; white-space: nowrap;
transition: background 0.15s, color 0.15s; transition: background 0.15s, color 0.15s, box-shadow 0.15s;
display: inline-flex;
align-items: center;
gap: 5px;
} }
.someday-tab-btn-h:hover { .someday-tab-btn-h:hover {
background: var(--weekly-hover-bg, rgba(0, 0, 0, 0.06)); background: var(--weekly-border, rgba(0, 0, 0, 0.1));
color: var(--weekly-text, #333); color: var(--weekly-text, #222);
} }
.someday-tab-btn-h.active { .someday-tab-btn-h.active {
background: var(--weekly-accent, #6366f1); background: var(--weekly-accent, #6366f1);
color: #fff; color: #fff;
border-color: transparent;
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
} }
.someday-tab-btn-h.drag-over { .someday-tab-btn-h.drag-over {
@ -1673,19 +1687,18 @@ h3 {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-width: 16px; min-width: 18px;
height: 16px; height: 18px;
padding: 0 4px; padding: 0 5px;
border-radius: 8px; border-radius: 9px;
background: var(--weekly-hover-bg, rgba(0, 0, 0, 0.08)); background: rgba(0, 0, 0, 0.1);
font-size: 0.65rem; font-size: 0.65rem;
font-weight: 600; font-weight: 700;
line-height: 1; line-height: 1;
margin-left: 2px;
} }
.someday-tab-btn-h.active .someday-tab-count { .someday-tab-btn-h.active .someday-tab-count {
background: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.3);
color: #fff; color: #fff;
} }
@ -1699,7 +1712,7 @@ h3 {
.someday-tab-dissolve-h { .someday-tab-dissolve-h {
position: absolute; position: absolute;
right: -4px; right: -4px;
top: -4px; top: -6px;
background: var(--weekly-bg, #fff); background: var(--weekly-bg, #fff);
border: 1px solid var(--weekly-border, #e5e7eb); border: 1px solid var(--weekly-border, #e5e7eb);
border-radius: 50%; border-radius: 50%;

2
src/components/WeeklyView.tsx
View File

@ -8156,7 +8156,7 @@ export default function WeeklyView() {
const listEl = ( const listEl = (
<div <div
key={list.id} key={list.id}
className={`weekly-someday-list ${draggingListId === list.id ? "is-dragging" : ""} p-2 transition-colors duration-200`} className={`weekly-someday-list ${draggingListId === list.id ? "is-dragging" : ""} transition-colors duration-200`}
style={{ style={{
minHeight: "200px", minHeight: "200px",
cursor: "text", cursor: "text",