Pridan intersection na galeriii a mapu -> zrychleni

2024-03-07 07:08:03 +01:00
parent cd9c7351e9
commit 415ff15ab9
3 changed files with 34 additions and 31 deletions
@@ -81,26 +81,27 @@ watch(() => [openedPhoto.value, $lightbox.value], () => {

 <template>
  <div :id="galleryId" class="row">
-    <div class="col-6 col-sm-4 col-md-4 col-lg-3 q-pa-sm" v-for="photo in photos" :key="photo.id">
-      <a
-        :href="photo.url"
-        :data-pswp-width="photo.width"
-        :data-pswp-height="photo.height"
-        target="_blank"
-        rel="noreferrer"
-      >
-        <q-img
-          spinner-color="primary"
-          class="rounded-borders"
-          :src="photo.thumbnailUrl"
-          alt=""
+    <q-intersection v-for="photo in photos" :key="photo.id" class="col-6 col-sm-4 col-md-4 col-lg-3 q-pa-sm">
+        <a
+          :href="photo.url"
+          :data-pswp-width="photo.width"
+          :data-pswp-height="photo.height"
+          target="_blank"
+          rel="noreferrer"
        >
-          <div class="absolute-bottom" v-if="photo.name !== ''">
-            {{ photo.name }}
-          </div>
-        </q-img>
-        <PhotoCaption :photo="photo"/>
-      </a>
-    </div>
+          <q-img
+            spinner-color="primary"
+            class="rounded-borders"
+            :src="photo.thumbnailUrl"
+            alt=""
+          >
+            <div class="absolute-bottom" v-if="photo.name !== ''">
+              {{ photo.name }}
+            </div>
+          </q-img>
+          <PhotoCaption :photo="photo"/>
+        </a>
+    </q-intersection>
+
  </div>
 </template>