zoldar/jenot
1
0
Fork 0
mirror of https://github.com/zoldar/jenot.git synced 2026-01-05 07:02:55 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve task list rendering when readonly

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

5
priv/static/js/jenot.js
View file

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

9
priv/static/style.css
View file

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