css fixes and removed long info componenents

This commit is contained in:
Mashy 2019-05-14 01:31:49 +10:00
parent 76a3ddc08e
commit af050143df
2 changed files with 28 additions and 31 deletions

View File

@ -7,17 +7,17 @@
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(11, 1fr);
grid-template-areas:
". v v v v v v v x x x x"
"n v v v v v v v x x x x"
"n v v v v v v v x x x x"
"n v v v v v v v x x x x"
"n g g g g g g g x x x x"
"n g g g g g g g x x x x"
"f f f f f f f f x x x x"
"f f f f f f f f x x x x"
"f f f f f f f f x x x x"
"f f f f f f f f x x x x"
"f f f f f f f f x x x x";
"n v v v v v v v v i i i"
"n v v v v v v v v i i i"
"n v v v v v v v v i i i"
"n v v v v v v v v i i i"
"n e e e e e e e e e e e"
"n e e e e e e e e e e e"
"c c c c c c c c c c c c"
"c c c c c c c c c c c c"
"c c c c c c c c c c c c"
"c c c c c c c c c c c c"
"c c c c c c c c c c c c";
}
.instance-hdr {
@ -25,39 +25,35 @@
display: flex;
flex-flow: column;
flex: 0 0 100%;
padding-top: 50px;
padding-right: 20px;
}
.instance-info {
grid-area: x;
flex: 0 0 50%;
grid-area: i;
justify-self: start;
padding-left: 20px;
}
.instance .spacer {
flex-grow: 1
}
.vbox {
grid-area: v;
display: grid;
grid-template-columns: 5fr 1fr 5fr;
grid-template-rows: repeat(2, 1fr);
grid-template-areas:
"vb . i"
"vb . i";
display: flex;
justify-content: flex-end;
}
.vbox-box {
grid-area: vb;
justify-self: end;
max-width: 450px;
display: flex;
flex-flow: row wrap;
padding-right: 50px;
}
.vbox-inventory {
grid-area: i;
justify-self: start;
max-width: 450px;
display: flex;
@ -168,13 +164,13 @@
/* CRYP BOX */
.instance-cryp-list {
grid-area: f;
grid-area: c;
flex: 1 1 auto;
display: flex;
flex-flow: row;
padding: 0 2em 0 2em;
align-content: flex-start;
justify-content: center;
min-width: 300px;
overflow: hidden;
@ -316,7 +312,7 @@
/* Equipment */
.instance-equip {
grid-area: g;
grid-area: e;
display: flex;
justify-content: center;
}

View File

@ -169,7 +169,7 @@ function Info(args) {
const filteredCombos = vboxInfo.combos
.filter(combo => combiner.every(u => u === null
|| combo.units.includes(player.vbox.bound[u])));
if (filteredCombos.length > 6) return false;
return (
<table>
<tbody>
@ -183,11 +183,12 @@ function Info(args) {
</table>
);
}
const vboxCombos = vboxInfo.combos.filter(c => c.units.includes(info[1]));
if (vboxCombos.length > 6) return false;
return (
<table>
<tbody>
{vboxInfo.combos.filter(c => c.units.includes(info[1])).map((c, i) =>
{vboxCombos.map((c, i) =>
<tr key={i} >
<td className="highlight" >{convertVar(c.var)}</td>
{c.units.map((u, j) => <td key={j} >{convertVar(u)}</td>)}
@ -206,12 +207,12 @@ function Info(args) {
return (
<div className={classes} >
<InfoCryp />
<CrypVar />
<Combos />
<ScoreBoard />
</div>
);
}
// <InfoCryp /> not required anymore
// <ScoreBoard /> Takes up too much space maybe a context switch
module.exports = Info;