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

fix: fixed table layout for champions tab

Browse source
This commit is contained in:
Valentin Kaelin 2019-12-30 22:01:11 +01:00
parent 3465962143
commit cb64ef870d
1 changed files with 10 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
client/src/components/Summoner/Champions/ChampionsTable.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<table class="w-full table-auto bg-blue-800 rounded-lg text-center leading-none"> <table class="w-full table-fixed bg-blue-800 rounded-lg text-center leading-none">
<thead> <thead>
<tr class="heading rounded-t-lg text-sm select-none"> <tr class="heading rounded-t-lg text-sm select-none">
<th <th
@ -12,7 +12,10 @@
:key="`champHeading-${index}`" :key="`champHeading-${index}`"
@click="sortBy(heading.props)" @click="sortBy(heading.props)"
v-html="heading.name" v-html="heading.name"
:class="[{'rounded-tr-lg': index === headings.length - 1}, sortedClasses(heading.props)]" :class="[
{'rounded-tr-lg': index === headings.length - 1, 'w-name': heading.name === 'name'},
sortedClasses(heading.props)
]"
class="relative px-2 py-4 font-normal cursor-pointer hover:bg-blue-700" class="relative px-2 py-4 font-normal cursor-pointer hover:bg-blue-700"
></th> ></th>
</tr> </tr>
@ -31,7 +34,7 @@
<div class="flex items-center"> <div class="flex items-center">
<div <div
:style="{backgroundImage: `url('${champion.champion.icon}')`}" :style="{backgroundImage: `url('${champion.champion.icon}')`}"
class="w-6 h-6 bg-cover bg-center bg-blue-1000 rounded-full" class="w-6 h-6 flex-shrink-0 bg-cover bg-center bg-blue-1000 rounded-full"
></div> ></div>
<div class="ml-2">{{ champion.champion.name }}</div> <div class="ml-2">{{ champion.champion.name }}</div>
</div> </div>
@ -293,4 +296,8 @@ export default {
.sorted:hover::after { .sorted:hover::after {
background-color: #2b6cb0; background-color: #2b6cb0;
} }
.w-name {
width: 135px;
}
</style> </style>