jeff/pvpokemon
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

style rank section

Browse Source
This commit is contained in:
Jeff Colombo 2019-02-03 21:37:47 -05:00
parent 1a69eb21b0
commit f289d91d58
4 changed files with 65 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx
View File

@ -353,11 +353,48 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
</div>
</section>
<section className={ leaugeRankCss }>
<div className="league-pokemon-stat pokemon-rank"><span>{ rankedGrade }</span> Rank</div>
<div className="league-pokemon-stat pokemon-cp">CP <span>{ rankedCp }</span></div>
<div className="league-pokemon-stat"><span>{ rankedHp }</span> HP</div>
<div className="league-pokemon-stat"><span>{ rankedAtk }</span> ATK</div>
<div className="league-pokemon-stat"><span>{ rankedDef }</span> DEF</div>
<h5 className={ containerTitleCss }>Rank</h5>
<div className={ styles.pokemonInfoWraper }>
<div className={ styles.pokemonInfoLeftColumn }>
<div><h1 className={ styles.pokemonRankValue }>{ rankedGrade }</h1> Rank</div>
<div>CP <span>{ rankedCp }</span></div>
</div>
<div className={ styles.pokemonInfoRightColumn }>
<div className={ styles.baseStatRow }>
<span>HP &nbsp;{ rankedHp < 100 && String.fromCharCode(160) }{ rankedHp }</span>
<progress
className={ progressStaminaCss }
max={ 100 }
value={ leaguePokemon.statsRank.staminaRank }
title={ `${leaguePokemon.statsRank.staminaRank}%` }
>
{ leaguePokemon.statsRank.staminaRank }%
</progress>
</div>
<div className={ styles.baseStatRow }>
<span>ATK { rankedAtk < 100 && String.fromCharCode(160) }{ rankedAtk }</span>
<progress
className={ progressAttackCss }
max={ 100 }
value={ leaguePokemon.statsRank.attackRank }
title={ `${leaguePokemon.statsRank.attackRank}%` }
>
{ leaguePokemon.statsRank.attackRank }%
</progress>
</div>
<div className={ styles.baseStatRow }>
<span>DEF { rankedDef < 100 && String.fromCharCode(160) }{ rankedDef }</span>
<progress
className={ progressDefenseCss }
max={ 100 }
value={ leaguePokemon.statsRank.defenseRank }
title={ `${leaguePokemon.statsRank.defenseRank}%` }
>
{ leaguePokemon.statsRank.defenseRank }%
</progress>
</div>
</div>
</div>
</section>
</div>
<LeagueStatsList

29
src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss
View File

@ -12,7 +12,8 @@
margin-bottom: 0;
}
.pokemonInfoWrapper {
.pokemonInfoWrapper,
.leaguePokemonRank {
display: flex;
justify-content: space-evenly;
margin-bottom: 1rem;
@ -41,6 +42,24 @@
align-self: stretch;
}
.leaguePokemonRank {
justify-content: flex-start;
flex-wrap: wrap;
.pokemonInfoWraper {
flex: 1 0 100%;
display: flex;
}
.pokemonInfoLeftColumn {
align-items: flex-start;
}
.pokemonRankValue {
display: inline;
}
}
.pokemonType {
text-transform: uppercase;
@ -252,14 +271,6 @@
}
}
.popkemonIndividualStats {
display: block;
}
.leaguePokemonRank {
display: block;
}
:global(.nes-field.is-inline) .ivInput {
width: 4.25em;
padding-left: 0.7em;

3
src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss.d.ts vendored
View File

@ -10,9 +10,10 @@ export const levelInput: string;
export const pokemonBaseStats: string;
export const pokemonInfoLeftColumn: string;
export const pokemonInfoRightColumn: string;
export const pokemonInfoWraper: string;
export const pokemonInfoWrapper: string;
export const pokemonName: string;
export const pokemonRankValue: string;
export const pokemonType: string;
export const pokemonTypeWrapper: string;
export const popkemonIndividualStats: string;
export const wrapper: string;

2
src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx
View File

@ -84,7 +84,7 @@ export class PokemonSelectList extends React.Component<IPokemonSelectListProps,
className={ inputTextCss }
onChange={ this.handleChangeFilter }
value={ this.props.filterTerm }
placeholder="Pokemon Name"
placeholder="Search"
/>
{ this.props.filterTerm !== '' &&
<i