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

refactor: update item tooltips to match new season 11 items

Browse source
This commit is contained in:
Valentin Kaelin 2020-12-05 17:54:16 +01:00
parent f2ade5518f
commit 50fbd1053a
1 changed files with 29 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
client/src/components/Match/MatchItems.vue
View file

@ -21,7 +21,7 @@
class="flex-shrink-0 w-12 h-12 ml-1 bg-center bg-cover rounded-md bg-blue-1000" class="flex-shrink-0 w-12 h-12 ml-1 bg-center bg-cover rounded-md bg-blue-1000"
></div> ></div>
<div class="ml-2 leading-none"> <div class="ml-2 leading-none">
<div class="text-base">{{ item.name }}</div> <div class="text-base">{{ itemName(item.name) }}</div>
<div class="mt-1"> <div class="mt-1">
<span class="text-blue-200">Price:</span> <span class="text-blue-200">Price:</span>
<span class="ml-1 text-sm font-semibold text-yellow-500">{{ <span class="ml-1 text-sm font-semibold text-yellow-500">{{
@ -68,6 +68,10 @@ export default {
const originalUrl = item.image const originalUrl = item.image
const newUrl = originalUrl.includes('/global/default/assets/items/') ? originalUrl : originalUrl.replace('latest', '10.22') const newUrl = originalUrl.includes('/global/default/assets/items/') ? originalUrl : originalUrl.replace('latest', '10.22')
return `url('${newUrl}')` return `url('${newUrl}')`
},
itemName(name) {
// Remove placeholders in item names (e.g.: for Ornn items)
return name.replace(/%[^%]*%/, '')
} }
} }
} }
@ -80,28 +84,40 @@ export default {
} }
.item-description >>> stats { .item-description >>> stats {
color: #fff; @apply text-white leading-tight;
line-height: 1.25;
} }
.item-description >>> br + br { .item-description >>> br + br {
display: none; @apply hidden;
} }
.item-description >>> stats br { .item-description >>> stats br {
display: block; @apply block;
}
.item-description >>> li {
@apply block mt-2;
}
.item-description >>> passive {
@apply text-white font-normal;
}
.item-description >>> active {
@apply inline-block text-white font-bold mt-2;
} }
.item-description >>> unique, .item-description >>> unique,
.item-description >>> passive, .item-description >>> li > passive:first-child,
.item-description >>> active { .item-description >>> rarityMythic {
color: #fff; @apply text-white font-bold block mt-2;
font-weight: bold;
display: block;
margin-top: 0.5rem;
} }
.item-description >>> font { .item-description >>> font {
color: #63b3ed; @apply text-blue-400;
}
.item-description >>> rules {
@apply block mt-2 text-blue-400 italic;
} }
</style> </style>