group info and combiner css together

This commit is contained in:
Mashy 2019-11-24 13:08:28 +10:00
parent 6ce43884c9
commit a9faec1d4e
2 changed files with 31 additions and 21 deletions

View File

@ -195,11 +195,17 @@
margin-left: 1em;
grid-area: info;
display: grid;
grid-template-rows: min-content min-content;
grid-template-columns: 1fr min-content;
grid-template-areas:
"item combos"
"combiner combos";
"details combos";
.info-details {
grid-area: details;
display: grid;
grid-template-rows: 1fr min-content;
grid-template-areas:
"item"
"combiner";
.combiner {
grid-area: combiner;
@ -220,6 +226,8 @@
.info-item {
grid-area: item;
}
}
.combos {
display: grid;
grid-area: combos;

View File

@ -68,8 +68,8 @@ class InfoComponent extends preact.Component {
if (newProps.tutorial !== this.props.tutorial) return true;
if (newProps.vboxHighlight !== this.props.vboxHighlight) return true;
if (newProps.vboxSelected !== this.props.vboxSelected) return true;
if (newState.comboItem !== this.state.comboItem) return true;
return false;
}
@ -301,9 +301,11 @@ class InfoComponent extends preact.Component {
return (
<div class='info'>
<div onMouseOver={() => this.setState({ comboItem: null })}>
<div class='info-details'>
<Info />
<Combiner />
</div>
</div>
<Combos />
</div>
);