fix: ranked stats container always same width even if LP are >= 1000

This commit is contained in:
Valentin Kaelin 2019-10-21 18:12:57 +02:00
parent ee07c7bd0d
commit d2bfb487ba
2 changed files with 29 additions and 27 deletions

View file

@ -15,11 +15,11 @@
<rect x="119" y="116" rx="3" ry="3" width="164" height="31" /> <rect x="119" y="116" rx="3" ry="3" width="164" height="31" />
<rect x="136" y="179" rx="3" ry="3" width="80" height="80" /> <rect x="136" y="179" rx="3" ry="3" width="80" height="80" />
<rect x="222" y="209" rx="3" ry="3" width="59" height="22" /> <rect x="222" y="209" rx="3" ry="3" width="59" height="22" />
<rect x="309" y="186" rx="3" ry="3" width="75" height="19" /> <rect x="330" y="183" rx="3" ry="3" width="75" height="19" />
<rect x="426" y="186" rx="3" ry="3" width="75" height="19" /> <rect x="458" y="185" rx="3" ry="3" width="75" height="19" />
<rect x="310" y="213" rx="3" ry="3" width="75" height="10" /> <rect x="330" y="212" rx="3" ry="3" width="75" height="10" />
<rect x="320" y="231" rx="3" ry="3" width="65" height="10" /> <rect x="340" y="232" rx="3" ry="3" width="65" height="10" />
<rect x="436" y="213" rx="3" ry="3" width="65" height="10" /> <rect x="468" y="218" rx="3" ry="3" width="65" height="10" />
</content-loader> </content-loader>
</div> </div>

View file

@ -25,30 +25,32 @@
</div> </div>
<div class="mt-1 text-teal-500 text-4xl uppercase font-extrabold">{{ selectedLeague.fullRank }}</div> <div class="mt-1 text-teal-500 text-4xl uppercase font-extrabold">{{ selectedLeague.fullRank }}</div>
<div class="mt-4 flex items-start bg-gradient px-4 py-3 rounded-lg"> <div class="mt-4 flex items-start bg-gradient px-4 py-3 rounded-lg" style="width: 430px;">
<div class="flex items-center"> <div class="flex items-center w-1/2">
<div <div
class="w-20 h-20 bg-blue-1000" class="w-20 h-20 bg-blue-1000"
:style="{background: `url(${selectedLeague.rankImgLink}) center/cover`}" :style="{background: `url(${selectedLeague.rankImgLink}) center/cover`}"
></div> ></div>
<div class="ml-2 text-xl font-extrabold">{{ selectedLeague.leaguePoints }} LP</div> <div class="ml-2 text-xl font-extrabold">{{ selectedLeague.leaguePoints }} LP</div>
</div> </div>
<div class="ml-10 mt-2 font-extrabold uppercase leading-none"> <div class="flex justify-between w-1/2">
<div class="text-teal-500 text-base">Record</div> <div class="mt-2 font-extrabold uppercase leading-none">
<div class="flex"> <div class="text-teal-500 text-base">Record</div>
<div class="mt-2 text-sm leading-tight text-right"> <div class="flex">
<div>{{ selectedLeague.wins }}</div> <div class="mt-2 text-sm leading-tight text-right">
<div>{{ selectedLeague.losses }}</div> <div>{{ selectedLeague.wins }}</div>
</div> <div>{{ selectedLeague.losses }}</div>
<div class="ml-2 mt-2 text-sm leading-tight"> </div>
<div class="text-teal-500">Wins</div> <div class="ml-2 mt-2 text-sm leading-tight">
<div class="text-red-300">Losses</div> <div class="text-teal-500">Wins</div>
<div class="text-red-300">Losses</div>
</div>
</div> </div>
</div> </div>
</div> <div class="mt-2 font-extrabold">
<div class="ml-10 mt-2 font-extrabold"> <div class="text-teal-500 text-base uppercase">Winrate</div>
<div class="text-teal-500 text-base uppercase">Winrate</div> <div class="mt-2 text-xl leading-tight">{{ selectedLeague.winrate }}</div>
<div class="mt-2 text-xl leading-tight">{{ selectedLeague.winrate }}</div> </div>
</div> </div>
</div> </div>
</div> </div>