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

feat: display banned champion name on hover

Browse source
This commit is contained in:
Valentin Kaelin 2019-11-29 18:09:35 +01:00
parent bf589f636b
commit 7950d835c4
1 changed files with 30 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
client/src/components/Match/DetailedMatchGlobalStats.vue
View file

@ -1,11 +1,16 @@
<template> <template>
<div :class="allyTeam ? 'text-left' : 'text-right'"> <div :class="allyTeam ? 'text-left' : 'text-right'">
<div v-if="team.bans"> <div v-if="team.bans">
<div <Dropdown
v-for="ban in team.bans" v-for="ban in team.bans"
:key="'ban-' + ban.pickTurn" :key="'ban-' + ban.pickTurn"
:class="[{'ml-2': ban.pickTurn !== 6 && ban.pickTurn !== 1}, allyTeam ? 'ban-blue border-teal-500' : 'ban-red border-red-500']" :class="{'ml-2': ban.pickTurn !== 6 && ban.pickTurn !== 1}"
class="relative ban inline-block border-2 rounded-full" class="inline-block"
>
<template v-slot:trigger>
<div
:class="[allyTeam ? 'ban-blue border-teal-500' : 'ban-red border-red-500']"
class="relative ban border-2 rounded-full cursor-pointer"
> >
<div <div
:style="[ban.champion.id ? {backgroundImage: `url('${ban.champion.icon}')`} : '']" :style="[ban.champion.id ? {backgroundImage: `url('${ban.champion.icon}')`} : '']"
@ -16,6 +21,13 @@
class="absolute ban-order w-4 h-4 flex items-center justify-center text-xs font-bold rounded-full" class="absolute ban-order w-4 h-4 flex items-center justify-center text-xs font-bold rounded-full"
>{{ ban.pickTurn }}</div> >{{ ban.pickTurn }}</div>
</div> </div>
</template>
<template v-slot:default>
<div class="px-2 text-white text-center text-xs leading-tight select-none">
<div>{{ ban.champion.name }}</div>
</div>
</template>
</Dropdown>
</div> </div>
<div <div
:class="allyTeam ? 'text-left' : 'text-right flex-row-reverse'" :class="allyTeam ? 'text-left' : 'text-right flex-row-reverse'"
@ -61,7 +73,13 @@
</template> </template>
<script> <script>
import Dropdown from '@/components/Dropdown'
export default { export default {
components: {
Dropdown,
},
props: { props: {
team: { team: {
type: Object, type: Object,