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

140
static/css/main.css
View file

@ -30,48 +30,6 @@ h1 {
.layout-crumbs #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%;
}
.layout-tree-only #crumbs {
display: none;
}
.layout-tree-only .child-nodes {
display: none;
}
.layout-tree-only .node-name {
display: none;
}
.layout-tree-only .node-content {
display: none;
}
.layout-tree-only #file-section {
display: none;
}
#app {
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%;
}
#blackout {
position: absolute;
left: 0px;
@ -383,8 +341,76 @@ header .menu {
white-space: nowrap;
text-align: right;
}
.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%;
}
.layout-tree-only #crumbs {
display: none;
}
.layout-tree-only .child-nodes {
display: none;
}
.layout-tree-only .node-name {
display: none;
}
.layout-tree-only .grow-wrap {
display: none;
}
.layout-tree-only #file-section {
display: none;
}
.layout-tree-only #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 */
}
.layout-crumbs #tree {
display: none;
}
#app {
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%;
}
#app.toggle-tree {
/* blank */
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 */
}
#app.toggle-tree #tree {
display: none;
}
#app.toggle-tree #tree {
display: none;
}
@media only screen and (max-width: 932px) {
#app {
/* blank */
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;
@ -393,6 +419,36 @@ header .menu {
#app #tree {
display: none;
}
#app #tree {
display: none;
}
#app.toggle-tree {
display: grid;
grid-template-areas: "header" "tree";
grid-template-columns: 1fr;
grid-template-rows: min-content /* header */ 1fr;
/* blank */
color: #fff;
height: 100%;
}
#app.toggle-tree #crumbs {
display: none;
}
#app.toggle-tree .child-nodes {
display: none;
}
#app.toggle-tree .node-name {
display: none;
}
#app.toggle-tree .grow-wrap {
display: none;
}
#app.toggle-tree #file-section {
display: none;
}
#app.toggle-tree #tree {
display: block;
}
.node-content {
margin-left: 16px;
padding: 16px;