imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

Added masonry layout for object imgs

Browse Source
This commit is contained in:
Dennis Postma 2024-07-04 22:20:33 +02:00
parent b3bf1861c4
commit 726967e8da
1 changed files with 15 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/utilities/zoneEditor/Objects.vue
View File

@ -2,19 +2,22 @@
<Teleport to="body"> <Teleport to="body">
<Modal v-if="isModalOpen" @modal:close="() => zoneEditorStore.setTool('move')" :isModalOpen="true" :modal-width="645" :modal-height="260"> <Modal v-if="isModalOpen" @modal:close="() => zoneEditorStore.setTool('move')" :isModalOpen="true" :modal-width="645" :modal-height="260">
<template #modalHeader> <template #modalHeader>
<h3 class="modal-title">Objects</h3> <h3 class="text-lg">Objects</h3>
</template> </template>
<template #modalBody> <template #modalBody>
<div class="container objects"> <div class="container mx-auto">
<div class="objects"> <div class="columns-2 sm:columns-3 md:columns-4 lg:columns-5 gap-4">
<img <div v-for="(object, index) in objects" :key="index" class="mb-4">
v-for="(object, index) in objects" <img
:key="index" :src="`${config.server_endpoint}/assets/objects/${object.id}.png`"
:src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object"
alt="Object" @click="zoneEditorStore.setSelectedObject(object.id)"
@click="zoneEditorStore.setSelectedObject(object.id)" :class="{
:class="{ selected: zoneEditorStore.selectedObject && zoneEditorStore.selectedObject === object.id }" '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>
</div> </div>
</template> </template>
@ -42,32 +45,3 @@ onMounted(async () => {
}) })
}) })
</script> </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>