fix(overview): record stats responsive if > 999 games

This commit is contained in:
Valentin Kaelin 2022-02-02 22:53:22 +01:00
parent b17a80b2af
commit 7b9811c13b

View file

@ -115,9 +115,9 @@
</ul> </ul>
<template v-if="leagueStatsByType('Ranked').length"> <template v-if="leagueStatsByType('Ranked').length">
<div class="flex items-baseline px-4 mt-3 text-xs font-semibold text-blue-300 uppercase"> <div class="flex items-baseline px-4 mt-3 text-xs font-semibold text-blue-300 uppercase">
<div class="w-2/4 text-base text-left text-blue-400">Ranked</div> <div class="w-5/12 text-base text-left text-blue-400">Ranked</div>
<div class="w-1/4">Winrate</div> <div class="w-3/12">Winrate</div>
<div class="w-1/4">Record</div> <div class="w-4/12">Record</div>
</div> </div>
<ul class="mt-1 text-gray-100"> <ul class="mt-1 text-gray-100">
<li <li
@ -126,12 +126,12 @@
:class="{'bg-blue-760': index % 2 !== 0}" :class="{'bg-blue-760': index % 2 !== 0}"
class="flex items-center justify-between px-4 py-1 leading-tight" class="flex items-center justify-between px-4 py-1 leading-tight"
> >
<div class="w-2/4 text-left capitalize">{{ league.name.toLowerCase() }}</div> <div class="w-5/12 text-left capitalize">{{ league.name.toLowerCase() }}</div>
<div <div
:class="calculateWinrate(league.wins, league.count).color" :class="calculateWinrate(league.wins, league.count).color"
class="w-1/4" class="w-3/12"
>{{ calculateWinrate(league.wins, league.count).winrate|percent }}</div> >{{ calculateWinrate(league.wins, league.count).winrate|percent }}</div>
<div class="w-1/4"> <div class="w-4/12">
<span <span
:class="winLossColor(league.wins, league.losses).win" :class="winLossColor(league.wins, league.losses).win"
class="font-semibold" class="font-semibold"
@ -147,9 +147,9 @@
</template> </template>
<template v-if="leagueStatsByType('Normal').length"> <template v-if="leagueStatsByType('Normal').length">
<div class="flex items-baseline px-4 mt-3 text-xs font-semibold text-blue-300 uppercase"> <div class="flex items-baseline px-4 mt-3 text-xs font-semibold text-blue-300 uppercase">
<div class="w-2/4 text-base text-left text-blue-400">Normal</div> <div class="w-5/12 text-base text-left text-blue-400">Normal</div>
<div class="w-1/4">Winrate</div> <div class="w-3/12">Winrate</div>
<div class="w-1/4">Record</div> <div class="w-4/12">Record</div>
</div> </div>
<ul class="mt-1 text-gray-100"> <ul class="mt-1 text-gray-100">
<li <li
@ -158,12 +158,12 @@
:class="{'bg-blue-760': index % 2 !== 0}" :class="{'bg-blue-760': index % 2 !== 0}"
class="flex items-center justify-between px-4 py-1 leading-tight" class="flex items-center justify-between px-4 py-1 leading-tight"
> >
<div class="w-2/4 text-left capitalize">{{ league.name.toLowerCase() }}</div> <div class="w-5/12 text-left capitalize">{{ league.name.toLowerCase() }}</div>
<div <div
:class="calculateWinrate(league.wins, league.count).color" :class="calculateWinrate(league.wins, league.count).color"
class="w-1/4" class="w-3/12"
>{{ calculateWinrate(league.wins, league.count).winrate|percent }}</div> >{{ calculateWinrate(league.wins, league.count).winrate|percent }}</div>
<div class="w-1/4"> <div class="w-4/12">
<span <span
:class="winLossColor(league.wins, league.losses).win" :class="winLossColor(league.wins, league.losses).win"
class="font-semibold" class="font-semibold"
@ -179,9 +179,9 @@
</template> </template>
<div class="flex items-baseline px-4 mt-3 text-xs font-semibold text-blue-300 uppercase"> <div class="flex items-baseline px-4 mt-3 text-xs font-semibold text-blue-300 uppercase">
<div class="w-2/4 text-base text-left text-blue-400">Class</div> <div class="w-5/12 text-base text-left text-blue-400">Class</div>
<div class="w-1/4">Winrate</div> <div class="w-3/12">Winrate</div>
<div class="w-1/4">Record</div> <div class="w-4/12">Record</div>
</div> </div>
<ul class="mt-1 text-gray-100"> <ul class="mt-1 text-gray-100">
<li <li
@ -190,12 +190,12 @@
:class="{'bg-blue-760': index % 2 !== 0}" :class="{'bg-blue-760': index % 2 !== 0}"
class="flex items-center justify-between px-4 py-1 leading-tight" class="flex items-center justify-between px-4 py-1 leading-tight"
> >
<div class="w-2/4 text-left capitalize">{{ championClass.id }}</div> <div class="w-5/12 text-left capitalize">{{ championClass.id }}</div>
<div <div
:class="calculateWinrate(championClass.wins, championClass.count).color" :class="calculateWinrate(championClass.wins, championClass.count).color"
class="w-1/4" class="w-3/12"
>{{ calculateWinrate(championClass.wins, championClass.count).winrate|percent }}</div> >{{ calculateWinrate(championClass.wins, championClass.count).winrate|percent }}</div>
<div class="w-1/4"> <div class="w-4/12">
<span <span
:class="winLossColor(championClass.wins, championClass.losses).win" :class="winLossColor(championClass.wins, championClass.losses).win"
class="font-semibold" class="font-semibold"