Improve task list rendering when readonly

This commit is contained in:
Adrian Gruntkowski 2024-12-07 21:03:57 +01:00
parent 23a1929ddd
commit 10fc27e13d
2 changed files with 13 additions and 1 deletions

View file

@ -185,10 +185,15 @@ function renderNote(note) {
note.content.forEach((task) => {
const item = document.createElement("li");
if (task.checked) {
item.classList.add("checked");
}
const check = document.createElement("p");
check.classList.add("checkbox");
check.textContent = task.checked ? "☑" : "☐";
item.appendChild(check);
const itemContent = document.createElement("p");
itemContent.classList.add("content");
itemContent.replaceChildren(...renderText(task.content));
item.appendChild(itemContent);
list.append(item);

View file

@ -280,6 +280,8 @@ button {
}
.note.readonly ul {
display: flex;
flex-direction: column;
wdith: 100%;
list-style-type: none;
margin: 0;
@ -293,10 +295,15 @@ button {
margin-bottom: 4px;
}
task-list li:has(.checkbox input:checked) {
.note.readonly ul li.checked {
order: 1;
}
.note.readonly ul li.checked .content {
text-decoration: line-through;
color: var(--inactive-color);
}
.hidden {
display: none;
}