Fitted info back in nicely

This commit is contained in:
Mashy 2019-05-10 12:38:35 +10:00
parent e19b27af49
commit 80e1d4a358

View File

@ -5,15 +5,19 @@
.instance { .instance {
display: grid; display: grid;
grid-template-columns: repeat(12, 1fr); grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(7, 1fr); grid-template-rows: repeat(11, 1fr);
grid-template-areas: grid-template-areas:
"n v v v v v v v v v v v" "n v v v v v v v x x x x"
"n v v v v v v v v v v v" "n v v v v v v v x x x x"
"x x g g g g g g g g g g" "n v v v v v v v x x x x"
"x x f f f f f f f f f f" "n v v v v v v v x x x x"
"x x f f f f f f f f f f" "g g g g g g g g x x x x"
"x x f f f f f f f f f f" "g g g g g g g g x x x x"
"x x f f f f f f f f f f"; "f f f f f f f f x x x x"
"f f f f f f f f x x x x"
"f f f f f f f f x x x x"
"f f f f f f f f x x x x"
"f f f f f f f f x x x x";
} }
.instance-hdr { .instance-hdr {
@ -25,9 +29,24 @@
.instance-info { .instance-info {
grid-area: x; grid-area: x;
justify-self: start;
flex: 0 0 50%; flex: 0 0 50%;
} }
.instance-cryp-list {
grid-area: f;
flex: 1 1 auto;
display: flex;
flex-flow: row;
padding: 0 2em 0 2em;
justify-content: center;
min-width: 300px;
overflow: hidden;
}
.instance .spacer { .instance .spacer {
flex-grow: 1 flex-grow: 1
} }
@ -39,7 +58,7 @@
grid-template-rows: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr);
grid-template-areas: grid-template-areas:
"vb vb vb vb vb . i i i i i" "vb vb vb vb vb . i i i i i"
"vb vb vb vb vb . i i i i i" "vb vb vb vb vb . i i i i i";
} }
.vbox-box { .vbox-box {
@ -174,28 +193,14 @@ table td svg {
flex: 1 0 25%; flex: 1 0 25%;
} }
.instance-cryp-list {
grid-area: f;
flex: 1 1 25%;
display: flex;
flex-flow: row;
padding: 0 2em 0 2em;
justify-content: center;
min-width: 300px;
overflow: hidden;
}
/* CRYP BOX */ /* CRYP BOX */
.instance-cryp { .instance-cryp {
flex: 1 1 100%; flex: 1 1 auto;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
border: 1px solid whitesmoke; border: 1px solid whitesmoke;
margin-left: 1em; margin-left: 1em;
justify-content: center;
max-width: 350px; max-width: 350px;
transition-property: all; transition-property: all;
transition-duration: 0.5s; transition-duration: 0.5s;