combo styles

client/assets/styles/instance.less

@@ -11,7 +11,7 @@
 
 @media (max-width: 1920px) {
     .instance .info table td svg {
-        height: 50%;
+        // height: 50%;
         stroke-width: 8px;
     }
 
@@ -33,22 +33,53 @@
 }
 
 .instance .info {
+    margin: 0 0 0 1em;
     grid-area: info;
-    font-size: 85%;
 
     display: grid;
-    font-size: 85%;
     grid-template-rows: 1fr 1fr;
     grid-template-areas:
         "item"
         "combos";
-    // flex-flow: column;
-    // white-space: pre-wrap;
 
-    flex-direction: column;
     .info-item {
         flex: 1;
-        margin: 0 0 0 1em;
+        font-size: 90%;
+    }
+
+    .combos {
+        display: grid;
+        grid-template-columns: repeat(6, 1fr);
+
+        .table-button {
+            display: grid;
+            text-align: center;
+
+            grid-template-areas:
+                "item"
+                "ingr";
+
+            .item {
+                border-bottom: 2px solid #222;
+                flex: 1;
+                grid-area: item;
+                font-weight: bold;
+            }
+
+            div {
+                border-right: 2px solid #222;
+
+                svg {
+                    vertical-align: bottom;
+                }
+            }
+
+            &:last-child {
+                div {
+                    border-right: 0;
+                }
+            }
+        }
     }
 }
 

client/src/components/info.component.jsx

@@ -133,7 +133,7 @@ class InfoComponent extends preact.Component {
         const Combos = () => {
             if (tutorial && instance.time_control === 'Practice' && instance.rounds.length === 1) return false;
             const generalNotes = (
-                <div class="combos">
+                <div>
                     <h2> General </h2>
                     <p>
                         You can preview combos by clicking the combined item when it appears in this section. <br />
@@ -148,24 +148,19 @@ class InfoComponent extends preact.Component {
             if (vboxCombos.length > 6 || vboxCombos.length === 0) return generalNotes;
 
             return (
-                <table class="combos">
+                <div class="combos">
-                    <tbody>
+                    {vboxCombos.map((c, i) =>
-                        {vboxCombos.map((c, i) =>
+                        <div class="table-button"
-                            <td><table>
+                            onMouseOver={e => {
-                                    <tr class="table-button"
+                                e.stopPropagation();
-                                        onMouseOver={e => {
+                                this.setState({ comboItem: c.item });
-                                            e.stopPropagation();
+                            }}
-                                            this.setState({ comboItem: c.item });
+                            onClick={() => setInfo(c.item)}>
-                                        }}
+                                <div class="item">{convertItem(c.item)}</div>
-                                        onClick={() => setInfo(c.item)}
+                                {c.components.map((u, j) => <div key={j} >{convertItem(u)}</div>)}
-                                    > {convertItem(c.item)} </tr>
+                        </div>
-
+                    )}
-                                    {c.components.map((u, j) => <tr key={j} >{convertItem(u)}</tr>)}
+                </div>
-                                </table>
-                            </td>
-                        )}
-                    </tbody>
-                </table>
             );
         };
 

etc/telegraf/telegraf.conf

@@ -303,3 +303,5 @@
   json_time_format = "2006-01-02T15:04:05.999999999Z07:00"
   json_string_fields = ["level", "module", "msg"]
 
+[[inputs.syslog]]
+  server = "tcp://:6514"