From 726967e8da27039a38fa3d7636d99ba6d183ead5 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Thu, 4 Jul 2024 22:20:33 +0200
Subject: [PATCH] Added masonry layout for object imgs

---
 .../utilities/zoneEditor/Objects.vue          | 56 +++++--------------
 1 file changed, 15 insertions(+), 41 deletions(-)

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