diff --git a/src/components/utilities/zoneEditor/Objects.vue b/src/components/utilities/zoneEditor/Objects.vue index 4c61096..dcc7ea4 100644 --- a/src/components/utilities/zoneEditor/Objects.vue +++ b/src/components/utilities/zoneEditor/Objects.vue @@ -2,19 +2,22 @@ <Teleport to="body"> <Modal v-if="isModalOpen" @modal:close="() => zoneEditorStore.setTool('move')" :isModalOpen="true" :modal-width="645" :modal-height="260"> <template #modalHeader> - <h3 class="modal-title">Objects</h3> + <h3 class="text-lg">Objects</h3> </template> <template #modalBody> - <div class="container objects"> - <div class="objects"> - <img - v-for="(object, index) in objects" - :key="index" - :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" - alt="Object" - @click="zoneEditorStore.setSelectedObject(object.id)" - :class="{ selected: zoneEditorStore.selectedObject && zoneEditorStore.selectedObject === object.id }" - /> + <div class="container mx-auto"> + <div class="columns-2 sm:columns-3 md:columns-4 lg:columns-5 gap-4"> + <div v-for="(object, index) in objects" :key="index" class="mb-4"> + <img + :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" + alt="Object" + @click="zoneEditorStore.setSelectedObject(object.id)" + :class="{ + 'w-full h-auto cursor-pointer border-2 border-transparent transition-colors duration-300': true, + 'border-red-500': zoneEditorStore.selectedObject && zoneEditorStore.selectedObject === object.id + }" + /> + </div> </div> </div> </template> @@ -41,33 +44,4 @@ onMounted(async () => { objects.value = response }) }) -</script> - -<style lang="scss"> -@import '@/assets/scss/main.scss'; - -/** - @TODO add masonry layout - https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/ - */ - -.objects { - display: grid; - width: 100%; - grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); - grid-auto-rows: auto; - gap: 10px; -} - -.objects img { - width: 100%; - height: auto; - cursor: pointer; - border: 2px solid transparent; - transition: border 0.3s ease; -} - -.objects img.selected { - border: 2px solid $red; -} -</style> +</script> \ No newline at end of file