diff --git a/client/instance.css b/client/instance.css index 90a3998a..ee69ec1d 100644 --- a/client/instance.css +++ b/client/instance.css @@ -3,14 +3,17 @@ */ .instance { - display: grid; + height: 100%; + /*display: grid;*/ grid-template-columns: repeat(12, 1fr); - grid-template-rows: repeat(11, 1fr); + grid-template-rows: repeat(10, 1fr); grid-template-areas: "n n n n n n n n n n n n" "v v v v v v v v v i i i" "v v v v v v v v v i i i" "v v v v v v v v v i i i" + "v v v v v v v v v i i i" + "e e e e e e e e e e e e" "e e e e e e e e e e e e" "c c c c c c c c c c c c" "c c c c c c c c c c c c" @@ -28,18 +31,23 @@ } .instance-info { - grid-area: i; - justify-self: start; - padding-left: 20px; + flex: 0 0 50%; + padding-left: 1em; } .instance .spacer { flex-grow: 1 } +.vbox-top { + display: flex; + flex: 1; +} + .vbox { grid-area: v; display: flex; + flex: 0 0 50%; } .vbox-box { @@ -179,14 +187,13 @@ "av av av sk sk" "av av av sk sk" "st st st st st"; - max-height: 450px; - max-width: 450px; margin-left: 1em; border: 1px solid whitesmoke; transition-property: all; transition-duration: 0.5s; transition-delay: 0; transition-timing-function: ease; + max-height: 450px; } .instance-cryp:first-child { @@ -311,18 +318,15 @@ .instance-equip { grid-area: e; display: flex; - justify-content: center; } .instance-equip .items { display: flex; - justify-content: center; flex: 1 1 100%; } .instance-equip .label { display: flex; - justify-content: center; font-size: 20pt; padding: 15px; diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx index 2c76cafc..d10380fd 100644 --- a/client/src/components/instance.component.jsx +++ b/client/src/components/instance.component.jsx @@ -53,10 +53,12 @@ function InstanceComponent(args) { {actionBtn} {timer} - - +
+ + +
- + ); } diff --git a/client/styles.css b/client/styles.css index d50f60fc..2bcae44a 100644 --- a/client/styles.css +++ b/client/styles.css @@ -2,7 +2,7 @@ GLOBAL */ -html, body, .cryps { +html, body, main { width: 100%; margin: 0; @@ -17,9 +17,9 @@ html, body, .cryps { -ms-user-select: none; /* this is the sweet nectar to keep it full page*/ - height: 99%; - max-height: 99%; - min-height: 99%; + height: 100%; + max-height: 100%; + min-height: 100%; /*padding: 0 20%;*/ } @@ -50,13 +50,20 @@ figure { main { padding: 0 2em; display: grid; - grid-template-columns: repeat(6, 1fr); - grid-template-rows: repeat(10, 1fr); + grid-template-columns: repeat(10, minmax(min-content, 10%)); + grid-template-rows: repeat(10, minmax(min-content, 10%)); grid-template-areas: - "hd hd hd hd hd hd hd hd hd" - "nav main main main main main main main main" - "ft ft ft ft ft ft ft ft ft"; + "hd hd hd hd hd hd hd hd hd hd" + "nav main main main main main main main main main" + "nav main main main main main main main main main" + "nav main main main main main main main main main" + "nav main main main main main main main main main" + "nav main main main main main main main main main" + "nav main main main main main main main main main" + "nav main main main main main main main main main" + "nav main main main main main main main main main" + "ft ft ft ft ft ft ft ft ft ft"; } nav { @@ -269,7 +276,7 @@ header { display: flex; flex-flow: row; grid-area: hd; - margin-bottom: 1em; + margin-bottom: 1.5em; } .header-title {