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

combiner out

Browse Source
This commit is contained in:
ntr 2019-11-24 21:39:28 +11:00
parent c03a687bba
commit f1170c6c43
2 changed files with 75 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,10 +3,10 @@
grid-area: vbox;
display: grid;
grid-template-rows: 3fr 2fr;
grid-template-columns: 1fr 4fr 6fr;
grid-template-columns: 1fr 4fr 6fr 15.5em; // =\
grid-template-areas:
"store-hdr store info"
"stash-hdr stash info";
"store-hdr store info combos"
"stash-hdr stash combiner combos";
margin-bottom: 1em;
line-height: 0;
@ -207,84 +207,81 @@
"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;
}
}
}
.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;
grid-area: combos;
margin-left: 0.5em;
grid-template-rows: min-content min-content;
grid-template-areas:
"comboHeader"
"comboList";
.combo-header {
text-align: center;
}
grid-template-rows: min-content min-content min-content;
grid-template-columns: min-content min-content;
grid-gap: 0.5em;
margin-top: 0.5em;
width: 15.5em;
.combo-list {
.table-button {
display: grid;
grid-template-rows: min-content min-content min-content;
grid-template-columns: min-content min-content;
grid-gap: 0.5em;
margin-top: 0.5em;
width: 15.5em;
.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;
}
}
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 {
border-left: 2px solid #222;
border-right: 2px solid #222;
height: 1.75em;
width: 7.5em;
svg {
vertical-align: middle;
}
&:last-child {
border-bottom: 2px solid #222;
}
width: 5em;
}
}
div {
border-left: 2px solid #222;
border-right: 2px solid #222;
height: 1.75em;
width: 7.5em;
svg {
vertical-align: middle;
}
&:last-child {
border-bottom: 2px solid #222;
}
}
}

11
client/src/components/vbox.component.jsx
View File

@ -8,6 +8,7 @@ const actions = require('../actions');
const InfoContainer = require('./vbox.info');
const StashElement = require('./vbox.stash');
const StoreElement = require('./vbox.store');
const Combiner = require('./vbox.combiner');
const addState = connect(
function receiveState(state) {
@ -227,10 +228,6 @@ class Vbox extends preact.Component {
<div class='vbox'>
{storeHdr()}
{stashHdr()}
<InfoContainer
vboxHighlight={vboxHighlight}
vboxBuySelected={vboxBuySelected}
/>
<StoreElement
clearVboxSelected = {clearVboxSelected}
setInfo = {setInfo}
@ -254,6 +251,12 @@ class Vbox extends preact.Component {
setInfo = {setInfo}
setVboxSelected = {setVboxSelected}
/>
<div class="info"></div>
<Combiner
vboxHighlight={vboxHighlight}
vboxBuySelected={vboxBuySelected}
/>
<div class="combos"></div>
</div>
);
}