Bugfixing infinite scrollu u seznamu letu, novy vzhled detailu letu

src/pages/public/pilotProfile/FlightDetailPage.vue

@@ -35,6 +35,8 @@ import {useAirportsStore} from "stores/Airports";
 import {useFlightPlansStore} from "stores/FlightPlans";
 import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
 import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
+import BreadcrumbsNavigation from "components/navigation/BreadcrumbsNavigation.vue";
+import {publicFlightBreadcrumbs} from "src/composables/breadcrumbs";
 
 const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
 
@@ -58,7 +60,9 @@ const flightNameFormatted = flightName(flight.value);
 const event = computed(() => flight.value.event);
 
 useAppStore().setPageTitle(flightNameFormatted);
-useAppStore().setBreadcrumbs([])//publicFlightBreadcrumbs(pilot.value, flight.value, event.value, false));
+useAppStore().setBreadcrumbs(publicFlightBreadcrumbs(pilot.value, flight.value, event.value, false));
+const {breadcrumbs} = storeToRefs(useAppStore());
+
 
 useMeta(() => metaData({
     title: `${flightNameFormatted} - ${pilot.value.name}`,
@@ -74,62 +78,58 @@ useMeta(() => metaData({
 ));
 
 
-const contentTabs = ref()
+const titleImageBottomAnchor = ref()
 const scrollToContent = () => {
-  contentTabs.value.$el.scrollIntoView({behavior: "smooth"});
+  console.log(titleImageBottomAnchor.value)
+  if (!titleImageBottomAnchor.value) {
+    console.log("nemam anchor")
+    return
+  }
+
+  titleImageBottomAnchor.value.scrollIntoView({behavior: "smooth"});
 }
 
 const tab = ref("photos")
 </script>
 
 <template>
-  <q-img :src="flight.titlePhoto.url" style="height: 85vh" fit="cover">
-    <div class="absolute-full flex flex-center text-center">
-      <div>
-        <h2 class="text-h4">{{ flight.name }}</h2>
-
-        <div class="q-my-lg">
-          {{ formatDatetime(flight.takeoffDatetime, FORMAT_DATE) }}
-        </div>
-
+  <q-img :src="flight.titlePhoto.url" style="height: 100vh" fit="cover">
+    <div class="absolute-full">
+      <div style="height: 20vh; opacity: 0.4">
+        <BreadcrumbsNavigation :items="breadcrumbs || []"/>
+      </div>
+      <div class="flex flex-center text-center">
         <div>
-        <span v-for="(turnPoint, i) in flight.turnPoints">
-          {{ turnPoint.pointOfInterest.name }}
-          <span v-if="i < Object.keys(flight.turnPoints).length - 1" class="q-mx-md"> &bull;</span>
-        </span>
-        </div>
-
-        <div v-if="flight.description !== ''">
-          {{ flight.description }}
-        </div>
-
-        <div>
-          <q-btn dense text icon="arrow_downward" size="lg" class="q-my-lg" @click="scrollToContent">Detail letu</q-btn>
-        </div>
-
-        <div class="absolute-bottom-right">
-          <q-btn class="q-ma-md" :to="{name: 'publicProfileDetail', params: {username: pilot.publicUsername}}">
-            <AvatarFromPhoto :size="32" class="q-mr-sm" :src="pilot.avatarImageUrl"/>
-            {{ pilot.name }}
-          </q-btn>
+          <FlightHeaderInfo :pilot="pilot" :flight="flight">
+            <div class="absolute-bottom">
+            <div class="row">
+              <div class="offset-2 col-grow">
+                <q-tabs
+                  v-model="tab"
+                >
+                  <q-tab @click="scrollToContent" class="q-px-xl" :ripple="false" name="photos" icon="image" label="Fotky" v-if="flightPhotos.length > 0"/>
+                  <q-tab @click="scrollToContent" class="q-px-xl" :ripple="false" name="info" icon="alarm" label="Info"/>
+                  <q-tab @click="scrollToContent" class="q-px-xl" :ripple="false" name="track" icon="route" label="Trasa" v-if="flightPlan || flight.track"/>
+                </q-tabs>
+              </div>
+              <div class="col-2">
+                <q-btn class="q-ma-md" :to="{name: 'publicFlightDetail', params: {username: pilot.publicUsername}}">
+                  <AvatarFromPhoto :size="32" class="q-mr-sm" :src="pilot.avatarImageUrl"/>
+                  {{ pilot.name }}
+                </q-btn>
+              </div>
+            </div>
+          </div>
+          </FlightHeaderInfo>
         </div>
       </div>
+
+      <div class="absolute-bottom" ref="titleImageBottomAnchor"></div>
     </div>
 
   </q-img>
 
 
-  <q-tabs
-    ref="contentTabs"
-    v-model="tab"
-    align="justify"
-    class="q-mt-md"
-  >
-    <q-tab :ripple="false" name="photos" icon="image" label="Fotky" v-if="flightPhotos.length > 0"/>
-    <q-tab :ripple="false" name="info" icon="alarm" label="Info"/>
-    <q-tab :ripple="false" name="track" icon="route" label="Trasa" v-if="flightPlan || flight.track"/>
-  </q-tabs>
-
   <q-tab-panels v-model="tab" style="min-height: 80vh">
     <q-tab-panel name="photos">
       <q-inner-loading v-if="arePhotosLoading"/>