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

Better (responsive) champion selector
All checks were successful
pipeline / build-and-push-images (push) Successful in 28s
Details
pipeline / deploy (push) Successful in 8s
Details

Browse Source
This commit is contained in:
Valentin Haudiquet
2024-11-25 12:04:44 +01:00
parent a874fd6c21
commit 10c5c1e5a1
1 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/components/ChampionSelector.vue
View File

@@ -25,7 +25,7 @@ async function submit() {
<div style="width: fit-content; margin: auto;"> <div style="width: fit-content; margin: auto;">
<input @keyup.enter="submit" 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; margin-bottom: 20px;"> <div class="champion-container">
<NuxtLink v-for="champion in filteredChampions" :to="'/champion/' + champion.alias.toLowerCase()"> <NuxtLink v-for="champion in filteredChampions" :to="'/champion/' + champion.alias.toLowerCase()">
<div class="champion-img-container"> <div class="champion-img-container">
<NuxtImg class="champion-img" :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)" :alt="champion.name"/> <NuxtImg class="champion-img" :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)" :alt="champion.name"/>
@@ -53,19 +53,22 @@ async function submit() {
outline: none; outline: none;
} }
.champion-container { .champion-container {
width: 1390px; width: 90%;
height: auto; height: auto;
display: grid; display: grid;
grid-template-columns: repeat(10, 1fr); grid-template-columns: repeat(auto-fit, 128px);
grid-gap: 10px; grid-gap: 10px;
justify-content: center;
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);
scrollbar-width: thin; scrollbar-width: thin; */
margin: auto; margin: auto;
margin-top: 20px;
margin-bottom: 20px;
} }
.champion-img-container { .champion-img-container {
overflow: hidden; width: 120px; height: 120px; overflow: hidden; width: 120px; height: 120px;