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

mobile styles

Browse Source
This commit is contained in:
ntr 2019-05-24 17:09:02 +10:00
parent 1ba6a9695b
commit 88e81e1ebd
2 changed files with 29 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
client/assets/styles/instance.mobile.css
View File

@ -1,20 +1,20 @@
@media (max-height: 800px), (max-width: 1000px) { @media (max-height: 800px), (max-width: 1000px) {
.instance { .instance {
display: grid; display: grid;
grid-template-columns: 100%; grid-template-columns: 1fr;
grid-template-rows: repeat(4, min-content); grid-template-rows: min-content, min-content, min-content, 1fr;
grid-template-areas: grid-template-areas:
"top" "top"
"controls" "controls"
"first" "mvbox"
"second" "mcryps"
} }
/* Default view */ /* Default view */
.instance .equip { display: none; } .instance .equip { display: none; }
.instance .info { display: none; } .instance .info { display: none; }
.instance .cryp-list { display: none; } .instance .cryp-list { display: none; }
.vbox { .vbox {
grid-area: first; grid-area: mvbox;
display: grid; display: grid;
grid-template-rows: min-content min-content min-content; grid-template-rows: min-content min-content min-content;
grid-template-columns: 1fr; grid-template-columns: 1fr;
@ -47,7 +47,7 @@
#toggle-vbox:checked ~ .vbox { display: none; } #toggle-vbox:checked ~ .vbox { display: none; }
#toggle-vbox:checked ~ .equip { #toggle-vbox:checked ~ .equip {
display: initial; display: initial;
grid-area: first; grid-area: mvbox;
} }
#toggle-vbox:checked ~ .highlight { #toggle-vbox:checked ~ .highlight {
@ -55,14 +55,13 @@
} }
#toggle-vbox:checked ~ .cryp-list { #toggle-vbox:checked ~ .cryp-list {
grid-area: second; grid-area: mcryps;
display: flex; display: grid;
justify-content: center; justify-content: center;
flex-flow: row wrap;
flex: 1;
width: 100%;
}
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
#toggle-vbox { display: none; } #toggle-vbox { display: none; }
@ -76,15 +75,20 @@
margin-right: 0.5em; margin-right: 0.5em;
} }
.instance .cryp-list {
display: grid;
grid-auto-columns: 1fr 1fr;
}
.cryp-list .skills { .cryp-list .skills {
flex-flow: row; flex-flow: row;
align-items: stretch; align-items: stretch;
} }
.instance-cryp { .instance-cryp {
flex: 1; grid-row: 2;
display: grid; display: grid;
grid-template-rows: min-content min-content; grid-template-rows: min-content 1fr;
grid-template-areas: grid-template-areas:
"name " "name "
"avatar "; "avatar ";
@ -95,9 +99,6 @@
transition-delay: 0; transition-delay: 0;
transition-timing-function: ease; transition-timing-function: ease;
} }
.instance-cryp img {
width: 35px;
}
.instance-cryp .skills { .instance-cryp .skills {
display: none; display: none;
@ -113,10 +114,10 @@
.instance-cryp-active { .instance-cryp-active {
flex: 1; grid-row: 1;
order: -1; grid-column: 1 / 3;
display: grid; display: grid;
grid-template-rows: min-content min-content min-content min-content min-content; grid-template-rows: min-content min-content min-content 1fr min-content;
grid-template-areas: grid-template-areas:
"name " "name "
"skills " "skills "

13
client/src/utils.jsx
View File

@ -80,10 +80,10 @@ function clearAnimation(id) {
} }
function crypAvatar(name, id) { function crypAvatar(name, id) {
useEffect(() => { // useEffect(() => {
animateCryp(id); // animateCryp(id);
return () => clearAnimation(id); // return () => clearAnimation(id);
}); // });
return ( return (
<img <img
@ -96,7 +96,10 @@ function crypAvatar(name, id) {
} }
function instanceCryp(name, id) { function instanceCryp(name, id) {
useEffect(() => animateCryp(id)); // useEffect(() => {
// animateCryp(id);
// return () => clearAnimation(id);
// });
return ( return (
<div <div