mirror of
https://github.com/vkaelin/LeagueStats.git
synced 2026-03-25 12:57:28 +00:00
refactor: rename loaders files
This commit is contained in:
Valentin Kaelin
parent
585066c54e
commit
0a8b1fa622
4 changed files with 275 additions and 260 deletions
|
|
@ -21,7 +21,7 @@
|
|||
</content-loader>
|
||||
</div>
|
||||
|
||||
<div class="bg-blue-800 rounded-lg" style="width: 347px; height: 215px;">
|
||||
<div class="bg-blue-850 rounded-lg" style="width: 347px; height: 215px;">
|
||||
<content-loader
|
||||
:height="215"
|
||||
:width="347"
|
||||
267
client/src/components/Summoner/Overview/OverviewLoader.vue
Normal file
267
client/src/components/Summoner/Overview/OverviewLoader.vue
Normal file
|
|
@ -0,0 +1,267 @@
|
|||
<template>
|
||||
<div class="mt-3 flex text-center">
|
||||
<div class="mt-4 w-3/12">
|
||||
<div class="bg-blue-850 rounded-lg" style="width: 300px; height: 339px;">
|
||||
<content-loader
|
||||
:height="339"
|
||||
:width="300"
|
||||
:speed="2"
|
||||
primary-color="#17314f"
|
||||
secondary-color="#2b6cb0"
|
||||
>
|
||||
<rect x="94" y="18" rx="3" ry="3" width="111" height="24" />
|
||||
<rect x="23" y="76" rx="3" ry="3" width="74" height="12" />
|
||||
<rect x="130" y="76" rx="3" ry="3" width="34" height="12" />
|
||||
<rect x="185" y="76" rx="3" ry="3" width="48" height="12" />
|
||||
<rect x="246" y="76" rx="3" ry="3" width="30" height="12" />
|
||||
<circle cx="40" cy="123" r="16" />
|
||||
<rect x="60" y="116" rx="3" ry="3" width="49" height="13" />
|
||||
<rect x="130" y="116" rx="3" ry="3" width="42" height="16" />
|
||||
<rect x="185" y="116" rx="3" ry="3" width="42" height="16" />
|
||||
<rect x="246" y="116" rx="3" ry="3" width="42" height="16" />
|
||||
<circle cx="40" cy="171" r="16" />
|
||||
<rect x="60" y="163" rx="3" ry="3" width="49" height="13" />
|
||||
<rect x="130" y="163" rx="3" ry="3" width="42" height="16" />
|
||||
<rect x="185" y="163" rx="3" ry="3" width="42" height="16" />
|
||||
<rect x="246" y="163" rx="3" ry="3" width="42" height="16" />
|
||||
<circle cx="40" cy="219" r="16" />
|
||||
<rect x="60" y="212" rx="3" ry="3" width="49" height="13" />
|
||||
<rect x="130" y="212" rx="3" ry="3" width="42" height="16" />
|
||||
<rect x="185" y="212" rx="3" ry="3" width="42" height="16" />
|
||||
<rect x="246" y="212" rx="3" ry="3" width="42" height="16" />
|
||||
<circle cx="40" cy="267" r="16" />
|
||||
<rect x="60" y="260" rx="3" ry="3" width="49" height="13" />
|
||||
<rect x="130" y="260" rx="3" ry="3" width="42" height="16" />
|
||||
<rect x="185" y="260" rx="3" ry="3" width="42" height="16" />
|
||||
<rect x="246" y="260" rx="3" ry="3" width="42" height="16" />
|
||||
<circle cx="40" cy="315" r="16" />
|
||||
<rect x="60" y="308" rx="3" ry="3" width="49" height="13" />
|
||||
<rect x="130" y="308" rx="3" ry="3" width="42" height="16" />
|
||||
<rect x="185" y="308" rx="3" ry="3" width="42" height="16" />
|
||||
<rect x="246" y="308" rx="3" ry="3" width="42" height="16" />
|
||||
</content-loader>
|
||||
</div>
|
||||
<div class="mt-4 bg-blue-850 rounded-lg" style="width: 300px; height: 828px;">
|
||||
<content-loader
|
||||
:height="828"
|
||||
:width="300"
|
||||
:speed="2"
|
||||
primary-color="#17314f"
|
||||
secondary-color="#2b6cb0"
|
||||
>
|
||||
<rect x="122" y="17" rx="3" ry="3" width="55" height="24" />
|
||||
<rect x="26" y="72" rx="4" ry="4" width="8" height="51" />
|
||||
<rect x="86" y="72" rx="4" ry="4" width="8" height="51" />
|
||||
<rect x="146" y="72" rx="4" ry="4" width="8" height="51" />
|
||||
<rect x="206" y="72" rx="4" ry="4" width="8" height="51" />
|
||||
<rect x="266" y="72" rx="4" ry="4" width="8" height="51" />
|
||||
<rect x="22" y="128" rx="3" ry="3" width="16" height="16" />
|
||||
<rect x="82" y="128" rx="3" ry="3" width="16" height="16" />
|
||||
<rect x="142" y="128" rx="3" ry="3" width="16" height="16" />
|
||||
<rect x="202" y="128" rx="3" ry="3" width="16" height="16" />
|
||||
<rect x="262" y="128" rx="3" ry="3" width="16" height="16" />
|
||||
<rect x="14" y="182" rx="3" ry="3" width="45" height="16" />
|
||||
<rect x="93" y="182" rx="3" ry="3" width="45" height="16" />
|
||||
<rect x="155" y="182" rx="3" ry="3" width="58" height="16" />
|
||||
<rect x="250" y="182" rx="3" ry="3" width="33" height="16" />
|
||||
<rect x="14" y="212" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="93" y="212" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="168" y="212" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="238" y="212" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="14" y="237" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="93" y="237" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="168" y="237" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="238" y="237" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="14" y="262" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="93" y="262" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="168" y="262" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="238" y="262" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="14" y="287" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="93" y="287" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="168" y="287" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="238" y="287" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="14" y="312" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="93" y="312" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="168" y="312" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="238" y="312" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="14" y="337" rx="3" ry="3" width="105" height="12" />
|
||||
<rect x="238" y="337" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="14" y="362" rx="3" ry="3" width="85" height="12" />
|
||||
<rect x="238" y="362" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="14" y="397" rx="3" ry="3" width="115" height="16" />
|
||||
<rect x="150" y="397" rx="3" ry="3" width="65" height="16" />
|
||||
<rect x="223" y="397" rx="3" ry="3" width="60" height="16" />
|
||||
<rect x="14" y="427" rx="3" ry="3" width="95" height="12" />
|
||||
<rect x="165" y="427" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="238" y="427" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="14" y="452" rx="3" ry="3" width="95" height="12" />
|
||||
<rect x="165" y="452" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="238" y="452" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="14" y="487" rx="3" ry="3" width="115" height="16" />
|
||||
<rect x="150" y="487" rx="3" ry="3" width="65" height="16" />
|
||||
<rect x="223" y="487" rx="3" ry="3" width="60" height="16" />
|
||||
<rect x="14" y="517" rx="3" ry="3" width="95" height="12" />
|
||||
<rect x="165" y="517" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="238" y="517" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="14" y="542" rx="3" ry="3" width="95" height="12" />
|
||||
<rect x="165" y="542" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="238" y="542" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="14" y="577" rx="3" ry="3" width="115" height="16" />
|
||||
<rect x="150" y="577" rx="3" ry="3" width="65" height="16" />
|
||||
<rect x="223" y="577" rx="3" ry="3" width="60" height="16" />
|
||||
<rect x="14" y="607" rx="3" ry="3" width="50" height="12" />
|
||||
<rect x="165" y="607" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="238" y="607" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="14" y="632" rx="3" ry="3" width="50" height="12" />
|
||||
<rect x="165" y="632" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="238" y="632" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="14" y="657" rx="3" ry="3" width="50" height="12" />
|
||||
<rect x="165" y="657" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="238" y="657" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="14" y="682" rx="3" ry="3" width="50" height="12" />
|
||||
<rect x="165" y="682" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="238" y="682" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="14" y="707" rx="3" ry="3" width="50" height="12" />
|
||||
<rect x="165" y="707" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="238" y="707" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="14" y="732" rx="3" ry="3" width="50" height="12" />
|
||||
<rect x="165" y="732" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="238" y="732" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="122" y="762" rx="3" ry="3" width="55" height="20" />
|
||||
<rect x="115" y="789" rx="3" ry="3" width="70" height="12" />
|
||||
<rect x="110" y="805" rx="3" ry="3" width="80" height="12" />
|
||||
</content-loader>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 bg-blue-850 rounded-lg" style="width: 300px; height: 384px;">
|
||||
<content-loader
|
||||
:height="384"
|
||||
:width="300"
|
||||
:speed="2"
|
||||
primary-color="#17314f"
|
||||
secondary-color="#2b6cb0"
|
||||
>
|
||||
<rect x="112" y="17" rx="3" ry="3" width="75" height="24" />
|
||||
<rect x="14" y="70" rx="3" ry="3" width="80" height="16" />
|
||||
<rect x="150" y="70" rx="3" ry="3" width="40" height="16" />
|
||||
<rect x="217" y="70" rx="3" ry="3" width="59" height="16" />
|
||||
<rect x="14" y="100" rx="3" ry="3" width="85" height="12" />
|
||||
<rect x="145" y="100" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="218" y="100" rx="3" ry="3" width="65" height="12" />
|
||||
<rect x="14" y="121" rx="3" ry="3" width="65" height="12" />
|
||||
<rect x="145" y="121" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="218" y="121" rx="3" ry="3" width="65" height="12" />
|
||||
<rect x="14" y="142" rx="3" ry="3" width="85" height="12" />
|
||||
<rect x="145" y="142" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="218" y="142" rx="3" ry="3" width="65" height="12" />
|
||||
<rect x="14" y="163" rx="3" ry="3" width="115" height="12" />
|
||||
<rect x="145" y="163" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="218" y="163" rx="3" ry="3" width="65" height="12" />
|
||||
<rect x="14" y="184" rx="3" ry="3" width="85" height="12" />
|
||||
<rect x="145" y="184" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="218" y="184" rx="3" ry="3" width="65" height="12" />
|
||||
<rect x="14" y="205" rx="3" ry="3" width="85" height="12" />
|
||||
<rect x="145" y="205" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="218" y="205" rx="3" ry="3" width="65" height="12" />
|
||||
<rect x="14" y="226" rx="3" ry="3" width="65" height="12" />
|
||||
<rect x="145" y="226" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="218" y="226" rx="3" ry="3" width="65" height="12" />
|
||||
<rect x="14" y="247" rx="3" ry="3" width="115" height="12" />
|
||||
<rect x="145" y="247" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="218" y="247" rx="3" ry="3" width="65" height="12" />
|
||||
<rect x="14" y="268" rx="3" ry="3" width="115" height="12" />
|
||||
<rect x="145" y="268" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="218" y="268" rx="3" ry="3" width="65" height="12" />
|
||||
<rect x="14" y="289" rx="3" ry="3" width="85" height="12" />
|
||||
<rect x="145" y="289" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="218" y="289" rx="3" ry="3" width="65" height="12" />
|
||||
<rect x="14" y="310" rx="3" ry="3" width="65" height="12" />
|
||||
<rect x="145" y="310" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="218" y="310" rx="3" ry="3" width="65" height="12" />
|
||||
<rect x="14" y="331" rx="3" ry="3" width="115" height="12" />
|
||||
<rect x="145" y="331" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="218" y="331" rx="3" ry="3" width="65" height="12" />
|
||||
<rect x="14" y="352" rx="3" ry="3" width="85" height="12" />
|
||||
<rect x="145" y="352" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="218" y="352" rx="3" ry="3" width="65" height="12" />
|
||||
</content-loader>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-9/12">
|
||||
<div
|
||||
v-for="index in 10"
|
||||
:key="index"
|
||||
class="mt-4 ml-4 bg-blue-850 rounded-lg"
|
||||
style="width: 884px; height: 144px;"
|
||||
>
|
||||
<content-loader
|
||||
:height="144"
|
||||
:width="884"
|
||||
:speed="2"
|
||||
primary-color="#17314f"
|
||||
secondary-color="#2b6cb0"
|
||||
>
|
||||
<rect x="68" y="36" rx="8" ry="8" width="64" height="64" />
|
||||
<rect x="140" y="40" rx="6" ry="6" width="24" height="24" />
|
||||
<rect x="140" y="72" rx="6" ry="6" width="24" height="24" />
|
||||
<rect x="206" y="46" rx="3" ry="3" width="81" height="22" />
|
||||
<rect x="218" y="74" rx="3" ry="3" width="59" height="16" />
|
||||
<rect x="305" y="36" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="341" y="36" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="377" y="36" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="305" y="72" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="341" y="72" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="377" y="72" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="430" y="45" rx="3" ry="3" width="50" height="10" />
|
||||
<rect x="430" y="60" rx="3" ry="3" width="50" height="10" />
|
||||
<rect x="430" y="75" rx="3" ry="3" width="70" height="10" />
|
||||
<rect x="430" y="90" rx="3" ry="3" width="70" height="10" />
|
||||
<circle cx="608" cy="32" r="12" />
|
||||
<circle cx="608" cy="52" r="12" />
|
||||
<circle cx="608" cy="72" r="12" />
|
||||
<circle cx="608" cy="92" r="12" />
|
||||
<circle cx="608" cy="112" r="12" />
|
||||
<circle cx="672" cy="32" r="12" />
|
||||
<circle cx="672" cy="52" r="12" />
|
||||
<circle cx="672" cy="72" r="12" />
|
||||
<circle cx="672" cy="92" r="12" />
|
||||
<circle cx="672" cy="112" r="12" />
|
||||
<rect x="516" y="29" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="516" y="49" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="516" y="69" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="516" y="89" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="516" y="109" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="691" y="29" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="691" y="49" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="691" y="69" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="691" y="89" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="691" y="109" rx="3" ry="3" width="72" height="9" />
|
||||
<circle cx="830" cy="50" r="12" />
|
||||
<rect x="800" y="66" rx="3" ry="3" width="64" height="17" />
|
||||
<rect x="803" y="90" rx="3" ry="3" width="59" height="14" />
|
||||
</content-loader>
|
||||
</div>
|
||||
<div class="mt-4 mx-auto" style="width: 135px; height: 40px;">
|
||||
<content-loader
|
||||
:height="40"
|
||||
:width="135"
|
||||
:speed="2"
|
||||
primary-color="#17314f"
|
||||
secondary-color="#2b6cb0"
|
||||
>
|
||||
<rect x="0" y="0" rx="6" ry="6" width="135" height="40" />
|
||||
</content-loader>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ContentLoader } from 'vue-content-loader'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ContentLoader
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
|
||||
<template v-if="summonerLoading || summonerFound">
|
||||
<template v-if="summonerLoading">
|
||||
<SummonerLoader />
|
||||
<HeaderLoader />
|
||||
</template>
|
||||
<template v-else-if="summonerFound">
|
||||
<div class="flex justify-between items-center">
|
||||
|
|
@ -100,7 +100,7 @@ import LazyBackground from '@/components/LazyBackgroundImage.vue'
|
|||
import MainFooter from '@/components/MainFooter.vue'
|
||||
import RecentActivity from '@/components/Summoner/RecentActivity.vue'
|
||||
import SearchForm from '@/components/SearchForm.vue'
|
||||
import SummonerLoader from '@/components/Summoner/SummonerLoader.vue'
|
||||
import HeaderLoader from '@/components/Summoner/HeaderLoader.vue'
|
||||
import SummonerRanked from '@/components/Summoner/SummonerRanked.vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -109,7 +109,7 @@ export default {
|
|||
MainFooter,
|
||||
RecentActivity,
|
||||
SearchForm,
|
||||
SummonerLoader,
|
||||
HeaderLoader,
|
||||
SummonerRanked,
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -21,278 +21,26 @@
|
|||
>More matches</LoadingButton>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="mt-3 flex text-center">
|
||||
<div class="mt-4 w-3/12">
|
||||
<div class="bg-blue-850 rounded-lg" style="width: 300px; height: 339px;">
|
||||
<content-loader
|
||||
:height="339"
|
||||
:width="300"
|
||||
:speed="2"
|
||||
primary-color="#17314f"
|
||||
secondary-color="#2b6cb0"
|
||||
>
|
||||
<rect x="94" y="18" rx="3" ry="3" width="111" height="24" />
|
||||
<rect x="23" y="76" rx="3" ry="3" width="74" height="12" />
|
||||
<rect x="130" y="76" rx="3" ry="3" width="34" height="12" />
|
||||
<rect x="185" y="76" rx="3" ry="3" width="48" height="12" />
|
||||
<rect x="246" y="76" rx="3" ry="3" width="30" height="12" />
|
||||
<circle cx="40" cy="123" r="16" />
|
||||
<rect x="60" y="116" rx="3" ry="3" width="49" height="13" />
|
||||
<rect x="130" y="116" rx="3" ry="3" width="42" height="16" />
|
||||
<rect x="185" y="116" rx="3" ry="3" width="42" height="16" />
|
||||
<rect x="246" y="116" rx="3" ry="3" width="42" height="16" />
|
||||
<circle cx="40" cy="171" r="16" />
|
||||
<rect x="60" y="163" rx="3" ry="3" width="49" height="13" />
|
||||
<rect x="130" y="163" rx="3" ry="3" width="42" height="16" />
|
||||
<rect x="185" y="163" rx="3" ry="3" width="42" height="16" />
|
||||
<rect x="246" y="163" rx="3" ry="3" width="42" height="16" />
|
||||
<circle cx="40" cy="219" r="16" />
|
||||
<rect x="60" y="212" rx="3" ry="3" width="49" height="13" />
|
||||
<rect x="130" y="212" rx="3" ry="3" width="42" height="16" />
|
||||
<rect x="185" y="212" rx="3" ry="3" width="42" height="16" />
|
||||
<rect x="246" y="212" rx="3" ry="3" width="42" height="16" />
|
||||
<circle cx="40" cy="267" r="16" />
|
||||
<rect x="60" y="260" rx="3" ry="3" width="49" height="13" />
|
||||
<rect x="130" y="260" rx="3" ry="3" width="42" height="16" />
|
||||
<rect x="185" y="260" rx="3" ry="3" width="42" height="16" />
|
||||
<rect x="246" y="260" rx="3" ry="3" width="42" height="16" />
|
||||
<circle cx="40" cy="315" r="16" />
|
||||
<rect x="60" y="308" rx="3" ry="3" width="49" height="13" />
|
||||
<rect x="130" y="308" rx="3" ry="3" width="42" height="16" />
|
||||
<rect x="185" y="308" rx="3" ry="3" width="42" height="16" />
|
||||
<rect x="246" y="308" rx="3" ry="3" width="42" height="16" />
|
||||
</content-loader>
|
||||
</div>
|
||||
<div class="mt-4 bg-blue-850 rounded-lg" style="width: 300px; height: 828px;">
|
||||
<content-loader
|
||||
:height="828"
|
||||
:width="300"
|
||||
:speed="2"
|
||||
primary-color="#17314f"
|
||||
secondary-color="#2b6cb0"
|
||||
>
|
||||
<rect x="122" y="17" rx="3" ry="3" width="55" height="24" />
|
||||
<rect x="26" y="72" rx="4" ry="4" width="8" height="51" />
|
||||
<rect x="86" y="72" rx="4" ry="4" width="8" height="51" />
|
||||
<rect x="146" y="72" rx="4" ry="4" width="8" height="51" />
|
||||
<rect x="206" y="72" rx="4" ry="4" width="8" height="51" />
|
||||
<rect x="266" y="72" rx="4" ry="4" width="8" height="51" />
|
||||
<rect x="22" y="128" rx="3" ry="3" width="16" height="16" />
|
||||
<rect x="82" y="128" rx="3" ry="3" width="16" height="16" />
|
||||
<rect x="142" y="128" rx="3" ry="3" width="16" height="16" />
|
||||
<rect x="202" y="128" rx="3" ry="3" width="16" height="16" />
|
||||
<rect x="262" y="128" rx="3" ry="3" width="16" height="16" />
|
||||
<rect x="14" y="182" rx="3" ry="3" width="45" height="16" />
|
||||
<rect x="93" y="182" rx="3" ry="3" width="45" height="16" />
|
||||
<rect x="155" y="182" rx="3" ry="3" width="58" height="16" />
|
||||
<rect x="250" y="182" rx="3" ry="3" width="33" height="16" />
|
||||
<rect x="14" y="212" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="93" y="212" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="168" y="212" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="238" y="212" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="14" y="237" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="93" y="237" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="168" y="237" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="238" y="237" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="14" y="262" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="93" y="262" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="168" y="262" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="238" y="262" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="14" y="287" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="93" y="287" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="168" y="287" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="238" y="287" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="14" y="312" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="93" y="312" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="168" y="312" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="238" y="312" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="14" y="337" rx="3" ry="3" width="105" height="12" />
|
||||
<rect x="238" y="337" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="14" y="362" rx="3" ry="3" width="85" height="12" />
|
||||
<rect x="238" y="362" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="14" y="397" rx="3" ry="3" width="115" height="16" />
|
||||
<rect x="150" y="397" rx="3" ry="3" width="65" height="16" />
|
||||
<rect x="223" y="397" rx="3" ry="3" width="60" height="16" />
|
||||
<rect x="14" y="427" rx="3" ry="3" width="95" height="12" />
|
||||
<rect x="165" y="427" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="238" y="427" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="14" y="452" rx="3" ry="3" width="95" height="12" />
|
||||
<rect x="165" y="452" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="238" y="452" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="14" y="487" rx="3" ry="3" width="115" height="16" />
|
||||
<rect x="150" y="487" rx="3" ry="3" width="65" height="16" />
|
||||
<rect x="223" y="487" rx="3" ry="3" width="60" height="16" />
|
||||
<rect x="14" y="517" rx="3" ry="3" width="95" height="12" />
|
||||
<rect x="165" y="517" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="238" y="517" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="14" y="542" rx="3" ry="3" width="95" height="12" />
|
||||
<rect x="165" y="542" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="238" y="542" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="14" y="577" rx="3" ry="3" width="115" height="16" />
|
||||
<rect x="150" y="577" rx="3" ry="3" width="65" height="16" />
|
||||
<rect x="223" y="577" rx="3" ry="3" width="60" height="16" />
|
||||
<rect x="14" y="607" rx="3" ry="3" width="50" height="12" />
|
||||
<rect x="165" y="607" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="238" y="607" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="14" y="632" rx="3" ry="3" width="50" height="12" />
|
||||
<rect x="165" y="632" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="238" y="632" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="14" y="657" rx="3" ry="3" width="50" height="12" />
|
||||
<rect x="165" y="657" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="238" y="657" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="14" y="682" rx="3" ry="3" width="50" height="12" />
|
||||
<rect x="165" y="682" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="238" y="682" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="14" y="707" rx="3" ry="3" width="50" height="12" />
|
||||
<rect x="165" y="707" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="238" y="707" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="14" y="732" rx="3" ry="3" width="50" height="12" />
|
||||
<rect x="165" y="732" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="238" y="732" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="122" y="762" rx="3" ry="3" width="55" height="20" />
|
||||
<rect x="115" y="789" rx="3" ry="3" width="70" height="12" />
|
||||
<rect x="110" y="805" rx="3" ry="3" width="80" height="12" />
|
||||
</content-loader>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 bg-blue-850 rounded-lg" style="width: 300px; height: 384px;">
|
||||
<content-loader
|
||||
:height="384"
|
||||
:width="300"
|
||||
:speed="2"
|
||||
primary-color="#17314f"
|
||||
secondary-color="#2b6cb0"
|
||||
>
|
||||
<rect x="112" y="17" rx="3" ry="3" width="75" height="24" />
|
||||
<rect x="14" y="70" rx="3" ry="3" width="80" height="16" />
|
||||
<rect x="150" y="70" rx="3" ry="3" width="40" height="16" />
|
||||
<rect x="217" y="70" rx="3" ry="3" width="59" height="16" />
|
||||
<rect x="14" y="100" rx="3" ry="3" width="85" height="12" />
|
||||
<rect x="145" y="100" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="218" y="100" rx="3" ry="3" width="65" height="12" />
|
||||
<rect x="14" y="121" rx="3" ry="3" width="65" height="12" />
|
||||
<rect x="145" y="121" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="218" y="121" rx="3" ry="3" width="65" height="12" />
|
||||
<rect x="14" y="142" rx="3" ry="3" width="85" height="12" />
|
||||
<rect x="145" y="142" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="218" y="142" rx="3" ry="3" width="65" height="12" />
|
||||
<rect x="14" y="163" rx="3" ry="3" width="115" height="12" />
|
||||
<rect x="145" y="163" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="218" y="163" rx="3" ry="3" width="65" height="12" />
|
||||
<rect x="14" y="184" rx="3" ry="3" width="85" height="12" />
|
||||
<rect x="145" y="184" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="218" y="184" rx="3" ry="3" width="65" height="12" />
|
||||
<rect x="14" y="205" rx="3" ry="3" width="85" height="12" />
|
||||
<rect x="145" y="205" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="218" y="205" rx="3" ry="3" width="65" height="12" />
|
||||
<rect x="14" y="226" rx="3" ry="3" width="65" height="12" />
|
||||
<rect x="145" y="226" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="218" y="226" rx="3" ry="3" width="65" height="12" />
|
||||
<rect x="14" y="247" rx="3" ry="3" width="115" height="12" />
|
||||
<rect x="145" y="247" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="218" y="247" rx="3" ry="3" width="65" height="12" />
|
||||
<rect x="14" y="268" rx="3" ry="3" width="115" height="12" />
|
||||
<rect x="145" y="268" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="218" y="268" rx="3" ry="3" width="65" height="12" />
|
||||
<rect x="14" y="289" rx="3" ry="3" width="85" height="12" />
|
||||
<rect x="145" y="289" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="218" y="289" rx="3" ry="3" width="65" height="12" />
|
||||
<rect x="14" y="310" rx="3" ry="3" width="65" height="12" />
|
||||
<rect x="145" y="310" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="218" y="310" rx="3" ry="3" width="65" height="12" />
|
||||
<rect x="14" y="331" rx="3" ry="3" width="115" height="12" />
|
||||
<rect x="145" y="331" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="218" y="331" rx="3" ry="3" width="65" height="12" />
|
||||
<rect x="14" y="352" rx="3" ry="3" width="85" height="12" />
|
||||
<rect x="145" y="352" rx="3" ry="3" width="45" height="12" />
|
||||
<rect x="218" y="352" rx="3" ry="3" width="65" height="12" />
|
||||
</content-loader>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-9/12">
|
||||
<div
|
||||
v-for="index in 10"
|
||||
:key="index"
|
||||
class="mt-4 ml-4 bg-blue-850 rounded-lg"
|
||||
style="width: 884px; height: 144px;"
|
||||
>
|
||||
<content-loader
|
||||
:height="144"
|
||||
:width="884"
|
||||
:speed="2"
|
||||
primary-color="#17314f"
|
||||
secondary-color="#2b6cb0"
|
||||
>
|
||||
<rect x="68" y="36" rx="8" ry="8" width="64" height="64" />
|
||||
<rect x="140" y="40" rx="6" ry="6" width="24" height="24" />
|
||||
<rect x="140" y="72" rx="6" ry="6" width="24" height="24" />
|
||||
<rect x="206" y="46" rx="3" ry="3" width="81" height="22" />
|
||||
<rect x="218" y="74" rx="3" ry="3" width="59" height="16" />
|
||||
<rect x="305" y="36" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="341" y="36" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="377" y="36" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="305" y="72" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="341" y="72" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="377" y="72" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="430" y="45" rx="3" ry="3" width="50" height="10" />
|
||||
<rect x="430" y="60" rx="3" ry="3" width="50" height="10" />
|
||||
<rect x="430" y="75" rx="3" ry="3" width="70" height="10" />
|
||||
<rect x="430" y="90" rx="3" ry="3" width="70" height="10" />
|
||||
<circle cx="608" cy="32" r="12" />
|
||||
<circle cx="608" cy="52" r="12" />
|
||||
<circle cx="608" cy="72" r="12" />
|
||||
<circle cx="608" cy="92" r="12" />
|
||||
<circle cx="608" cy="112" r="12" />
|
||||
<circle cx="672" cy="32" r="12" />
|
||||
<circle cx="672" cy="52" r="12" />
|
||||
<circle cx="672" cy="72" r="12" />
|
||||
<circle cx="672" cy="92" r="12" />
|
||||
<circle cx="672" cy="112" r="12" />
|
||||
<rect x="516" y="29" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="516" y="49" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="516" y="69" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="516" y="89" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="516" y="109" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="691" y="29" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="691" y="49" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="691" y="69" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="691" y="89" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="691" y="109" rx="3" ry="3" width="72" height="9" />
|
||||
<circle cx="830" cy="50" r="12" />
|
||||
<rect x="800" y="66" rx="3" ry="3" width="64" height="17" />
|
||||
<rect x="803" y="90" rx="3" ry="3" width="59" height="14" />
|
||||
</content-loader>
|
||||
</div>
|
||||
<div class="mt-4 mx-auto" style="width: 135px; height: 40px;">
|
||||
<content-loader
|
||||
:height="40"
|
||||
:width="135"
|
||||
:speed="2"
|
||||
primary-color="#17314f"
|
||||
secondary-color="#2b6cb0"
|
||||
>
|
||||
<rect x="0" y="0" rx="6" ry="6" width="135" height="40" />
|
||||
</content-loader>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<OverviewLoader />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import { ContentLoader } from 'vue-content-loader'
|
||||
import { mapState, mapActions, mapGetters } from 'vuex'
|
||||
import LoadingButton from '@/components/LoadingButton.vue'
|
||||
import Match from '@/components/Match/Match.vue'
|
||||
import OverviewLoader from '@/components/Summoner/Overview/OverviewLoader.vue'
|
||||
import SummonerChampions from '@/components/Summoner/Overview/SummonerChampions.vue'
|
||||
import SummonerMates from '@/components/Summoner/Overview/SummonerMates.vue'
|
||||
import SummonerStats from '@/components/Summoner/Overview/SummonerStats.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ContentLoader,
|
||||
LoadingButton,
|
||||
Match,
|
||||
OverviewLoader,
|
||||
SummonerChampions,
|
||||
SummonerMates,
|
||||
SummonerStats,
|
||||
|
|
|
|||
Loading…
Reference in a new issue