vhaudiquet/buildpath
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Better ChampionSelector

Browse Source
This commit is contained in:
Valentin Haudiquet
2024-11-24 21:20:40 +01:00
parent 83917eec70
commit 83d5cdd27d
1 changed files with 26 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/components/ChampionSelector.vue
View File

@@ -9,16 +9,22 @@ watch(searchText, (newT, oldT) => {
filteredChampions.value = champions.value.slice(1).filter((champion) => champion.name.toLowerCase().includes(searchText.value.toLowerCase())) filteredChampions.value = champions.value.slice(1).filter((champion) => champion.name.toLowerCase().includes(searchText.value.toLowerCase()))
}) })
async function submit() {
await navigateTo("/champion/" + filteredChampions.value[0].alias.toLowerCase())
}
</script> </script>
<template> <template>
<div> <div>
<div style="width: fit-content; margin: auto;"> <div style="width: fit-content; margin: auto;">
<input v-model="searchText" ref="searchBar" class="search-bar" type="text" placeholder="Search a champion"/> <input @keyup.enter="submit" v-model="searchText" ref="searchBar" class="search-bar" type="text" placeholder="Search a champion"/>
</div> </div>
<div class="champion-container" style="margin-top: 20px;"> <div class="champion-container" style="margin-top: 20px; margin-bottom: 20px;">
<RouterLink style="margin-left: 5px; margin-right: 5px;" v-for="champion in filteredChampions" :to="'/champion/' + champion.alias.toLowerCase()"> <RouterLink v-for="champion in filteredChampions" :to="'/champion/' + champion.alias.toLowerCase()">
<img :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)" :alt="champion.name"/> <div class="champion-img-container">
<img class="champion-img" :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)" :alt="champion.name"/>
</div>
</RouterLink> </RouterLink>
</div> </div>
</div> </div>
@@ -45,6 +51,10 @@ watch(searchText, (newT, oldT) => {
width: 1390px; width: 1390px;
height: auto; height: auto;
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-gap: 10px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
scrollbar-color: var(--color-on-surface) var(--color-surface-darker); scrollbar-color: var(--color-on-surface) var(--color-surface-darker);
@@ -52,4 +62,16 @@ watch(searchText, (newT, oldT) => {
margin: auto; margin: auto;
} }
.champion-img-container {
overflow: hidden; width: 120px; height: 120px;
border: 1px solid var(--color-surface);
}
.champion-img-container:hover {
border: 1px solid var(--color-on-surface);
}
.champion-img {
width: 116px;
height: 116px;
transform: translate(4px, 4px) scale(1.2, 1.2);
}
</style> </style>