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

fix: always apply completed class for strikethrough and improve checkbox styling for Safari mobile

Browse Source
This commit is contained in:
mARTin 2026-03-06 15:30:15 +01:00
parent 6fbbbdfdae
commit d41bc25fb0
2 changed files with 29 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/globals.css
View File

@ -700,6 +700,22 @@ h3 {
color: var(--weekly-completed); color: var(--weekly-completed);
} }
.weekly-task-item.completed-with-checkbox .weekly-task-text {
opacity: 0.7;
}
.task-checkbox {
cursor: pointer;
border-radius: 3px;
border: 1px solid var(--weekly-border);
transition: all 0.2s;
}
.task-checkbox:checked {
background-color: var(--weekly-teal);
border-color: var(--weekly-teal);
}
.weekly-task-text { .weekly-task-text {
flex: 1; flex: 1;
font-family: var(--weekly-task-font, var(--weekly-font)); font-family: var(--weekly-task-font, var(--weekly-font));

16
src/components/WeeklyView.tsx
View File

@ -6716,7 +6716,7 @@ function TaskItem({
return ( return (
<li <li
ref={taskItemRef} ref={taskItemRef}
className={`weekly-task-item ${variant} ${task.completed && !showTaskCheckboxes ? "completed" : ""} ${isSomeday ? "relative mx-2" : ""} ${touchActive ? "touch-active" : ""} ${swipeX !== 0 ? "task-swipe-container" : ""}`} className={`weekly-task-item ${variant} ${task.completed ? "completed" : ""} ${task.completed && showTaskCheckboxes ? "completed-with-checkbox" : ""} ${isSomeday ? "relative mx-2" : ""} ${touchActive ? "touch-active" : ""} ${swipeX !== 0 ? "task-swipe-container" : ""}`}
style={task.project?.color ? { borderLeft: `3px solid ${task.project.color}`, paddingLeft: "6px" } : undefined} style={task.project?.color ? { borderLeft: `3px solid ${task.project.color}`, paddingLeft: "6px" } : undefined}
draggable={!isEditing && !isNotesOpen && swipeX === 0} draggable={!isEditing && !isNotesOpen && swipeX === 0}
onDragStart={(e) => { onDragStart={(e) => {
@ -6865,7 +6865,7 @@ function TaskItem({
) : ( ) : (
<> <>
<span <span
className={`weekly-task-text flex-1 ${task.completed && !showTaskCheckboxes ? "completed" : ""}`} className={`weekly-task-text flex-1 ${task.completed ? "completed" : ""}`}
onClick={(e) => { onClick={(e) => {
if (variant === "default" && !showTaskCheckboxes) onToggle(); if (variant === "default" && !showTaskCheckboxes) onToggle();
// For minimal/someday, parent onClick handles edit // For minimal/someday, parent onClick handles edit
@ -6884,7 +6884,17 @@ function TaskItem({
onChange={(e) => { e.stopPropagation(); onToggle(); }} onChange={(e) => { e.stopPropagation(); onToggle(); }}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
className="task-checkbox flex-shrink-0" className="task-checkbox flex-shrink-0"
style={{ width: "14px", height: "14px", margin: 0, cursor: "pointer", position: "relative", top: "4px", left: "-2px", accentColor: "#333" }} style={{
width: "16px",
height: "16px",
margin: 0,
cursor: "pointer",
position: "relative",
top: "3px",
left: "-2px",
accentColor: "var(--weekly-teal, #009a9a)",
WebkitAppearance: "checkbox"
}}
/> />
)} )}
{needsSync && ( {needsSync && (