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;
-
+    height: 95%;
-    padding: 0 2em 0 2em;
 }
 
 /* CRYP BOX */
 .cryp-box {
     flex: 1 1 100%;
 
-
     display: flex;
-    flex-flow: row wrap;
+    flex-flow: column;
-    justify-content: center;
-    /*
-        this controls the size of the box
-        as it fills the whole container
-    */
-    margin: 0 0 1em 0;
     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%;
+    display: flex;
-    min-width: 150px;
+    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,6 +103,7 @@ function GamePanel(props) {
                     key={cryp.id}
                     style={ activeSkill ? { cursor: 'pointer' } : {}}
                     className="cryp-box" >
+                    <div className="cryp-box-top">
                         <figure
                             className="img"
                             onClick={() => selectSkillTarget(cryp.id)} >
@@ -112,6 +113,7 @@ function GamePanel(props) {
                         <div className="skills">
                             {skills}
                         </div>
+                    </div>
                     <div className="stats">
                         {stats}
                     </div>
@@ -149,10 +151,12 @@ function GamePanel(props) {
                 className="cryp-box"
                 style={ activeSkill ? { cursor: 'pointer' } : {}}
                 onClick={() => selectSkillTarget(cryp.id)} >
+                <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,6 +51,7 @@ function Cryp(cryp, sendVboxApply, setInfo) {
             onDragOver={onDragOver}
             onDrop={onDrop}
             >
+            <div className="cryp-box-top">
                 <figure className="img">
                     {molecule}
                     <figcaption>{cryp.name}</figcaption>
@@ -58,6 +59,7 @@ function Cryp(cryp, sendVboxApply, setInfo) {
                 <div className="skills">
                     {skills}
                 </div>
+            </div>
             <div className="stats">
                 {stats}
             </div>