fix: size of league name and spacing

This commit is contained in:
botprzemek 2025-10-20 04:09:12 +02:00
parent 522d011618
commit d85e27bce0

View file

@ -5,9 +5,9 @@
<div <div
ref="leagueBorder" ref="leagueBorder"
:style="{ backgroundColor: colorBorder }" :style="{ backgroundColor: colorBorder }"
class="percentage-circle relative flex h-12 w-12 items-center justify-center rounded-full" class="percentage-circle flex size-12 items-center justify-center rounded-full"
> >
<div class="relative h-11 w-11 rounded-full bg-blue-900 p-1"> <div class="relative size-11 rounded-full bg-blue-900 p-1">
<div <div
class="mt-0.5 h-full bg-cover bg-center" class="mt-0.5 h-full bg-cover bg-center"
:style="{ backgroundImage: `url(${selectedLeague.rankImgLink})` }" :style="{ backgroundImage: `url(${selectedLeague.rankImgLink})` }"
@ -16,8 +16,8 @@
</div> </div>
<div class="ml-2 text-3xl font-bold uppercase text-teal-500"> <div class="ml-2 text-3xl font-bold uppercase text-teal-500">
{{ selectedLeague.fullRank }} {{ selectedLeague.fullRank }}
<span class="ml-2 text-2xl text-white">{{ selectedLeague.leaguePoints }} LP</span>
</div> </div>
<div class="ml-4 text-2xl font-bold">{{ selectedLeague.leaguePoints }} LP</div>
<div <div
v-if="selectedLeague.miniSeries" v-if="selectedLeague.miniSeries"
class="ml-2 flex items-center rounded bg-blue-800 p-2" class="ml-2 flex items-center rounded bg-blue-800 p-2"
@ -30,11 +30,11 @@
></div> ></div>
</div> </div>
</div> </div>
<div class="mt-2 flex items-center"> <div class="mt-2 flex items-center gap-2">
<div class="relative inline-block text-white"> <div class="relative inline text-white shadow-sm">
<select <select
v-model="selectedKey" v-model="selectedKey"
class="block w-full cursor-pointer appearance-none rounded-md bg-blue-800 px-4 py-2 pr-8 text-lg font-bold leading-tight hover:bg-blue-700 focus:outline-none" class="block w-full cursor-pointer appearance-none rounded-md bg-blue-800 py-2 pl-4 pr-8 font-bold leading-tight hover:bg-blue-700 focus:outline-none"
> >
<option v-for="(data, leagueName) in ranked" :key="leagueName" :value="leagueName"> <option v-for="(data, leagueName) in ranked" :key="leagueName" :value="leagueName">
{{ data.name }} {{ data.name }}
@ -43,16 +43,16 @@
<div <div
class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700" class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
> >
<svg class="h-5 w-5 text-white"> <svg class="size-5 text-white">
<use xlink:href="#chevron-down" /> <use xlink:href="#chevron-down" />
</svg> </svg>
</div> </div>
</div> </div>
<div class="ml-2 flex items-center rounded bg-blue-800 p-2"> <div class="flex items-center rounded bg-blue-800 px-4 py-2 shadow-sm">
<div class="text-base font-semibold uppercase">Record</div> <div class="text-base font-semibold uppercase">Record</div>
<div class="ml-2 font-semibold text-green-400">{{ selectedLeague.wins }}</div> <div class="ml-2 font-semibold text-green-400">{{ selectedLeague.wins }}W</div>
<span class="mx-1">-</span> <span class="mx-1">-</span>
<div class="font-semibold text-red-400">{{ selectedLeague.losses }}</div> <div class="font-semibold text-red-400">{{ selectedLeague.losses }}L</div>
<div class="ml-3 text-base font-semibold uppercase">Winrate</div> <div class="ml-3 text-base font-semibold uppercase">Winrate</div>
<div <div
:class="[ :class="[