diff --git a/html-client/cryps.css b/html-client/cryps.css index d2c585f5..366fc824 100755 --- a/html-client/cryps.css +++ b/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 { - flex: 0 0 37.5%; +.team-player { + 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%; } \ No newline at end of file diff --git a/html-client/src/components/instance.list.component.jsx b/html-client/src/components/instance.list.component.jsx index 105762e8..119e9991 100644 --- a/html-client/src/components/instance.list.component.jsx +++ b/html-client/src/components/instance.list.component.jsx @@ -30,9 +30,10 @@ function instanceList({ instances, setActiveInstance, sendInstanceJoin }) { ); }); + //

Instances

+ return (
-

Instances

{instanceJoin} {instancePanels}