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;
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";
.combiner {
grid-area: combiner;
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-details {
grid-area: details;
display: grid;
grid-template-rows: 1fr min-content;
grid-template-areas:
"item"
"combiner";
.combiner {
grid-area: combiner;
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 {
display: grid;
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.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,8 +301,10 @@ class InfoComponent extends preact.Component {
return (
<div class='info'>
<div onMouseOver={() => this.setState({ comboItem: null })}>
<Info />
<Combiner />
<div class='info-details'>
<Info />
<Combiner />
</div>
</div>
<Combos />
</div>