Doble/LeagueStats
1
0
Fork 0
mirror of https://github.com/vkaelin/LeagueStats.git synced 2026-03-25 12:57:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: change summoner's info layout

Browse source
This commit is contained in:
Lazar 2019-11-16 20:21:28 +01:00
parent 548d2d1a5a
commit ffde77ca49
3 changed files with 45 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
client/src/components/Summoner/SummonerLoader.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="mt-4 text-white pb-12">
<div class="flex justify-between px-12">
<div class="text-white pb-12">
<div class="flex justify-between">
<div style="width: 517px; height: 272px;">
<content-loader
:height="272"
@ -150,7 +150,7 @@
</div>
</div>
<div class="mt-12 text-center">
<div class="mt-4 text-center">
<div
v-for="index in 10"
:key="index"

48
client/src/components/Summoner/SummonerRanked.vue
View file

@ -1,9 +1,19 @@
<template>
<div class="ml-6 leading-none">
<div class="ml-2 leading-none flex">
<div
class="w-24 h-24"
:style="{background: `url(${selectedLeague.rankImgLink}) center/cover`}"
></div>
<div class="flex flex-col justify-center">
<div class="flex items-center">
<div class="text-teal-500 text-4xl uppercase font-extrabold">{{ selectedLeague.fullRank }}</div>
<div class="ml-4 text-3xl font-extrabold">{{ selectedLeague.leaguePoints }} LP</div>
</div>
<div class="flex mt-2 items-center">
<div class="relative inline-block text-white">
<select
v-model="selectedKey"
class="block appearance-none bg-select w-full px-4 py-2 pr-8 rounded-md leading-tight text-lg font-extrabold cursor-pointer focus:outline-none"
class="block appearance-none bg-blue-800 hover:bg-blue-700 w-full px-4 py-2 pr-8 rounded-md leading-tight text-lg font-extrabold cursor-pointer focus:outline-none"
>
<option
v-for="(data, leagueName) in ranked"
@ -23,33 +33,13 @@
</svg>
</div>
</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" style="width: 430px;">
<div class="flex items-center w-1/2">
<div
class="w-20 h-20 bg-blue-1000"
:style="{background: `url(${selectedLeague.rankImgLink}) center/cover`}"
></div>
<div class="ml-2 text-xl font-extrabold">{{ selectedLeague.leaguePoints }} LP</div>
</div>
<div class="flex justify-between w-1/2">
<div class="mt-2 font-extrabold uppercase leading-none">
<div class="text-teal-500 text-base">Record</div>
<div class="flex">
<div class="mt-2 text-sm leading-tight text-right">
<div>{{ selectedLeague.wins }}</div>
<div>{{ selectedLeague.losses }}</div>
</div>
<div class="ml-2 mt-2 text-sm leading-tight">
<div class="text-teal-500">Wins</div>
<div class="text-red-300">Losses</div>
</div>
</div>
</div>
<div class="mt-2 font-extrabold">
<div class="text-teal-500 text-base uppercase">Winrate</div>
<div class="mt-2 text-xl leading-tight">{{ selectedLeague.winrate }}</div>
<div class="ml-2 p-2 flex bg-blue-800 rounded items-center">
<div class="text-base uppercase font-bold">Record</div>
<div class="ml-2 text-green-400 font-bold">{{ selectedLeague.wins }}</div>
<span class="mx-1"> - </span>
<div class="text-red-400 font-bold">{{ selectedLeague.losses }}</div>
<div class="ml-3 text-base uppercase font-bold">Winrate</div>
<div :class="['ml-2 text-base leading-tight font-bold', parseFloat(selectedLeague.winrate) > 50 ? 'text-green-400' : 'text-red-400', parseFloat(selectedLeague.winrate) == 50 ? 'text-blue-100' : '' ]">{{ selectedLeague.winrate }}</div>
</div>
</div>
</div>

8
client/src/views/Summoner.vue
View file

@ -19,8 +19,8 @@
</header>
<template v-if="summonerFound">
<div class="mt-4 text-white pb-12">
<div class="flex justify-between px-12">
<div class="text-white pb-12">
<div class="flex justify-between items-center">
<div>
<div class="flex items-center">
<h1 class="text-4xl font-extrabold uppercase">
@ -29,7 +29,7 @@
</h1>
<div
v-if="playing"
class="ml-4 flex items-center px-3 py-1 rounded-full bg-teal-800 border border-teal-400"
class="ml-4 mt-2 flex items-center px-3 py-1 rounded-full bg-teal-800 border border-teal-400"
>
<div class="playing-dot bg-teal-flashy w-2 h-2 rounded-full"></div>
<span class="ml-2 text-teal-flashy font-semibold text-sm">In Game</span>
@ -60,7 +60,7 @@
</div>
</div>
<div class="mt-12 text-center flex">
<div class="mt-3 text-center flex">
<div class="mt-4 w-3/12">
<SummonerStats />
<SummonerMates />