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

getting there

Browse Source
This commit is contained in:
ntr 2019-05-16 17:12:46 +10:00
parent 4280f52781
commit 4f071d3804
7 changed files with 104 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
client/instance.css
View File

@ -3,83 +3,59 @@
*/
.instance {
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: min-content min-content 1fr 2fr;
grid-template-areas:
"top top top"
"vbox vbox info"
"equip equip info"
"cryps cryps info";
}
.instance-info {
flex: 0 1 35%;
padding-left: 1em;
.instance .top {
grid-area: top;
}
.instance .spacer {
flex-grow: 1
.instance .info {
margin-left: 1em;
grid-area: info;
}
.vbox-top {
display: flex;
flex: 1;
.instance .cryps {
grid-area: cryps;
}
.vbox {
display: flex;
flex: 0 0 65%;
}
.vbox-box {
display: flex;
flex-flow: row wrap;
padding-right: 5%;
flex: 0 0 50%;
}
.vbox-inventory {
display: flex;
flex-flow: row wrap;
flex: 0 0 50%;
}
.ready:hover {
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease;
color: forestgreen;
border-color: forestgreen;
/*box-shadow: inset -0.5em 0 0 0 forestgreen;*/
}
.ready {
color: forestgreen;
border-color: forestgreen;
box-shadow: inset -0.5em 0 0 0 forestgreen;
}
.timer-container {
display: flex;
flex: 1 1 100%;
width: 100%;
height: 0.25em;
max-height: 0.25em;
border: none;
margin: 1em 0;
}
.timer {
background: whitesmoke;
transition-property: all;
transition-duration: 0.5s;
transition-delay: 0;
transition-timing-function: ease;
}
.instance-ui-btn {
font-size: 100%;
padding: 0;
margin: 0;
.instance .equip {
grid-area: equip;
}
/* VBOX */
.vbox {
grid-area: vbox;
display: grid;
grid-template-rows: min-content min-content;
grid-template-areas:
"vbox combiner"
"vbox inventory";
}
.vbox-box {
grid-area: vbox;
}
.vbox-inventory {
grid-area: inventory;
margin-left: 1em;
}
.vbox-combiner {
margin-left: 1em;
grid-area: combiner;
}
.vbox-btn:active, .vbox-btn:hover, .vbox-btn:focus {
color: black;
@ -106,8 +82,8 @@
line-height: 1em;
}
.vbox-btn {
flex: 1 0 100%;
.vbox button {
width: 100%;
margin: 0;
background-color: whitesmoke;
color: black;
@ -118,7 +94,6 @@
color: black;
}
.vbox-table td {
transition-property: all;
transition-duration: 0.5s;
@ -132,16 +107,12 @@
color: black;
}
.spacer {
flex: 1 0 25%;
}
/* CRYP LIST */
/* CRYP BOX */
.instance-cryp-list {
flex: 1;
display: flex;
flex-flow: row;
.cryp-list {
grid-area: cryps;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.instance-cryp {
@ -178,6 +149,11 @@
.instance-cryp img {
grid-area: avatar;
min-width: 150px;
}
.instance-cryp .name {
text-align: center;
}
.instance-cryp .avatar figure {
@ -253,7 +229,6 @@
fill: none;
}
.instance-cryp .stat-icon {
width: 100%;
}
@ -361,7 +336,6 @@ button.equip {
100% {
color: #7a7a7a;
stroke: #7a7a7a;
}
}

2
client/src/components/info.component.jsx
View File

@ -205,7 +205,7 @@ function Info(args) {
// ? <h2>game beginning...</h2>
// : null;
const classes = `instance-info ${vboxHidden ? '' : 'hidden'}`;
const classes = `info ${vboxHidden ? '' : 'hidden'}`;
return (
<div className={classes} >

2
client/src/components/instance.component.jsx
View File

@ -53,10 +53,8 @@ function InstanceComponent(args) {
{actionBtn}
{timer}
</div>
<div className="vbox-top">
<VboxContainer />
<InfoContainer />
</div>
<EquipmentContainer />
<InstanceCrypsContainer />
</section>

2
client/src/components/instance.cryps.jsx
View File

@ -202,7 +202,7 @@ function InstanceCryps(props) {
activeVar, cryp: c, player, sendVboxApply, setInfo, setActiveCryp, vboxInfo, setVboxHighlight,
}));
const classes = `instance-cryp-list ${vboxHidden ? '' : 'hidden'}`;
const classes = `cryp-list ${vboxHidden ? '' : 'hidden'}`;
return (
<div className={classes} onClick={() => setActiveCryp(null)}>
{cryps}

2
client/src/components/instance.equip.jsx
View File

@ -78,7 +78,7 @@ function Equipment(props) {
const specLabel = specs.every(i => i === false) ? '' : 'Specs';
return (
<div className="instance-equip" >
<div className="equip" >
<div className="skills">
<div className="label">
{skillLabel}

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

@ -244,6 +244,8 @@ function Vbox(args) {
{boundRows}
</tbody>
</table>
</div>
<div className="vbox-combiner">
<span onTouchStart={e => e.target.scrollIntoView(true)}>I-COMBINATOR</span>
<button
className="instance-btn instance-ui-btn vbox-btn"

44
client/styles.css
View File

@ -184,7 +184,8 @@ img {
table {
table-layout: fixed;
width: 100%;
margin-bottom: 2em;
/*margin-bottom: 2em;*/
margin-bottom: 0;
}
table td {
@ -555,3 +556,44 @@ section .top {
font-size: 75%;
}
}
.ready:hover {
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease;
color: forestgreen;
border-color: forestgreen;
/*box-shadow: inset -0.5em 0 0 0 forestgreen;*/
}
.ready {
color: forestgreen;
border-color: forestgreen;
box-shadow: inset -0.5em 0 0 0 forestgreen;
}
.timer-container {
display: flex;
flex: 1 1 100%;
width: 100%;
height: 0.25em;
max-height: 0.25em;
border: none;
margin: 1em 0;
}
.timer {
background: whitesmoke;
transition-property: all;
transition-duration: 0.5s;
transition-delay: 0;
transition-timing-function: ease;
}
.instance-ui-btn {
font-size: 100%;
padding: 0;
margin: 0;
}