fix(front): display old items icons

This commit is contained in:
Valentin Kaelin 2020-11-14 18:28:39 +01:00
parent ec9930296d
commit 44f10b6c35

View file

@ -1,26 +1,37 @@
<template> <template>
<div :class="oneRow ? 'ml-2 items-center' : 'items-2-rows flex-wrap'" class="flex"> <div
:class="oneRow ? 'ml-2 items-center' : 'items-2-rows flex-wrap'"
class="flex"
>
<Tooltip v-for="(item, index) in items" :key="index"> <Tooltip v-for="(item, index) in items" :key="index">
<template v-slot:trigger> <template v-slot:trigger>
<div <div
:style="{backgroundImage: item ? `url('${item.image}')` : null}" :style="{ backgroundImage: itemLink(item) }"
:class="[oneRow ? 'ml-2px w-6 h-6' : 'ml-1 w-8 h-8', {'cursor-pointer': item !== null}]" :class="[
oneRow ? 'ml-2px w-6 h-6' : 'ml-1 w-8 h-8',
{ 'cursor-pointer': item !== null },
]"
class="bg-center bg-cover rounded-md bg-blue-1000" class="bg-center bg-cover rounded-md bg-blue-1000"
></div> ></div>
</template> </template>
<template v-if="item !== null" v-slot:default> <template v-if="item !== null" v-slot:default>
<div class="flex max-w-md p-2 text-xs text-left text-white select-none"> <div class="flex max-w-md p-2 text-xs text-left text-white select-none">
<div <div
:style="{backgroundImage: item ? `url('${item.image}')` : null}" :style="{ backgroundImage: itemLink(item) }"
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">{{ 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">{{ item.price }}</span> <span class="ml-1 text-sm font-semibold text-yellow-500">{{
item.price
}}</span>
</div> </div>
<div v-html="item.description" class="mt-1 font-light text-blue-200 item-description"></div> <div
v-html="item.description"
class="mt-1 font-light text-blue-200 item-description"
></div>
</div> </div>
</div> </div>
</template> </template>
@ -45,6 +56,19 @@ export default {
type: Array, type: Array,
required: true required: true
} }
},
methods: {
itemLink(item) {
if (!item) {
return null
}
// Fix to still make work the old items links (before season 11)
const originalUrl = item.image
const newUrl = originalUrl.includes('/global/default/assets/items/') ? originalUrl : originalUrl.replace('latest', '10.22')
return `url('${newUrl}')`
}
} }
} }
</script> </script>