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

fix: table row background image bug on Edge/Safari on live game tab

Browse source
This commit is contained in:
Valentin Kaelin 2020-02-02 14:38:17 +01:00
parent cf3e3a475f
commit f2a1e01794
2 changed files with 29 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
client/src/components/Summoner/Live/LiveTeam.vue
View file

@ -19,12 +19,8 @@
<tr <tr
v-for="(player, index) in team" v-for="(player, index) in team"
:key="player.summonerId" :key="player.summonerId"
:style="{ :style="getCSSVars(player.championId)"
backgroundImage: class="relative live-team-row"
`linear-gradient(90deg, rgba(42, 67, 101, 0.3) 0%, rgba(42, 67, 101, 0.8) 40%, rgba(42, 67, 101, 1) 100%),
url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/${player.championId}/${player.championId}000.jpg')`
}"
class="bg-cover bg-center"
> >
<td class="py-1 pl-2 rounded-l-lg"> <td class="py-1 pl-2 rounded-l-lg">
<div class="flex items-center"> <div class="flex items-center">
@ -138,7 +134,7 @@
</tr> </tr>
</tbody> </tbody>
<tbody v-else> <tbody v-else>
<tr v-for="index in 5" :key="index" class="bg-blu"> <tr v-for="index in 5" :key="index">
<td colspan="4" class="bg-blue-760 rounded-lg"> <td colspan="4" class="bg-blue-760 rounded-lg">
<content-loader <content-loader
:height="54" :height="54"
@ -216,6 +212,12 @@ export default {
return this.ally ? 'border-teal-400' : 'border-red-400' return this.ally ? 'border-teal-400' : 'border-red-400'
}, },
getCSSVars(championId) {
return {
'--bg-img': `linear-gradient(90deg, rgba(42, 67, 101, 0.3) 0%, rgba(42, 67, 101, 0.8) 40%, rgba(42, 67, 101, 1) 100%),
url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/${championId}/${championId}000.jpg')`,
}
},
getSummonerLink, getSummonerLink,
} }
} }
@ -232,4 +234,23 @@ export default {
.w-bans { .w-bans {
width: 5rem; width: 5rem;
} }
.live-team-row td {
position: relative;
z-index: 20;
}
.live-team-row td:first-child:before {
content: "";
position: absolute;
z-index: -10;
top: 0;
left: 0;
bottom: 0;
width: 1160px;
background-image: var(--bg-img);
background-position: center;
background-size: cover;
border-radius: 0.5rem;
}
</style> </style>

2
client/src/views/SummonerLive.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div key="live-game"> <div key="live-game">
<div v-if="playing || summonerLoading"> <div v-if="playing || summonerLoading">
<div v-if="liveLoaded" class="flex items-center justify-end text-blue-200 text-base"> <div v-if="liveLoaded" class="-mt-4 flex items-center justify-end text-blue-200 text-base">
<div>{{ gamemode.type }} {{ gamemode.name }}</div> <div>{{ gamemode.type }} {{ gamemode.name }}</div>
<div class="mx-2">-</div> <div class="mx-2">-</div>
<div>{{ displayStartTime }}</div> <div>{{ displayStartTime }}</div>