wip

html-client/cryps.css

@@ -202,7 +202,7 @@ header {
 }
 
 .instance-info {
-    flex: 1 0 50%;
+    flex: 0 1 50%;
 }
 
 .instance .spacer {
@@ -233,7 +233,7 @@ header {
 }
 
 .vbox {
-    flex: 0 0 25%;
+    flex: 1 1 25%;
 
     display: flex;
     flex-flow: row wrap;
@@ -292,33 +292,35 @@ header {
 }
 
 .instance-cryp-list {
-    flex: 0 0 25%;
+    flex: 1 1 25%;
+
 
     display: flex;
     flex-flow: column;
-
-    padding: 0 2em 0 2em;
+    height: 95%;
 }
 
 /* CRYP BOX */
 .cryp-box {
     flex: 1 1 100%;
 
-
     display: flex;
-    flex-flow: row wrap;
-    justify-content: center;
-    /*
-        this controls the size of the box
-        as it fills the whole container
-    */
-    margin: 0 0 1em 0;
+    flex-flow: column;
     border: 1px solid whitesmoke;
+    margin-bottom: 1em;
+    justify-content: center;
+}
+
+.cryp-box-top {
+    display: flex;
+    flex: 1 1 80%;
+    width: 100%;
+    justify-content: center;
 }
 
 .cryp-box figure {
     margin: 0;
-    flex: 0 1 50%;
+    flex: 0 0 50%;
     text-align: center;
     box-sizing: border-box;
     display: flex;
@@ -326,8 +328,9 @@ header {
 }
 
 .cryp-box .stats {
-    display: flex;
+    flex: 0 0 20%;
     width: 100%;
+    display: flex;
     border-top: 1px solid whitesmoke;
 }
 
@@ -349,16 +352,15 @@ header {
 }
 
 .cryp-box .skills {
-    width: 50%;
-    min-width: 150px;
+    display: flex;
+    flex-flow: row wrap;
     flex: 1 1 50%;
 }
 
 .cryp-skill-btn {
-    font-size: 125%;
+    flex: 1 1 100%;
+    font-size: 16pt;
     border-width: 1px;
-    width: 100%;
-    height: 25%;
     padding: 0;
     margin: 0;
     border-bottom-width: 0px;

html-client/src/components/game.component.jsx

@@ -103,14 +103,16 @@ function GamePanel(props) {
                     key={cryp.id}
                     style={ activeSkill ? { cursor: 'pointer' } : {}}
                     className="cryp-box" >
-                    <figure
-                        className="img"
-                        onClick={() => selectSkillTarget(cryp.id)} >
-                        {molecule}
-                        <figcaption>{cryp.name}</figcaption>
-                    </figure>
-                    <div className="skills">
-                        {skills}
+                    <div className="cryp-box-top">
+                        <figure
+                            className="img"
+                            onClick={() => selectSkillTarget(cryp.id)} >
+                            {molecule}
+                            <figcaption>{cryp.name}</figcaption>
+                        </figure>
+                        <div className="skills">
+                            {skills}
+                        </div>
                     </div>
                     <div className="stats">
                         {stats}
@@ -149,10 +151,12 @@ function GamePanel(props) {
                 className="cryp-box"
                 style={ activeSkill ? { cursor: 'pointer' } : {}}
                 onClick={() => selectSkillTarget(cryp.id)} >
-                <figure className="img">
-                    {molecule}
-                    <figcaption>{cryp.name}</figcaption>
-                </figure>
+                <div className="cryp-box-top">
+                    <figure className="img">
+                        {molecule}
+                        <figcaption>{cryp.name}</figcaption>
+                    </figure>
+                </div>
                 <div className="stats">
                     {stats}
                 </div>

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

@@ -51,12 +51,14 @@ function Cryp(cryp, sendVboxApply, setInfo) {
             onDragOver={onDragOver}
             onDrop={onDrop}
             >
-            <figure className="img">
-                {molecule}
-                <figcaption>{cryp.name}</figcaption>
-            </figure>
-            <div className="skills">
-                {skills}
+            <div className="cryp-box-top">
+                <figure className="img">
+                    {molecule}
+                    <figcaption>{cryp.name}</figcaption>
+                </figure>
+                <div className="skills">
+                    {skills}
+                </div>
             </div>
             <div className="stats">
                 {stats}