style(tasks): improve individual items design

This commit is contained in:
Elian Doran 2025-02-19 18:40:26 +02:00
parent ad492619f5
commit d4ef15212f
No known key found for this signature in database

View File

@ -11,8 +11,8 @@ const TPL = `
<input type="text" placeholder="Add a new task" class="add-new-task" /> <input type="text" placeholder="Add a new task" class="add-new-task" />
</header> </header>
<div class="task-container"> <ol class="task-container">
</div> </ol>
<style> <style>
.note-detail-task-list { .note-detail-task-list {
@ -34,12 +34,26 @@ const TPL = `
width: 100%; width: 100%;
padding: 0.25em 0.5em; padding: 0.25em 0.5em;
} }
.note-detail-task-list .task-container {
list-style-type: none;
margin: 0;
padding: 0;
border-radius: var(--bs-border-radius);
overflow: hidden;
}
.note-detail-task-list .task-container li {
background: var(--input-background-color);
border-bottom: 1px solid var(--main-background-color);
padding: 0.5em 1em;
}
</style> </style>
</div> </div>
`; `;
function buildTask(task: FTask) { function buildTask(task: FTask) {
return `<div class="task">${task.title}</div>`; return `<li class="task">${task.title}</li>`;
} }
export default class TaskListWidget extends TypeWidget { export default class TaskListWidget extends TypeWidget {