Keys unlocking/locking

This commit is contained in:
Magnus Åhall 2023-07-01 20:33:26 +02:00
parent f9dfc8835c
commit c65f46a17d
13 changed files with 3271 additions and 82 deletions

View file

@ -19,16 +19,8 @@ body {
height: 100%;
}
h1 {
color: #abc837;
}
.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;
margin-top: 0px;
font-size: 1em;
}
#blackout {
position: absolute;
@ -113,10 +105,21 @@ h1 {
#upload .files .progress.done {
color: #0a0;
}
#properties {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #333;
background: #fff;
border: 2px solid #000;
padding: 16px;
z-index: 1025;
}
header {
display: grid;
grid-area: header;
grid-template-columns: min-content 1fr min-content min-content;
grid-template-columns: min-content 1fr repeat(3, min-content);
align-items: center;
padding: 0px;
color: #333c11;
@ -149,6 +152,13 @@ header .add {
padding-right: 16px;
cursor: pointer;
}
header .keys {
padding-right: 16px;
}
header .keys img {
cursor: pointer;
height: 24px;
}
header .menu {
font-size: 1.25em;
padding-right: 16px;
@ -341,6 +351,34 @@ header .menu {
white-space: nowrap;
text-align: right;
}
#keys {
padding: 32px;
color: #333;
}
#keys .key-list {
display: grid;
grid-template-columns: min-content 1fr;
grid-gap: 12px 12px;
align-items: end;
margin-top: 16px;
font-size: 0.85em;
}
#keys .key-list .status {
cursor: pointer;
}
#keys .key-list .status img {
height: 32px;
}
#keys .key-list .status .locked {
color: #a00;
}
#keys .key-list .status .unlocked {
color: #0a0;
}
#keys .key-list .description {
cursor: pointer;
padding-bottom: 4px;
}
.layout-tree {
display: grid;
grid-template-areas: "header header" "tree crumbs" "tree child-nodes" "tree name" "tree content" "tree files" "tree blank";
@ -386,6 +424,36 @@ header .menu {
.layout-crumbs #tree {
display: none;
}
.layout-keys {
display: grid;
grid-template-areas: "header" "keys";
grid-template-columns: 1fr;
grid-template-rows: min-content /* header */ 1fr;
/* blank */
color: #fff;
height: 100%;
}
.layout-keys #crumbs {
display: none;
}
.layout-keys .child-nodes {
display: none;
}
.layout-keys .node-name {
display: none;
}
.layout-keys .grow-wrap {
display: none;
}
.layout-keys #file-section {
display: none;
}
.layout-keys #tree {
display: none;
}
.layout-keys #keys {
display: block;
}
#app {
display: grid;
grid-template-areas: "header header" "tree crumbs" "tree child-nodes" "tree name" "tree content" "tree files" "tree blank";
@ -396,7 +464,6 @@ header .menu {
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;
@ -405,12 +472,8 @@ header .menu {
#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;
@ -419,9 +482,6 @@ header .menu {
#app #tree {
display: none;
}
#app #tree {
display: none;
}
#app.toggle-tree {
display: grid;
grid-template-areas: "header" "tree";