magnus/Notes
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases 4 Packages Wiki Activity

Checklist management without reordering

Browse source
This commit is contained in:
Magnus Åhall 2024-01-12 21:31:32 +01:00
parent dc2b6dac8b
commit d0f410323e
12 changed files with 1100 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

82
static/css/main.css
View file

@ -330,6 +330,11 @@ header .menu {
padding: 4px;
border-radius: 4px;
}
#markdown pre {
background: #f5f5f5;
padding: 8px;
border-radius: 8px;
}
#markdown pre > code {
background: unset;
padding: 0px;
@ -346,27 +351,72 @@ header .menu {
margin-top: 8px;
margin-bottom: 0px;
}
#checklist .header {
display: grid;
grid-template-columns: repeat(3, min-content);
align-items: center;
grid-gap: 0 16px;
}
#checklist .header img {
height: 20px;
cursor: pointer;
}
#checklist .header + .checklist-group.edit {
margin-top: 16px;
}
#checklist .checklist-group {
display: grid;
grid-template-columns: repeat(4, min-content);
align-items: center;
grid-gap: 0 8px;
margin-top: 1em;
margin-bottom: 8px;
font-weight: bold;
}
#checklist .checklist-group .label {
white-space: nowrap;
}
#checklist .checklist-group .label.ok {
color: #54b356;
}
#checklist .checklist-group .label.error {
color: #d13636;
}
#checklist .checklist-group.edit {
margin-top: 32px;
border-bottom: 1px solid #aaa;
padding-bottom: 8px;
}
#checklist .checklist-group:not(.edit) .reorder {
display: none;
}
#checklist .checklist-group:not(.edit) img {
display: none;
}
#checklist .checklist-group img {
height: 14px;
cursor: pointer;
}
#checklist .checklist-item {
display: grid;
grid-template-columns: min-content 1fr;
grid-template-columns: repeat(3, min-content);
grid-gap: 0 8px;
align-items: center;
margin-top: 0.5em;
padding: 4px 0;
border-bottom: 2px solid #fff;
}
#checklist .checklist-item.checked {
text-decoration: line-through;
color: #888;
color: #aaa;
}
#checklist .checklist-item.drag-target {
border-bottom: 2px solid #71c837;
}
#checklist .checklist-item input[type="checkbox"] {
margin-left: 0px;
margin-right: 8px;
-webkit-appearance: none;
appearance: none;
background-color: #fff;
margin: 0 8px 0 0;
margin: 0 2px 0 0;
font: inherit;
color: currentColor;
width: 1.25em;
@ -377,6 +427,12 @@ header .menu {
display: grid;
place-content: center;
}
#checklist .checklist-item label.ok {
color: #54b356;
}
#checklist .checklist-item label.error {
color: #d13636;
}
#checklist .checklist-item input[type="checkbox"].ok {
border: 0.15em solid #54b356;
}
@ -400,8 +456,22 @@ header .menu {
#checklist .checklist-item input[type="checkbox"]:checked::before {
transform: scale(1);
}
#checklist .checklist-item.edit input[type="checkbox"] {
margin-left: 8px;
}
#checklist .checklist-item:not(.edit) .reorder {
display: none;
}
#checklist .checklist-item:not(.edit) img {
display: none;
}
#checklist .checklist-item img {
height: 14px;
cursor: pointer;
}
#checklist .checklist-item label {
user-select: none;
white-space: nowrap;
}
/* ============================================================= *
* Textarea replicates the height of an element expanding height *