From 722e832f1d72b8392fc40b86242923b8b338fbc2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Kv=C3=A1=C4=8Dek?= <michal.kvacek@performax.cz>
Date: Thu, 7 Mar 2024 10:13:31 +0100
Subject: [PATCH] Docasne vypnuti intersection observeru u fotek - nefunguje
 pak proklik na titulni fotku

---
 src/components/flights/FlightBasicInfo.vue | 29 +++++-----
 src/components/photos/PhotoGallery.vue     | 62 ++++++++++++++--------
 2 files changed, 54 insertions(+), 37 deletions(-)

diff --git a/src/components/flights/FlightBasicInfo.vue b/src/components/flights/FlightBasicInfo.vue
index 2cb9a7d..b557430 100644
--- a/src/components/flights/FlightBasicInfo.vue
+++ b/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>
-
-                <CopyLinkButton
-                  :route='{
+              </div>
+            </template>
+            <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"
-                  title="Získat odkaz na nahrání fotek od kopilota"
-                  label=""
-                  round
-                  class="q-mx-3"
-                  v-if="loggedUser && copilot.token"
-                />
-              </div>
-            </template>
-            <template v-else> {{ copilot.name }}</template>
+              icon="cloud_upload"
+              title="Získat odkaz na nahrání fotek od kopilota"
+              label=""
+              round
+              class="q-mx-3"
+            />
           </q-item-section>
         </q-item>
       </q-list>
diff --git a/src/components/photos/PhotoGallery.vue b/src/components/photos/PhotoGallery.vue
index 527801b..49d12c5 100644
--- a/src/components/photos/PhotoGallery.vue
+++ b/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">
-    <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 :id="galleryId" :class="{row: true, collapsed: isCollapsed}">
+    <div
+      v-for="photo in photos" :key="photo.id"
+      style="min-height: 100px"
+      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"
+      >
+        <q-img
+          spinner-color="primary"
+          class="rounded-borders"
+          :src="photo.thumbnailUrl"
+          alt=""
         >
-          <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 class="absolute-bottom" v-if="photo.name !== ''">
+            {{ photo.name }}
+          </div>
+        </q-img>
+        <PhotoCaption :photo="photo"/>
+      </a>
+    </div>
   </div>
+
+  <!--      <q-btn @click="isCollapsed=!isCollapsed">{{isCollapsed ? 'Sbalit' : "Rozbalit"}}</q-btn>-->
+
+
 </template>
+
+<style>
+.collapsed {
+  max-height: 50px;
+  overflow: hidden
+}
+</style>