whew lad

client/assets/styles/instance.css

@@ -163,12 +163,11 @@
 
 .construct-list {
     grid-area: constructs;
-
+    display: flex;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
 }
 
-.instance-construct, .instance-construct-active {
+.instance-construct {
+    flex: 1;
     display: grid;
     grid-template-rows: min-content min-content min-content 1fr min-content;
     grid-template-areas:
@@ -178,13 +177,12 @@
         "avatar "
         "stats  ";
 
-    /*margin: 0 2em;*/
     padding: 0.5em;
     border: 2px solid #222;
     border-left-width: 0;
 }
 
-.instance-construct:first-child, .instance-construct-active:first-child {
+.instance-construct:first-child {
     margin-left: 0;
     border-left-width: 1px;
 }

client/assets/styles/instance.mobile.css

@@ -2,7 +2,7 @@
     .instance {
         display: grid;
         grid-template-columns: 1fr;
-        grid-template-rows: min-content, 1fr;
+        grid-template-rows: min-content 1fr;
         grid-template-areas:
             "vbox"
             "constructs";
@@ -41,15 +41,12 @@
     }
 
     .instance.constructs-visible .construct-list {
-        grid-area: constructs;
+        display: flex;
-        display: grid;
+        flex-flow: row;
-        justify-content: center;
+        align-content: flex-end;
-
+        height: 100%;
-        grid-template-columns: 1fr 1fr;
-        grid-template-rows: 1fr 1fr;
     }
 
-
     .vbox-inventory {
         margin-left: 0;
     }
@@ -58,49 +55,12 @@
         margin-left: 0;
     }
 
-    .construct-list .skills {
-        flex-flow: row;
-        align-items: stretch;
-    }
-
     .equip {
         border: none;
     }
 
     .instance-construct {
-        grid-row: 2;
+        flex: 1;
-        display: grid;
-        grid-template-rows: min-content 1fr;
-        grid-template-areas:
-            "name   "
-            "avatar ";
-        padding: 0.5em;
-        border: none;
-        transition-property: all;
-        transition-duration: 0.5s;
-        transition-delay: 0;
-        transition-timing-function: ease;
-    }
-
-    .instance-construct .skills {
-        display: none;
-    }
-
-    .instance-construct .specs {
-        display: none;
-    }
-
-    .instance-construct .stats {
-        display: none;
-    }
-
-    .instance-construct-active .avatar {
-        min-height: 150px;
-    }
-
-    .instance-construct-active {
-        grid-row: 1;
-        grid-column: 1 / 3;
         display: grid;
         grid-template-rows: min-content min-content min-content 1fr min-content;
         grid-template-areas:
@@ -110,24 +70,37 @@
             "avatar "
             "stats  ";
 
-        padding: 0.5em;
+        border-top: 1px solid #222;
-        border: none;
+
         transition-property: all;
         transition-duration: 0.5s;
         transition-delay: 0;
         transition-timing-function: ease;
     }
 
-    .instance-construct-active .specs {
+    .instance-construct:not(:last-child) {
+        border-right: 1px solid #222;
+    }
+
+    .instance-construct .specs {
         margin: 0;
     }
 
-    .instance-construct-active img {
+    .construct-list .stats {
-        width: 55px;
+        flex-flow: row wrap;
     }
 
-    .instance-construct:last-child {
+    .construct-list .stats figcaption {
-        border-left: 1px solid #222;
+        font-size: 75%;
+    }
+
+    .instance-construct .stats figure.speed {
+        order: -1;
+        flex: 1 0 100%;
+    }
+
+    .instance-construct .stats figure {
+        flex: 1 0 33%;
     }
 
     .instance-nav {

client/assets/styles/styles.css

@@ -521,7 +521,6 @@ main .top button {
 }
 
 .timer {
-    flex: 1 0 100%;
     background: whitesmoke;
     transition-property: all;
     transition-duration: 0.5s;

client/src/components/instance.constructs.jsx

@@ -199,11 +199,8 @@ function Construct(props) {
         </figure>;
     });
 
-    const activeId = activeConstruct ? activeConstruct.id : false;
-    const constructClass = activeId === construct.id ? 'instance-construct-active' : 'instance-construct';
-
     return (
-        <div key={construct.id} className={constructClass} onClick={onClick} >
+        <div key={construct.id} class="instance-construct" onClick={onClick} >
             <ConstructAvatar name={construct.name} id={construct.id} />
             <h2 className="name" >{construct.name}</h2>
             <div className="skills" onMouseOver={e => hoverInfo(e, 'constructSkills')} >