game wip

html-client/cryps.css

@@ -42,6 +42,8 @@ main {
     display: flex;
     flex-flow: row wrap;
     flex: 1 1 90%;
+
+    padding-top: 1em;
 }
 
 button, input {
@@ -174,7 +176,6 @@ header {
     border-width: 2px;
     padding: 0.5em;
     margin: 0.5em;
-    height: 2.5em;
 }
 
 .instance-btn.full {
@@ -196,7 +197,8 @@ header {
     display: flex;
     flex-flow: row;
 
-    flex: 1 0 100%
+    flex: 0 0 100%;
+    margin-bottom: 1em;
 }
 
 .instance-info {
@@ -215,7 +217,6 @@ header {
     flex: 1 0 50%;
 }
 
-}
 .ready-btn:hover {
     transition-property: all;
     transition-duration: 2s;
@@ -301,7 +302,8 @@ header {
 
 /* CRYP BOX */
 .cryp-box {
-    flex: 1;
+    flex: 1 1 100%;
+
 
     display: flex;
     flex-flow: row wrap;
@@ -380,12 +382,18 @@ header {
     flex: 0 0 25%;
 }
 
-.team-player, .team-opponent {
+.team-player {
-    flex: 0 0 37.5%;
+    flex: 0 0 40%;
+}
+
+.team-opponent {
+    flex: 0 0 20%;
 }
 
 .logs {
-    flex: 25%;
+    display: flex;
+    flex-flow: row wrap;
+    flex: 0 0 20%;
 }
 
 .game-cryp-ctr {
@@ -395,7 +403,7 @@ header {
 }
 
 .game .cryp-box {
-    flex: 1 1 60%;
+    flex: 1 1 100%;
 }
 
 .cryp-skill-btn[disabled] {
@@ -407,13 +415,7 @@ header {
     opacity: 0.5;
 }
 
-.stack {
-    display: flex;
-    flex-flow: column;
-    align-items: stretch;
-}
-
 .stack-line {
     padding-left: 2em;
-    flex: 1 1 40%;
+    flex: 1 0 50%;
 }

html-client/src/components/instance.list.component.jsx

@@ -30,9 +30,10 @@ function instanceList({ instances, setActiveInstance, sendInstanceJoin }) {
         );
     });
 
+    // <h2>Instances</h2>
+
     return (
         <section className="instance-list" >
-            <h2>Instances</h2>
             {instanceJoin}
             {instancePanels}
         </section>