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

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

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