Added checklists to database, rendering and toggling items
This commit is contained in:
Magnus Åhall
parent
5c27f9ed1c
commit
f98a6ab863
9 changed files with 455 additions and 31 deletions
|
|
@ -26,12 +26,12 @@ body {
|
|||
height: 100%;
|
||||
}
|
||||
h1 {
|
||||
margin-top: 0px;
|
||||
font-size: 1.5em;
|
||||
color: #518048;
|
||||
}
|
||||
h2 {
|
||||
margin-top: 32px;
|
||||
font-size: 1.25em;
|
||||
color: #518048;
|
||||
}
|
||||
button {
|
||||
font-size: 1em;
|
||||
|
|
@ -307,10 +307,15 @@ header .menu {
|
|||
padding-top: 16px;
|
||||
}
|
||||
#markdown {
|
||||
padding: 16px;
|
||||
color: #333;
|
||||
grid-area: content;
|
||||
justify-self: center;
|
||||
width: calc(100% - 32px);
|
||||
max-width: 900px;
|
||||
padding: 0.5rem;
|
||||
border-radius: 8px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
#markdown table {
|
||||
border-collapse: collapse;
|
||||
|
|
@ -330,6 +335,68 @@ header .menu {
|
|||
padding: 0px;
|
||||
border-radius: 0px;
|
||||
}
|
||||
#checklist {
|
||||
grid-area: checklist;
|
||||
color: #333;
|
||||
justify-self: center;
|
||||
width: calc(100% - 32px);
|
||||
max-width: 900px;
|
||||
padding: 0.5rem;
|
||||
border-radius: 8px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
#checklist .checklist-group {
|
||||
margin-top: 1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
#checklist .checklist-item {
|
||||
display: grid;
|
||||
grid-template-columns: min-content 1fr;
|
||||
align-items: center;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
#checklist .checklist-item.checked {
|
||||
text-decoration: line-through;
|
||||
color: #888;
|
||||
}
|
||||
#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;
|
||||
font: inherit;
|
||||
color: currentColor;
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
border: 0.15em solid currentColor;
|
||||
border-radius: 0.15em;
|
||||
transform: translateY(-0.075em);
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
#checklist .checklist-item input[type="checkbox"].ok {
|
||||
border: 0.15em solid #54b356;
|
||||
}
|
||||
#checklist .checklist-item input[type="checkbox"].ok::before {
|
||||
box-shadow: inset 1em 1em #54b356;
|
||||
}
|
||||
#checklist .checklist-item input[type="checkbox"]::before {
|
||||
content: "";
|
||||
width: 0.7em;
|
||||
height: 0.7em;
|
||||
transform: scale(0);
|
||||
transition: 120ms transform ease-in-out;
|
||||
box-shadow: inset 1em 1em #666;
|
||||
}
|
||||
#checklist .checklist-item input[type="checkbox"]:checked::before {
|
||||
transform: scale(1);
|
||||
}
|
||||
#checklist .checklist-item label {
|
||||
user-select: none;
|
||||
}
|
||||
/* ============================================================= *
|
||||
* Textarea replicates the height of an element expanding height *
|
||||
* ============================================================= */
|
||||
|
|
@ -476,9 +543,9 @@ header .menu {
|
|||
}
|
||||
.layout-tree {
|
||||
display: grid;
|
||||
grid-template-areas: "header header" "tree crumbs" "tree child-nodes" "tree name" "tree content" "tree files" "tree blank";
|
||||
grid-template-areas: "header header" "tree crumbs" "tree child-nodes" "tree name" "tree content" "tree checklist" "tree files" "tree blank";
|
||||
grid-template-columns: min-content 1fr;
|
||||
grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* files */ 1fr;
|
||||
grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* checklist */ min-content /* files */ 1fr;
|
||||
/* blank */
|
||||
color: #fff;
|
||||
min-height: 100%;
|
||||
|
|
@ -511,14 +578,17 @@ header .menu {
|
|||
display: block;
|
||||
}
|
||||
.layout-crumbs {
|
||||
grid-template-areas: "header" "crumbs" "child-nodes" "name" "content" "files" "blank";
|
||||
grid-template-areas: "header" "crumbs" "child-nodes" "name" "content" "checklist" "files" "blank";
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* files */ 1fr;
|
||||
grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* checklist */ min-content /* files */ 1fr;
|
||||
/* blank */
|
||||
}
|
||||
.layout-crumbs #tree {
|
||||
display: none;
|
||||
}
|
||||
.layout-crumbs #checklist {
|
||||
padding: 16px;
|
||||
}
|
||||
.layout-keys {
|
||||
display: grid;
|
||||
grid-template-areas: "header" "keys";
|
||||
|
|
@ -557,22 +627,25 @@ header .menu {
|
|||
}
|
||||
#app.node {
|
||||
display: grid;
|
||||
grid-template-areas: "header header" "tree crumbs" "tree child-nodes" "tree name" "tree content" "tree files" "tree blank";
|
||||
grid-template-areas: "header header" "tree crumbs" "tree child-nodes" "tree name" "tree content" "tree checklist" "tree files" "tree blank";
|
||||
grid-template-columns: min-content 1fr;
|
||||
grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* files */ 1fr;
|
||||
grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* checklist */ min-content /* files */ 1fr;
|
||||
/* blank */
|
||||
color: #fff;
|
||||
min-height: 100%;
|
||||
}
|
||||
#app.node.toggle-tree {
|
||||
grid-template-areas: "header" "crumbs" "child-nodes" "name" "content" "files" "blank";
|
||||
grid-template-areas: "header" "crumbs" "child-nodes" "name" "content" "checklist" "files" "blank";
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* files */ 1fr;
|
||||
grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* checklist */ min-content /* files */ 1fr;
|
||||
/* blank */
|
||||
}
|
||||
#app.node.toggle-tree #tree {
|
||||
display: none;
|
||||
}
|
||||
#app.node.toggle-tree #checklist {
|
||||
padding: 16px;
|
||||
}
|
||||
#profile-settings {
|
||||
color: #333;
|
||||
padding: 16px;
|
||||
|
|
@ -588,14 +661,17 @@ header .menu {
|
|||
}
|
||||
@media only screen and (max-width: 932px) {
|
||||
#app.node {
|
||||
grid-template-areas: "header" "crumbs" "child-nodes" "name" "content" "files" "blank";
|
||||
grid-template-areas: "header" "crumbs" "child-nodes" "name" "content" "checklist" "files" "blank";
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* files */ 1fr;
|
||||
grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* checklist */ min-content /* files */ 1fr;
|
||||
/* blank */
|
||||
}
|
||||
#app.node #tree {
|
||||
display: none;
|
||||
}
|
||||
#app.node #checklist {
|
||||
padding: 16px;
|
||||
}
|
||||
#app.node.toggle-tree {
|
||||
display: grid;
|
||||
grid-template-areas: "header" "tree";
|
||||
|
|
@ -628,7 +704,9 @@ header .menu {
|
|||
padding: 16px;
|
||||
justify-self: start;
|
||||
}
|
||||
#file-section {
|
||||
#file-section,
|
||||
#checklist,
|
||||
#markdown {
|
||||
width: calc(100% - 32px);
|
||||
padding: 16px;
|
||||
margin-left: 16px;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue