styling improvements for effect text, move down opp avatars on mobile

This commit is contained in:
Mashy 2019-11-08 12:09:16 +10:00
parent 35062db799
commit e540128a94
3 changed files with 13 additions and 12 deletions

View File

@ -10,10 +10,6 @@
// "opponent" // "opponent"
// "target " // "target "
// "player "; // "player ";
.skill-description {
font-size: 75%;
}
} }
.game .team, .faceoff .team { .game .team, .faceoff .team {
@ -101,7 +97,7 @@
justify-items: center; justify-items: center;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: 1fr 2fr; grid-template-rows: minmax(min-content, 1fr) min-content;
grid-template-areas: grid-template-areas:
"left" "left"
"right"; "right";

View File

@ -40,7 +40,7 @@
} }
svg { svg {
height: 1em; height: 1.5em;
} }
} }
@ -54,6 +54,13 @@
font-size: 1em; font-size: 1em;
} }
.skill-description {
font-size: 0.8em;
svg {
height: 1em;
}
}
.player { .player {
.game-construct { .game-construct {
grid-template-areas: grid-template-areas:
@ -85,7 +92,7 @@
} }
.avatar { .avatar {
bottom: 0px; top: 3em;
} }
} }
} }

View File

@ -146,11 +146,9 @@ class GameConstruct extends Component {
const speed = <span> Speed {shapes.SpeedStat()} multiplier {fullInfo.speed * 4}% </span>; const speed = <span> Speed {shapes.SpeedStat()} multiplier {fullInfo.speed * 4}% </span>;
return ( return (
<div class="skill-description"> <div class="skill-description">
<span> <h2><span> {gameSkillInfo.skill} </span></h2>
<h2> {gameSkillInfo.skill} </h2> <span>{infoDescription} </span>
{infoDescription} {speed}
{speed}
</span>
</div>); </div>);
} }
const effects = construct.effects.length const effects = construct.effects.length