Merge branch 'vbox-layout' into new-vbox-combiner

client/assets/styles/game.less

@@ -27,6 +27,7 @@
 
     position: absolute;
     bottom: 0;
+    margin-bottom: 0.5em;
     height: 50%;
 
     .avatar {
@@ -232,8 +233,8 @@
 
 #targeting, .resolving-skill {
     position: absolute;
-    top: 35%;
-    height: 15%;
+    top: calc(35% + 0.5em); // calc for 0.5em top gap
+    height: calc(15% - 1em); // calc for 0.5em + 0.5em top / bottom gap
     width: calc(90% - 1.25em);
     z-index: 2;
     span {
@@ -273,7 +274,7 @@
 /* some stupid bug in chrome makes it fill the entire screen */
 @media screen and (-webkit-min-device-pixel-ratio:0) {
     #targeting {
-        max-height: 10em;
+        // max-height: 10em;
     }
 }
 

client/assets/styles/styles.mobile.less

@@ -1,7 +1,6 @@
 @media (max-width: 800px) {
     body {
         overflow-y: initial;
-
     }
 
     #mnml {
@@ -19,7 +18,7 @@
                 stroke-width: 1.25em;
             }
             .avatar {
-                display: none;
+                opacity: 0.1;
             }
         }
 
@@ -138,7 +137,7 @@
 }
 
 
-// portrait menu
+// portrait menu or small size vertical in landscape
 @media (max-width: 600px) {
     #mnml {
         grid-template-columns: 1fr;
@@ -206,6 +205,14 @@
         }
     }
 
+    .stats {
+        font-size: 6pt;
+    }
+
+    .skill-description {
+        font-size: 6pt;
+    }
+
     section {
         .list {
             grid-template-columns: 1fr;

client/src/components/targeting.arrows.jsx

@@ -110,8 +110,11 @@ class TargetSvg extends Component {
                 ? playerTeam.constructs.findIndex(c => c.id === cast.target_construct_id)
                 : otherTeam.constructs.findIndex(c => c.id === cast.target_construct_id);
 
+            const skillNumber = window.innerWidth <= 800 // mobile styling trigger
+                ? playerTeam.constructs[source].skills.findIndex(s => s.skill === cast.skill)
+                : 0;
             const sourceY = height;
-            const sourceX = (source * width / 3) + width / 24;
+            const sourceX = (source * width / 3) + width / 18 + skillNumber * (width / 9);
             const targetX = (target * width / 3) + width / 6
                 + (defensive ? width / 64 : 0)
                 + (source * width / 18);