magnus/Notes2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Tree expansion handled better

Browse source
This commit is contained in:
Magnus Åhall 2026-06-03 20:31:23 +02:00
parent bea865dd82
commit a3864d2b55
6 changed files with 143 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

146
static/css/notes2.css
View file

@ -10,8 +10,7 @@
*/
--colorize: invert(59%) sepia(71%) saturate(3270%) hue-rotate(327deg) brightness(100%) contrast(99%);
--show-tree: 0px;
--tree-expander: 0px;
}
html {
@ -22,95 +21,86 @@ html {
filter: var(--colorize);
}
/* ------------------------------------- *
* Default application grid in wide mode *
* ------------------------------------- */
#notes2 {
min-height: 100vh;
display: grid;
grid-template-areas:
"show-tree tree hum crumbs crumbs ding"
"show-tree tree hum name name ding"
"show-tree tree hum sync functions ding"
"show-tree tree hum content content ding"
"show-tree tree hum blank blank ding"
"tree-expander tree pad1 crumbs crumbs pad2"
"tree-expander tree pad1 name name pad2"
"tree-expander tree pad1 sync functions pad2"
"tree-expander tree pad1 content content pad2"
;
grid-template-columns: var(--show-tree) min-content minmax(32px, 1fr) minmax(min-content, calc(900px - 156px)) 156px minmax(32px, 1fr);
grid-template-columns:
/* Tree-expander */
var(--tree-expander)
/* Tree */
min-content minmax(32px, 1fr)
/* Sync */
minmax(min-content, calc(900px - 156px))
/* Functions */
156px
/* Content */
minmax(32px, 1fr);
grid-template-rows:
min-content min-content 48px 1fr;
/* Crumbs */
min-content
/* Name */
min-content
/* Sync */
48px
/* Content */
1fr;
/* Tree expander is collapsed as default */
--tree-expander: 0px;
&.hide-tree {
--show-tree: 32px;
--tree-expander: 32px;
#tree {
border-right: none;
}
n2-tree {
display: none;
}
}
#show-tree {
grid-area: show-tree;
color: #333;
font-weight: bold;
border-right: 2px solid #ddd;
display: grid;
justify-items: center;
align-items: start;
padding-top: 8px;
font-size: 1.25em;
div div {
display: inline-block;
writing-mode: vertical-rl;
transform: rotate(180deg);
}
}
n2-nodeui {
.el-functions {
width: calc(100% - 32px);
}
.el-node-markdown {
overflow-wrap: anywhere;
width: calc(100% - 32px);
}
}
}
/* ------------------------------- *
* Application grid in narrow mode *
* ------------------------------- */
@media only screen and (max-width: 800px) {
#notes2 {
grid-template-areas:
"show-tree hum crumbs ding"
"show-tree hum name ding"
"show-tree hum functions ding"
"show-tree hum content ding"
"show-tree hum blank ding"
"show-tree hum sync ding"
"tree-expander pad1 crumbs pad2"
"tree-expander pad1 name pad2"
"tree-expander pad1 functions pad2"
"tree-expander pad1 content pad2"
"tree-expander pad1 blank pad2"
"tree-expander pad1 sync pad2"
;
grid-template-columns: 32px 16px 1fr 16px;
&.show-tree {
grid-template-areas:
"tree"
;
grid-template-areas: "tree";
grid-template-columns: 100%;
grid-template-rows:
1fr;
grid-template-rows: 1fr;
#tree {
display: grid;
width: 100%;
}
#main-page, #show-tree {
#main-page,
#show-tree {
display: none;
}
}
@ -118,23 +108,26 @@ html {
#tree {
display: none;
}
}
}
n2-syncprogress {
.el-count {
top: 4px;
}
}
#tree-expander {
grid-area: tree-expander;
color: #333;
font-weight: bold;
border-right: 2px solid #ddd;
n2-nodeui {
.el-functions {
width: calc(100% - 32px);
}
display: grid;
justify-items: center;
align-items: start;
.el-node-markdown {
overflow-wrap: anywhere;
width: calc(100% - 32px);
}
}
padding-top: 8px;
font-size: 1.25em;
div div {
display: inline-block;
writing-mode: vertical-rl;
transform: rotate(180deg);
}
}
@ -181,10 +174,8 @@ html {
&:focus-within {
n2-tree {}
}
.node {
display: grid;
grid-template-columns: 40px min-content;
@ -233,6 +224,9 @@ html {
}
}
n2-nodeui {
}
[id^="page-"] {
display: none;
}
@ -403,6 +397,7 @@ n2-nodeui {
.el-functions {
grid-area: functions;
width: calc(100% - 32px);
}
.el-node-content {
@ -438,6 +433,9 @@ n2-nodeui {
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
margin-bottom: 32px;
overflow-wrap: anywhere;
width: calc(100% - 32px);
}
&.show-markdown {