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