fix: kanban detail modal footer layout - delete left, OK/Cancel right

Move trash icon to lower-left corner, add OK and Cancel buttons
in the lower-right corner.

v1.55.1

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
mARTin 2026-03-22 08:29:25 +01:00
parent ca7911c7ef
commit 22a193180b
3 changed files with 53 additions and 9 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "my-weekly-todo-list", "name": "my-weekly-todo-list",
"version": "1.55.0", "version": "1.55.1",
"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": {

View File

@ -2189,23 +2189,52 @@ h3 {
padding: 12px 20px; padding: 12px 20px;
border-top: 1px solid var(--weekly-border, #e5e7eb); border-top: 1px solid var(--weekly-border, #e5e7eb);
display: flex; display: flex;
justify-content: flex-end; align-items: center;
justify-content: space-between;
} }
.kanban-detail-delete { .kanban-detail-delete {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; justify-content: center;
padding: 6px 14px; width: 34px;
height: 34px;
border: none; border: none;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
color: #9ca3af;
background: none;
}
.kanban-detail-delete:hover {
color: #ef4444;
background: rgba(239,68,68,0.08);
}
.kanban-detail-footer-right {
display: flex;
gap: 8px;
}
.kanban-detail-btn {
padding: 7px 18px;
border-radius: 6px;
cursor: pointer;
font-size: 0.8rem; font-size: 0.8rem;
font-family: inherit; font-family: inherit;
color: #ef4444; font-weight: 500;
background: rgba(239,68,68,0.08); border: 1px solid var(--weekly-border, #e5e7eb);
} }
.kanban-detail-delete:hover { .kanban-detail-btn-cancel {
background: rgba(239,68,68,0.15); background: transparent;
color: var(--weekly-text-muted, #6b7280);
}
.kanban-detail-btn-cancel:hover {
background: var(--weekly-hover, rgba(0,0,0,0.04));
}
.kanban-detail-btn-ok {
background: var(--weekly-accent, #6366f1);
color: #fff;
border-color: var(--weekly-accent, #6366f1);
}
.kanban-detail-btn-ok:hover {
opacity: 0.9;
} }
@media (max-width: 600px) { @media (max-width: 600px) {

View File

@ -9041,9 +9041,24 @@ export default function WeeklyView() {
<button <button
onClick={() => { deleteTask(liveTask.id); setKanbanDetailTask(null); }} onClick={() => { deleteTask(liveTask.id); setKanbanDetailTask(null); }}
className="kanban-detail-delete" className="kanban-detail-delete"
title={language === "de" ? "Löschen" : "Delete"}
> >
<Trash2 size={14} /> {language === "de" ? "Löschen" : "Delete"} <Trash2 size={16} />
</button> </button>
<div className="kanban-detail-footer-right">
<button
onClick={() => setKanbanDetailTask(null)}
className="kanban-detail-btn kanban-detail-btn-cancel"
>
{language === "de" ? "Abbrechen" : "Cancel"}
</button>
<button
onClick={() => setKanbanDetailTask(null)}
className="kanban-detail-btn kanban-detail-btn-ok"
>
OK
</button>
</div>
</div> </div>
</div> </div>
</div> </div>