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

Mobile layout and tree toggling

Browse source
This commit is contained in:
Magnus Åhall 2023-06-27 15:08:48 +02:00
parent 58ddc86635
commit f308764816
5 changed files with 277 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

129
static/less/main.less
View file

@ -48,55 +48,6 @@ h1 {
#tree { display: none }
}
.layout-tree {
display: grid;
grid-template-areas:
"header header"
"tree crumbs"
"tree child-nodes"
"tree name"
"tree content"
"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; /* blank */
color: #fff;
height: 100%;
}
.layout-tree-only {
display: grid;
grid-template-areas:
"header"
"tree"
;
grid-template-columns: 1fr;
grid-template-rows:
min-content /* header */
1fr; /* blank */
color: #fff;
height: 100%;
#crumbs { display: none }
.child-nodes { display: none }
.node-name { display: none }
.node-content { display: none }
#file-section { display: none }
}
#app {
.layout-tree();
}
#blackout {
position: absolute;
left: 0px;
@ -464,9 +415,87 @@ header {
}
}
.layout-tree {// {{{
display: grid;
grid-template-areas:
"header header"
"tree crumbs"
"tree child-nodes"
"tree name"
"tree content"
"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; /* blank */
color: #fff;
height: 100%;
}// }}}
.layout-tree-only {// {{{
display: grid;
grid-template-areas:
"header"
"tree"
;
grid-template-columns: 1fr;
grid-template-rows:
min-content /* header */
1fr; /* blank */
color: #fff;
height: 100%;
#crumbs { display: none }
.child-nodes { display: none }
.node-name { display: none }
.grow-wrap { display: none }
#file-section { display: none }
#tree { display: block }
}// }}}
.layout-crumbs {// {{{
grid-template-areas:
"header"
"crumbs"
"child-nodes"
"name"
"content"
"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; /* blank */
#tree { display: none }
}// }}}
#app {
.layout-tree();
&.toggle-tree {
.layout-crumbs();
}
}
@media only screen and (max-width: 932px) {
#app {
.layout-crumbs();
&.toggle-tree {
.layout-tree-only();
}
}
.node-content {
@ -482,3 +511,5 @@ header {
justify-self: start;
}
}
// vim: foldmethod=marker