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}
+
+
+