combo preview styling

client/assets/styles/instance.less

@@ -35,34 +35,36 @@
         margin-left: 1em;
         grid-area: info;
         display: grid;
-        grid-template-rows: 1fr;
+        grid-template-columns: 1fr min-content;
-        grid-template-columns: 20em 1fr;
         grid-template-areas:
-            "combos item";
+            "item combos";
 
+        .info-item {
+            grid-area: item;
+        }
         .combos {
-
-            margin-right: 1em;
             display: grid;
             grid-area: combos;
+            margin-left: 0.5em;
             grid-template-rows: min-content min-content;
             grid-template-areas:
                 "comboHeader"
                 "comboList";
             .combo-header {
-                font-size: 1.25em;
+                text-align: center;
             }
 
             .combo-list {
                 display: grid;
                 grid-template-rows: min-content min-content min-content;
-                grid-template-columns: 1fr 1fr;
+                grid-template-columns: min-content min-content;
-                grid-gap: 1em;
+                grid-gap: 0.5em;
+                margin-top: 0.5em;
+
                 .table-button {
                     display: grid;
                     text-align: center;
                     align-content: center;
-
                     grid-template-areas:
                         "item"
                         "ingr";
@@ -79,11 +81,17 @@
                         flex: 1;
                         grid-area: item;
                         font-weight: bold;
+                        div {
+                            width: 5em;
+                        }
                     }
 
+
                     div {
                         border-left: 2px solid #222;
                         border-right: 2px solid #222;
+                        height: 1.75em;
+                        width: 7.5em;
                         svg {
                             vertical-align: middle;
                         }

client/assets/styles/styles.mobile.less

@@ -10,14 +10,10 @@
 
         .instance {
             font-size: 7.5pt;
-            grid-template-columns: 1fr;
-            grid-template-rows: min-content 1fr;
-
-            grid-template-areas:
-                "vbox"
-                "constructs";
             .info {
-                display: none;
+                .combos {
+                    display: none;
+                }
             }
             svg {
                 stroke-width: 1.25em;

client/src/components/info.component.jsx

@@ -132,7 +132,7 @@ class InfoComponent extends preact.Component {
 
         const Combos = () => {
             if (tutorial && instance.time_control === 'Practice' && instance.rounds.length === 1) return false;
-            const generalNotes = (
+/*            const generalNotes = (
                 <div>
                     <h2> General </h2>
                     <p>
@@ -140,12 +140,12 @@ class InfoComponent extends preact.Component {
                         Click the <b>READY</b> button to start the <b>GAME PHASE</b>.
                     </p>
                 </div>
-            );
+            );*/
-            if (!player) return generalNotes;
+            if (!player) return false;
-            if (!info) return generalNotes;
+            if (!info) return false;
 
             const vboxCombos = itemInfo.combos.filter(c => c.components.includes(info));
-            if (vboxCombos.length > 6 || vboxCombos.length === 0) return generalNotes;
+            if (vboxCombos.length > 6 || vboxCombos.length === 0) return false;
 
             const comboTable = vboxCombos.map((c, i) => {
                 const mouseOver = e => {
@@ -157,7 +157,7 @@ class InfoComponent extends preact.Component {
                         <div key="1">{convertItem(c.components[2])}</div>]
                     : c.components.map((u, j) => <div key={j} >{convertItem(u)}</div>);
                 return (
-                    <div key={i} onMouseOver={mouseOver} class="table-button" onClick={() => setInfo(c.item)}>
+                    <div key={i} onMouseOver={mouseOver} class="table-button">
                         <div class="item">
                             {convertItem(c.item)}
                         </div>
@@ -165,12 +165,14 @@ class InfoComponent extends preact.Component {
                     </div>
                 );
             });
+            const comboList = comboTable.length > 0 ? <div class="combo-list">{comboTable}</div> : false;
             return (
                 <div class="combos">
-                    <div class="combo-header">COMBOS</div>
+                    <div class="combo-header">
-                    <div class="combo-list">
+                        <h2>COMBOS</h2>
-                        {comboTable}
+                        Combine colours and items.
                     </div>
+                    {comboList}
                 </div>
             );
         };

client/src/components/info.thresholds.jsx

@@ -87,9 +87,16 @@ function specThresholds(player, fullInfo, info) {
         );
     });
     return (
-        <div class="thresholds">
+        <div>
-            {thresholds}
+            <div class="thresholds">
+                {thresholds[0]}
+                {thresholds[1]}
+            </div>
+            <div class="thresholds">
+                {thresholds[2]}
+            </div>
         </div>
+
     );
 }