ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

group info and combiner css together

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
client/assets/styles/vbox.less
View File

@ -195,31 +195,39 @@
margin-left: 1em; margin-left: 1em;
grid-area: info; grid-area: info;
display: grid; display: grid;
grid-template-rows: min-content min-content;
grid-template-columns: 1fr min-content; grid-template-columns: 1fr min-content;
grid-template-areas: grid-template-areas:
"item combos" "details combos";
"combiner combos";
.combiner { .info-details {
grid-area: combiner; grid-area: details;
display: flex; display: grid;
width: 60%; grid-template-rows: 1fr min-content;
button { grid-template-areas:
margin-top: 1em; "item"
line-height: 1.3; "combiner";
font-size: 1.25em;
letter-spacing: 0.1em; .combiner {
&:hover { grid-area: combiner;
border: 2px solid @gray-hover; display: flex;
width: 60%;
button {
margin-top: 1em;
line-height: 1.3;
font-size: 1.25em;
letter-spacing: 0.1em;
&:hover {
border: 2px solid @gray-hover;
}
} }
} }
.info-item {
grid-area: item;
}
} }
.info-item {
grid-area: item;
}
.combos { .combos {
display: grid; display: grid;
grid-area: combos; grid-area: combos;

8
client/src/components/vbox.info.jsx
View File

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