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

new layout combiner bottom

Browse Source
This commit is contained in:
Mashy 2019-11-21 13:19:07 +10:00
parent a5d778475e
commit ef9ef0b604
2 changed files with 39 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,19 +8,17 @@
grid-template-areas:
"shop-hdr shop"
"stash-hdr shop"
"stash-hdr combiner"
"stash stash";
"stash stash"
"refund combiner";
border-top: 0.1em solid @gray-exists;
border-bottom: 0.1em solid @gray-exists;
margin-bottom: 1em;
line-height: 0;
.items {
.vbox-padding {
margin-left: 0.5em;
margin-bottom: 1em;
margin-bottom: 0.5em;
margin-top: 0.5em;
margin-right: 1em;
margin-right: 0.5em;
}
.shop {
@ -45,10 +43,16 @@
.combiner {
grid-area: combiner;
border-bottom: 0.1em solid @gray-exists;
border-right: 0.1em solid @gray-exists;
border-top: 0.1em solid @gray-exists;
border-left: 0.1em solid @gray-exists;
display: flex;
flex-direction: column;
.vbox-padding {
margin-right: 0em;
margin-bottom: 0em;
}
button {
height: 3em;
letter-spacing: 0.1em;
@ -61,7 +65,7 @@
.stash {
grid-area: stash;
.items {
.vbox-padding {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 0.5em 1em;
@ -76,13 +80,17 @@
border-left: 0.1em solid @gray-exists;
border-right: 0.1em solid @gray-exists;
text-align: center;
}
.refund {
button {
margin-top: 0.5em;
line-height: 1.6;
height: 4em;
line-height: 1.4;
height: 3em;
letter-spacing: 0.1em;
background-color: #342100;
}
border-left: 0.1em solid @gray-exists;
border-bottom: 0.1em solid @gray-exists;
}
.vbox-hdr {

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

@ -222,7 +222,7 @@ class Vbox extends preact.Component {
return (
<div class='shop'
onClick={e => e.stopPropagation()}>
<div class='items'>
<div class='vbox-padding'>
<div class="vbox-colours">
{range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))}
</div>
@ -238,7 +238,7 @@ class Vbox extends preact.Component {
function vboxHdr() {
return (
<div class="shop-hdr">
<div class='items'>
<div class='vbox-padding'>
<h3
onTouchStart={e => e.target.scrollIntoView(true)}
onMouseOver={e => vboxHover(e, 'vbox')}> STORE
@ -364,7 +364,7 @@ class Vbox extends preact.Component {
}
return (
<div class='combiner'>
<div class='items'>
<div class='vbox-padding'>
<button
class='vbox-btn'
disabled={!mouseEvent}
@ -392,7 +392,7 @@ class Vbox extends preact.Component {
onDragOver={ev => ev.preventDefault()}
onDrop={inventoryClick}
>
<div class='items'>
<div class='vbox-padding'>
{range(0, 4).map(i => inventoryBtn(vbox.bound[i], i))}
</div>
</div>
@ -400,18 +400,24 @@ class Vbox extends preact.Component {
}
function inventoryHdr() {
return (
<div class='stash-hdr'>
<div class='vbox-padding'>
<h3 onTouchStart={e => e.target.scrollIntoView(true)}
onMouseOver={e => vboxHover(e, 'inventory')}> STASH
</h3>
</div>
</div>
);
}
function refundBtn() {
const refund = shopSelect.length === 0 && stashSelect.length === 1
? itemInfo.items.find(i => i.item === vbox.bound[stashSelect[0]]).cost
: 0;
const tutorialDisabled = tutorial && tutorial < 8 && instance.time_control === 'Practice' && instance.rounds.length === 1;
return (
<div class={'stash-hdr'}>
<div class='items'>
<h3
onTouchStart={e => e.target.scrollIntoView(true)}
onMouseOver={e => vboxHover(e, 'inventory')}> STASH
</h3>
<div class='refund'>
<div class='vbox-padding'>
<button
disabled={tutorialDisabled || !refund}
class='vbox-btn'
@ -438,6 +444,7 @@ class Vbox extends preact.Component {
{inventoryHdr()}
{inventoryElement()}
{combinerBtn()}
{refundBtn()}
</div>
);
}