diff --git a/client/assets/styles/instance.mobile.css b/client/assets/styles/instance.mobile.css index ea3ca032..5d06ec7f 100644 --- a/client/assets/styles/instance.mobile.css +++ b/client/assets/styles/instance.mobile.css @@ -1,19 +1,45 @@ @media (max-height: 800px), (max-width: 800px) { .instance { display: grid; - grid-template-columns: 1fr; - grid-template-rows: min-content; + grid-template-columns: 100%; + grid-template-rows: min-content min-content min-content min-content; grid-template-areas: "top" - "vbox" + "controls" + "first" + "second" } .instance .equip { display: none; } .instance .info { display: none; } .instance .cryp-list { display: none; } + #toggle-vbox-label { + text-align: center; + border: 2px solid #555; + } + #toggle-vbox-label:after{ + content: "Cryps"; + } + + #toggle-vbox:checked ~ #toggle-vbox-label:after{ + content: "Vbox"; + } + + #toggle-vbox:checked ~ .vbox { display: none; } + #toggle-vbox:checked ~ .cryp-list { + display: initial; + grid-area: second; + } + #toggle-vbox:checked ~ .equip { + display: initial; + grid-area: first; + } + + + .vbox { - grid-area: vbox; + grid-area: first; display: grid; grid-template-rows: min-content min-content min-content; grid-template-columns: 1fr; @@ -28,9 +54,20 @@ } .vbox-combiner { - grid-area: combiner; + margin-left: 0; + } + + #toggle-vbox { display: none; } + + #toggle-vbox-label { + grid-area: controls; + color: whitesmoke; + line-height: 1.75em; + font-size: 1.5em; + display: block; + cursor: pointer; + margin-right: 0.5em; } - } \ No newline at end of file diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx index 5dbfb966..ea0d753f 100644 --- a/client/src/components/instance.component.jsx +++ b/client/src/components/instance.component.jsx @@ -53,6 +53,9 @@ function InstanceComponent(args) { {actionBtn} {timer} + + +