combiner out
This commit is contained in:
ntr
parent
c03a687bba
commit
f1170c6c43
@ -3,10 +3,10 @@
|
|||||||
grid-area: vbox;
|
grid-area: vbox;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: 3fr 2fr;
|
grid-template-rows: 3fr 2fr;
|
||||||
grid-template-columns: 1fr 4fr 6fr;
|
grid-template-columns: 1fr 4fr 6fr 15.5em; // =\
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
"store-hdr store info"
|
"store-hdr store info combos"
|
||||||
"stash-hdr stash info";
|
"stash-hdr stash combiner combos";
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
|
|
||||||
@ -207,84 +207,81 @@
|
|||||||
"item"
|
"item"
|
||||||
"combiner";
|
"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 {
|
.info-item {
|
||||||
grid-area: item;
|
grid-area: item;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.combos {
|
.combiner {
|
||||||
|
grid-area: combiner;
|
||||||
|
align-self: flex-end;
|
||||||
|
margin: 0 0.5em;
|
||||||
|
line-height: 1.3;
|
||||||
|
font-size: 1.25em;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
border: 2px solid @gray-exists;
|
||||||
|
&:hover {
|
||||||
|
border: 2px solid @gray-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.combos {
|
||||||
|
display: grid;
|
||||||
|
grid-area: combos;
|
||||||
|
margin-left: 0.5em;
|
||||||
|
grid-template-rows: min-content min-content;
|
||||||
|
grid-template-areas:
|
||||||
|
"comboHeader"
|
||||||
|
"comboList";
|
||||||
|
.combo-header {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.combo-list {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-area: combos;
|
grid-template-rows: min-content min-content min-content;
|
||||||
margin-left: 0.5em;
|
grid-template-columns: min-content min-content;
|
||||||
grid-template-rows: min-content min-content;
|
grid-gap: 0.5em;
|
||||||
grid-template-areas:
|
margin-top: 0.5em;
|
||||||
"comboHeader"
|
width: 15.5em;
|
||||||
"comboList";
|
|
||||||
.combo-header {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.combo-list {
|
.table-button {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: min-content min-content min-content;
|
text-align: center;
|
||||||
grid-template-columns: min-content min-content;
|
align-content: center;
|
||||||
grid-gap: 0.5em;
|
grid-template-areas:
|
||||||
margin-top: 0.5em;
|
"item"
|
||||||
width: 15.5em;
|
"ingr";
|
||||||
|
|
||||||
.table-button {
|
|
||||||
display: grid;
|
|
||||||
text-align: center;
|
|
||||||
align-content: center;
|
|
||||||
grid-template-areas:
|
|
||||||
"item"
|
|
||||||
"ingr";
|
|
||||||
|
|
||||||
cursor: pointer;
|
|
||||||
&:hover {
|
|
||||||
color: whitesmoke;
|
|
||||||
background-color: @gray;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item {
|
|
||||||
border-top: 2px solid #222;
|
|
||||||
border-bottom: 2px solid #222;
|
|
||||||
flex: 1;
|
|
||||||
grid-area: item;
|
|
||||||
font-weight: bold;
|
|
||||||
div {
|
|
||||||
width: 5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover {
|
||||||
|
color: whitesmoke;
|
||||||
|
background-color: @gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
border-top: 2px solid #222;
|
||||||
|
border-bottom: 2px solid #222;
|
||||||
|
flex: 1;
|
||||||
|
grid-area: item;
|
||||||
|
font-weight: bold;
|
||||||
div {
|
div {
|
||||||
border-left: 2px solid #222;
|
width: 5em;
|
||||||
border-right: 2px solid #222;
|
}
|
||||||
height: 1.75em;
|
}
|
||||||
width: 7.5em;
|
|
||||||
svg {
|
|
||||||
vertical-align: middle;
|
div {
|
||||||
}
|
border-left: 2px solid #222;
|
||||||
&:last-child {
|
border-right: 2px solid #222;
|
||||||
border-bottom: 2px solid #222;
|
height: 1.75em;
|
||||||
}
|
width: 7.5em;
|
||||||
|
svg {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: 2px solid #222;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -8,6 +8,7 @@ const actions = require('../actions');
|
|||||||
const InfoContainer = require('./vbox.info');
|
const InfoContainer = require('./vbox.info');
|
||||||
const StashElement = require('./vbox.stash');
|
const StashElement = require('./vbox.stash');
|
||||||
const StoreElement = require('./vbox.store');
|
const StoreElement = require('./vbox.store');
|
||||||
|
const Combiner = require('./vbox.combiner');
|
||||||
|
|
||||||
const addState = connect(
|
const addState = connect(
|
||||||
function receiveState(state) {
|
function receiveState(state) {
|
||||||
@ -227,10 +228,6 @@ class Vbox extends preact.Component {
|
|||||||
<div class='vbox'>
|
<div class='vbox'>
|
||||||
{storeHdr()}
|
{storeHdr()}
|
||||||
{stashHdr()}
|
{stashHdr()}
|
||||||
<InfoContainer
|
|
||||||
vboxHighlight={vboxHighlight}
|
|
||||||
vboxBuySelected={vboxBuySelected}
|
|
||||||
/>
|
|
||||||
<StoreElement
|
<StoreElement
|
||||||
clearVboxSelected = {clearVboxSelected}
|
clearVboxSelected = {clearVboxSelected}
|
||||||
setInfo = {setInfo}
|
setInfo = {setInfo}
|
||||||
@ -254,6 +251,12 @@ class Vbox extends preact.Component {
|
|||||||
setInfo = {setInfo}
|
setInfo = {setInfo}
|
||||||
setVboxSelected = {setVboxSelected}
|
setVboxSelected = {setVboxSelected}
|
||||||
/>
|
/>
|
||||||
|
<div class="info"></div>
|
||||||
|
<Combiner
|
||||||
|
vboxHighlight={vboxHighlight}
|
||||||
|
vboxBuySelected={vboxBuySelected}
|
||||||
|
/>
|
||||||
|
<div class="combos"></div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user