Fix object image sizing

This commit is contained in:
Colin Kallemein 2024-07-07 23:03:44 +02:00
parent 1b46be98b8
commit 38307ec2d9

View File

@ -17,16 +17,16 @@
</div>
</template>
<template #modalBody>
<div class="my-[15px] mx-auto">
<div class="columns-2 sm:columns-3 md:columns-4 lg:columns-5 gap-4">
<div v-for="(object, index) in zoneEditorStore.objectList" :key="index" class="mb-4">
<div class="m-[15px]">
<div class="flex justify-between flex-wrap gap-2.5 items-center">
<div v-for="(object, index) in zoneEditorStore.objectList" :key="index" class="max-w-[25%] inline-block">
<img
class="border-2 border-solid"
class="border-2 border-solid max-w-full"
:src="`${config.server_endpoint}/assets/objects/${object.id}.png`"
alt="Object"
@click="zoneEditorStore.setSelectedObject(object)"
:class="{
'w-full h-auto cursor-pointer transition-all duration-300': true,
'cursor-pointer transition-all duration-300': true,
'border-cyan shadow-lg scale-105': zoneEditorStore.selectedObject?.id === object.id,
'border-transparent hover:border-gray-300': zoneEditorStore.selectedObject?.id !== object.id
}"