unlock info size from store/stash divider

This commit is contained in:
Mashy 2019-11-25 21:46:54 +10:00
parent 4dbbb4f38d
commit f4a7ba65eb
3 changed files with 64 additions and 48 deletions

View File

@ -253,7 +253,7 @@
grid-template-areas:
"store-hdr store-hdr stash-hdr stash-hdr"
"store store stash stash"
"store store combiner combiner";
"store store info-combiner info-combiner";
> div {
padding: 0.25em;
@ -267,8 +267,12 @@
display: none;
}
.combiner {
margin: 0;
.info-combiner {
.combiner {
margin: 0;
width: 100%;
height: 100%;
}
}
.stash {

View File

@ -5,8 +5,8 @@
grid-template-rows: 3fr minmax(min-content, 2fr);
grid-template-columns: 1fr 4fr 6fr min-content;
grid-template-areas:
"store-hdr store info combos"
"stash-hdr stash combiner combos";
"store-hdr store info-combiner combos"
"stash-hdr stash info-combiner combos";
margin-bottom: 1em;
// immediate children
@ -169,48 +169,58 @@
}
}
.info {
line-height: 1.6;
.info-combiner {
grid-area: info-combiner;
display: grid;
grid-template-areas:
"info"
"combiner";
grid-template-rows: min-content 1fr;
h2 {
text-transform: uppercase;
}
.info {
grid-area: info;
line-height: 1.6;
height: 100%;
svg {
display: inline;
height: 1em;
}
h2 {
text-transform: uppercase;
}
figure {
display: inline;
height: 0.5em;
svg {
margin-right: 0.5em;
display: inline;
height: 1em;
}
figure {
display: inline;
height: 0.5em;
svg {
margin-right: 0.5em;
}
}
figcaption {
font-size: 1em;
display: inline-block;
vertical-align: middle;
}
margin-left: 1em;
}
.combiner {
grid-area: combiner;
margin: 1em 0.5em;
width: 50%;
line-height: 1.3;
font-size: 1.25em;
letter-spacing: 0.1em;
border: 0.1em solid @gray-exists;
&:hover {
border: 0.1em solid @gray-hover;
}
}
figcaption {
font-size: 1em;
display: inline-block;
vertical-align: middle;
}
margin-left: 1em;
grid-area: info;
}
.combiner {
grid-area: combiner;
// align-self: flex-end;
height: 100%;
margin: 0 0.5em;
line-height: 1.3;
font-size: 1.25em;
letter-spacing: 0.1em;
border: 0.1em solid @gray-exists;
&:hover {
border: 0.1em solid @gray-hover;
}
}
.combos {

View File

@ -223,15 +223,17 @@ class Vbox extends preact.Component {
vboxHighlight = {vboxHighlight}
vboxHover = {vboxHover}
/>
<Combiner
vbox={vbox}
vboxCombiner={vboxCombiner}
vboxSelected={vboxSelected}
vboxBuySelected={vboxBuySelected}
sendVboxCombine={sendVboxCombine}
/>
<div class='info-combiner'>
<InfoContainer />
<Combiner
vbox={vbox}
vboxCombiner={vboxCombiner}
vboxSelected={vboxSelected}
vboxBuySelected={vboxBuySelected}
sendVboxCombine={sendVboxCombine}
/>
</div>
<Combos />
<InfoContainer />
</div>
);
}