mirror of
https://github.com/vkaelin/LeagueStats.git
synced 2026-03-25 12:57:28 +00:00
Remove unused code and polish SearchForm
This commit is contained in:
Valentin Kaelin
parent
2218030f4d
commit
60fc3bd74e
3 changed files with 20 additions and 208 deletions
|
|
@ -1,7 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<form @submit.prevent="formSubmit" class="flex text-teal-100 text-lg w-full">
|
<form @submit.prevent="formSubmit" class="flex text-teal-100 text-lg w-full">
|
||||||
<div class="relative w-full">
|
<div class="relative w-full">
|
||||||
<!-- <v-icon name="search" class="absolute ml-2 vertical-center"></v-icon> -->
|
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
autofocus
|
autofocus
|
||||||
|
|
@ -10,9 +9,9 @@
|
||||||
>
|
>
|
||||||
<div class="absolute right-0 vertical-center flex items-center h-full mr-2">
|
<div class="absolute right-0 vertical-center flex items-center h-full mr-2">
|
||||||
<div
|
<div
|
||||||
v-bind:class="{'bg-teal-600' : dropdown}"
|
|
||||||
@click="dropdown = !dropdown"
|
@click="dropdown = !dropdown"
|
||||||
class="cursor-pointer flex items-center px-2 py-1 rounded"
|
:class="{'bg-teal-600' : dropdown}"
|
||||||
|
class="cursor-pointer flex items-center px-2 py-1 rounded transition-all transition-fast ease-in-quad ease-out-quad hover:text-white"
|
||||||
>
|
>
|
||||||
<span class="selected font-bold">{{ selectedRegion }}</span>
|
<span class="selected font-bold">{{ selectedRegion }}</span>
|
||||||
<v-icon name="caret-down" class="ml-1"></v-icon>
|
<v-icon name="caret-down" class="ml-1"></v-icon>
|
||||||
|
|
@ -35,8 +34,8 @@
|
||||||
v-for="(region, index) in regions"
|
v-for="(region, index) in regions"
|
||||||
:key="region"
|
:key="region"
|
||||||
@click="selectedRegion = region"
|
@click="selectedRegion = region"
|
||||||
class="px-4b py-1 text-xs bg-teal-600 hover:bg-teal-500"
|
|
||||||
:class="classRegions(index)"
|
:class="classRegions(index)"
|
||||||
|
class="px-4b py-1 text-xs bg-teal-600 hover:bg-teal-500"
|
||||||
>{{ region }}</div>
|
>{{ region }}</div>
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</transition>
|
||||||
|
|
@ -50,43 +49,36 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: {
|
|
||||||
data: Object
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
summoner: "",
|
summoner: '',
|
||||||
dropdown: false,
|
dropdown: false,
|
||||||
regions: [
|
regions: [
|
||||||
"BR",
|
'BR',
|
||||||
"EUNE",
|
'EUNE',
|
||||||
"EUW",
|
'EUW',
|
||||||
"JP",
|
'JP',
|
||||||
"KR",
|
'KR',
|
||||||
"LAN",
|
'LAN',
|
||||||
"LAS",
|
'LAS',
|
||||||
"NA",
|
'NA',
|
||||||
"OCE",
|
'OCE',
|
||||||
"TR",
|
'TR',
|
||||||
"RU"
|
'RU'
|
||||||
],
|
],
|
||||||
selectedRegion: "EUW"
|
selectedRegion: 'EUW'
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
classRegions(index) {
|
classRegions(index) {
|
||||||
return {
|
return {
|
||||||
"rounded-t": index === 0,
|
'rounded-t': index === 0,
|
||||||
"rounded-b": index === this.regions.length - 1
|
'rounded-b': index === this.regions.length - 1
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
formSubmit() {
|
formSubmit() {
|
||||||
console.log("form submit child");
|
console.log('form submit child');
|
||||||
this.$emit(
|
this.$emit('formSubmit', this.summoner, this.selectedRegion.toLowerCase());
|
||||||
"formSubmit",
|
|
||||||
this.summoner,
|
|
||||||
this.selectedRegion.toLowerCase()
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
@ -97,24 +89,4 @@ export default {
|
||||||
top: 57px;
|
top: 57px;
|
||||||
right: 1px;
|
right: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bounce-enter-active {
|
|
||||||
animation: bounce-in 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bounce-leave-active {
|
|
||||||
animation: bounce-in 0.5s reverse;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes bounce-in {
|
|
||||||
0% {
|
|
||||||
transform: scale(0);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: scale(1.25);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,52 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<title>Riot Api Node</title>
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
|
|
||||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
|
|
||||||
<!-- Custom CSS -->
|
|
||||||
<link rel="stylesheet" href="public/style.css">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body class="font-sans bg-grey-lighter">
|
|
||||||
|
|
||||||
<div class="loader--overlay">
|
|
||||||
<div class="loader-container">
|
|
||||||
<div class="LoaderBalls">
|
|
||||||
<div class="LoaderBalls__item"></div>
|
|
||||||
<div class="LoaderBalls__item"></div>
|
|
||||||
<div class="LoaderBalls__item"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button class="debug"></button>
|
|
||||||
|
|
||||||
<div class="search">
|
|
||||||
|
|
||||||
<div class="container mx-auto">
|
|
||||||
<h2>Homepage</h2>
|
|
||||||
<form class="flex items-center" id="changeName" method="get" action="summoners">
|
|
||||||
<input type="search" class="hadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline mr-1" id="name" name="username" placeholder="Pseudo du Joueur">
|
|
||||||
<button type="submit" class="bg-white hover:bg-grey-lightest text-grey-darkest font-semibold py-2 px-4 mr-1 border border-grey-light rounded shadow">
|
|
||||||
Chercher
|
|
||||||
</button>
|
|
||||||
<button id="refresh" class="bg-white hover:bg-grey-lightest text-grey-darkest font-semibold py-2 px-4 border border-grey-light rounded shadow">
|
|
||||||
<i class="fas fa-sync"></i>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="flex items-center justify-center w-full" style="height: calc(100vh - 153px);">
|
|
||||||
<h1>Welcome on KLN's RIOT API Test</h1>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,108 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<title>Riot Api Node</title>
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
|
|
||||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
|
|
||||||
<!-- Custom CSS -->
|
|
||||||
<link rel="stylesheet" href="public/style.css">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body class="font-sans bg-grey-lighter">
|
|
||||||
|
|
||||||
<div class="loader--overlay">
|
|
||||||
<div class="loader-container">
|
|
||||||
<div class="LoaderBalls">
|
|
||||||
<div class="LoaderBalls__item"></div>
|
|
||||||
<div class="LoaderBalls__item"></div>
|
|
||||||
<div class="LoaderBalls__item"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button class="debug"></button>
|
|
||||||
|
|
||||||
<div class="search">
|
|
||||||
<div class="container mx-auto">
|
|
||||||
|
|
||||||
<form class="flex items-center mb-6" id="changeName" method="get" action="summoners">
|
|
||||||
<input type="search" class="hadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline mr-1" id="name" name="username" placeholder="Pseudo du Joueur">
|
|
||||||
<button type="submit" class="bg-white hover:bg-grey-lightest text-grey-darkest font-semibold py-2 px-4 mr-1 border border-grey-light rounded shadow">
|
|
||||||
Chercher
|
|
||||||
</button>
|
|
||||||
<button id="refresh" class="bg-white hover:bg-grey-lightest text-grey-darkest font-semibold py-2 px-4 border border-grey-light rounded shadow">
|
|
||||||
<i class="fas fa-sync"></i>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container mx-auto pb-16">
|
|
||||||
<div class="player shadow-md">
|
|
||||||
<div class="player__pp"></div>
|
|
||||||
<h1 class="player__name">Default name</h1>
|
|
||||||
<h3 class="player__level">Default level</h3>
|
|
||||||
<h3 class="player__rank">Default division</h3>
|
|
||||||
<div class="player__rank-img"></div>
|
|
||||||
<h3 class="player__ratio">Default ratio</h3>
|
|
||||||
|
|
||||||
|
|
||||||
<!--<ul class="list-matches--debug">
|
|
||||||
|
|
||||||
<li class="match">
|
|
||||||
<div class="content-container">
|
|
||||||
|
|
||||||
<div class="first">
|
|
||||||
<img src="/public/img/champions/Vayne.png" class="champion-img" alt="example design">
|
|
||||||
<span class="level">17</span>
|
|
||||||
<div class="summonerSpells">
|
|
||||||
<img class="spell-icon" src="https://cdn.valentinkaelin.ch/riot/spells/SummonerFlash.png" alt="Flash">
|
|
||||||
<img class="spell-icon" src="https://cdn.valentinkaelin.ch/riot/spells/SummonerDot.png" alt="Ignite">
|
|
||||||
</div>
|
|
||||||
<span class="champion-name">Vayne</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="second">
|
|
||||||
<div class="map">Summoner's Rift</div>
|
|
||||||
<div class="gamemode">Normal (Draft Mode)</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="third">
|
|
||||||
<img src="https://cdn.valentinkaelin.ch/riot/items/3140.png" class="item" alt="example design">
|
|
||||||
<img src="https://cdn.valentinkaelin.ch/riot/items/3153.png" class="item" alt="example design">
|
|
||||||
<img src="https://cdn.valentinkaelin.ch/riot/items/3031.png" class="item" alt="example design">
|
|
||||||
<img src="https://cdn.valentinkaelin.ch/riot/items/3124.png" class="item" alt="example design">
|
|
||||||
<img src="https://cdn.valentinkaelin.ch/riot/items/3094.png" class="item" alt="example design">
|
|
||||||
<img src="https://cdn.valentinkaelin.ch/riot/items/3006.png" class="item" alt="example design">
|
|
||||||
<img src="https://cdn.valentinkaelin.ch/riot/items/3363.png" class="item" alt="example design">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="fourth">
|
|
||||||
<div class="score">8/6/9</div>
|
|
||||||
<div class="gold-farm">
|
|
||||||
<div class="gold">16.2k</div>
|
|
||||||
<div class="farm">227</div>
|
|
||||||
</div>
|
|
||||||
<div class="duration-date">
|
|
||||||
<div class="duration">40:31</div>
|
|
||||||
<div class="date">1/12/2018</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>-->
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="public/data.js"></script>
|
|
||||||
<script src="public/functions.js"></script>
|
|
||||||
<script src="public/summoner.js"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in a new issue