Docasne vypnuti intersection observeru u fotek - nefunguje pak proklik na titulni fotku

src/components/flights/FlightBasicInfo.vue

@@ -150,7 +150,7 @@ const props = defineProps({
         <q-item v-for="copilot in flight.copilots" :key="copilot.id">
           <q-item-section avatar>
             <q-icon name="people"/>
-          </q-item-section>3
+          </q-item-section>
           <q-item-section>
             <template v-if="copilot.isPublic">
               <div>
@@ -159,23 +159,24 @@ const props = defineProps({
                 >
                   {{ copilot.name }}
                 </router-link>
-
+              </div>
-                <CopyLinkButton
+            </template>
-                  :route='{
+            <template v-else> {{ copilot.name }}</template>
+          </q-item-section>
+          <q-item-section>
+            <CopyLinkButton
+              v-if="loggedUser && copilot.token && copilot.isPublic"
+              :route='{
                   name: "publicCopilotUploadPhoto",
                   params: {flightSlug: flight.urlSlug, username: loggedUser.publicUsername},
                   query: {token: copilot.token}
                 }'
-                  icon="cloud_upload"
+              icon="cloud_upload"
-                  title="Získat odkaz na nahrání fotek od kopilota"
+              title="Získat odkaz na nahrání fotek od kopilota"
-                  label=""
+              label=""
-                  round
+              round
-                  class="q-mx-3"
+              class="q-mx-3"
-                  v-if="loggedUser && copilot.token"
+            />
-                />
-              </div>
-            </template>
-            <template v-else> {{ copilot.name }}</template>
           </q-item-section>
         </q-item>
       </q-list>

src/components/photos/PhotoGallery.vue

@@ -76,32 +76,48 @@ watch(() => [openedPhoto.value, $lightbox.value], () => {
     $lightbox.value.loadAndOpen(idx);
     usePhotosStore().setOpenedPhoto(null);
   }
-}, {immediate: true})
+}, {immediate: true});
+
+const isCollapsed = ref(false);
 </script>
 
 <template>
-  <div :id="galleryId" class="row">
+  <div :id="galleryId" :class="{row: true, collapsed: isCollapsed}">
-    <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">
+    <div
-        <a
+      v-for="photo in photos" :key="photo.id"
-          :href="photo.url"
+      style="min-height: 100px"
-          :data-pswp-width="photo.width"
+      class="col-6 col-sm-4 col-md-4 col-lg-3 q-pa-sm"
-          :data-pswp-height="photo.height"
+    >
-          target="_blank"
+      <a
-          rel="noreferrer"
+        :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-img
+          <div class="absolute-bottom" v-if="photo.name !== ''">
-            spinner-color="primary"
+            {{ photo.name }}
-            class="rounded-borders"
+          </div>
-            :src="photo.thumbnailUrl"
+        </q-img>
-            alt=""
+        <PhotoCaption :photo="photo"/>
-          >
+      </a>
-            <div class="absolute-bottom" v-if="photo.name !== ''">
+    </div>
-              {{ photo.name }}
-            </div>
-          </q-img>
-          <PhotoCaption :photo="photo"/>
-        </a>
-    </q-intersection>
-
   </div>
+
+  <!--      <q-btn @click="isCollapsed=!isCollapsed">{{isCollapsed ? 'Sbalit' : "Rozbalit"}}</q-btn>-->
+
+
 </template>
+
+<style>
+.collapsed {
+  max-height: 50px;
+  overflow: hidden
+}
+</style>