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

Better mobile view

Browse source
This commit is contained in:
Magnus Åhall 2026-06-02 22:50:15 +02:00
parent 1d75aa8c3e
commit 3bd0819cbc
4 changed files with 141 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

117
static/css/notes2.css
View file

@ -10,6 +10,8 @@
*/
--colorize: invert(59%) sepia(71%) saturate(3270%) hue-rotate(327deg) brightness(100%) contrast(99%);
--show-tree: 0px;
}
html {
@ -25,26 +27,93 @@ html {
display: grid;
grid-template-areas:
"tree hum crumbs crumbs ding"
"tree hum name name ding"
"tree hum sync functions ding"
"tree hum content content ding"
"tree hum blank blank ding"
"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"
;
grid-template-columns: min-content minmax(16px, 1fr) minmax(min-content, calc(900px - 156px)) 156px minmax(16px, 1fr);
grid-template-columns: var(--show-tree) min-content minmax(32px, 1fr) minmax(min-content, calc(900px - 156px)) 156px minmax(32px, 1fr);
grid-template-rows:
min-content min-content 48px 1fr;
&.hide-tree {
--show-tree: 32px;
#tree {
border-right: none;
}
n2-tree {
display: none;
@media only screen and (max-width: 600px) {
}
}
#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);
}
}
}
@media only screen and (max-width: 800px) {
#notes2 {
grid-template-areas:
"crumbs"
"sync"
"name"
"content"
"blank"
"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"
;
grid-template-columns: 1fr;
grid-template-columns: 32px 16px 1fr 16px;
&.show-tree {
grid-template-areas:
"tree"
;
grid-template-columns: 100%;
grid-template-rows:
1fr;
#tree {
display: grid;
width: 100%;
}
#main-page, #show-tree {
display: none;
}
}
#tree {
display: none;
@ -55,8 +124,18 @@ html {
top: 4px;
}
}
}
n2-nodeui {
.el-functions {
width: calc(100% - 32px);
}
.el-node-markdown {
overflow-wrap: anywhere;
width: calc(100% - 32px);
}
}
}
}
#tree {
@ -101,8 +180,7 @@ html {
}
&:focus-within {
n2-tree {
}
n2-tree {}
}
@ -171,6 +249,7 @@ html {
&.storage {
#page-storage {
display: contents;
n2-pagestorage {
grid-area: content;
}
@ -180,6 +259,7 @@ html {
&.history {
#page-history {
display: contents;
n2-pagehistory {
grid-area: content;
}
@ -196,11 +276,10 @@ html {
margin: 0 16px 16px 16px;
n2-crumbs {
background: #e4e4e4;
background: #eaeaea;
display: flex;
flex-wrap: wrap;
padding: 8px 16px;
background: #e4e4e4;
color: #333;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
@ -317,7 +396,7 @@ n2-nodeui {
color: #333;
font-weight: bold;
text-align: center;
font-size: 1.15em;
font-size: 1.5em;
margin-top: 8px;
margin-bottom: 0px;
}