diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less index 3c677937..7305386a 100644 --- a/client/assets/styles/instance.less +++ b/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; + } + } + } } } diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx index b4c116eb..c0526730 100644 --- a/client/src/components/info.component.jsx +++ b/client/src/components/info.component.jsx @@ -88,7 +88,7 @@ class InfoComponent extends preact.Component { while (infoName.includes('Plus')) infoName = infoName.replace('Plus', '+'); const itemSource = itemInfo.combos.filter(c => c.item === removeTier(fullInfo.item)); - + let itemSourceInfo = itemSource.length && !isSpec ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}` : false; @@ -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 = ( -
You can preview combos by clicking the combined item when it appears in this section.
@@ -148,24 +148,19 @@ class InfoComponent extends preact.Component {
if (vboxCombos.length > 6 || vboxCombos.length === 0) return generalNotes;
return (
-