43 lines
987 B
Svelte
43 lines
987 B
Svelte
<script>
|
|
import {opt} from '../../../utils/js'
|
|
import MiniRanking from '../../Ranking/Mini.svelte'
|
|
|
|
export let playerInfo = null;
|
|
|
|
</script>
|
|
|
|
<div class="mini-ranking">
|
|
<div>
|
|
<MiniRanking rank={opt(playerInfo, 'rank')} numOfPlayers={5} on:height-changed />
|
|
</div>
|
|
|
|
{#each opt(playerInfo, 'countries', []) as countryInfo (countryInfo.country)}
|
|
<div>
|
|
<MiniRanking rank={countryInfo.rank} country={countryInfo.country} numOfPlayers={5} on:height-changed />
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
<style>
|
|
.mini-ranking {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-gap: 1rem;
|
|
}
|
|
|
|
.mini-ranking :global(section) {
|
|
padding-left: 0!important;
|
|
padding-right: 0!important;
|
|
}
|
|
|
|
.mini-ranking :global(section > h3) {
|
|
padding-left: 0!important;
|
|
padding-right: 0!important;
|
|
}
|
|
|
|
@media (max-width: 1023px) {
|
|
.mini-ranking {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style> |