Fotogalerie se zoomem, uprava verejnych avataru

src/pages/profile/ProfilePage.vue

@@ -1,6 +1,6 @@
 <script setup>
 import {useUserStore} from "stores/User";
-import ProfileForm from "components/profile/ProfileForm.vue";
+import ProfileImagesForm from "components/profile/ProfileForm.vue";
 import {useAppStore} from "stores/App";
 import {storeToRefs} from "pinia";
 import {useQuasar} from "quasar";
@@ -23,14 +23,14 @@ const openedTab = ref("profile");
 
 <template>
   <q-tabs class="q-my-lg" v-model="openedTab">
-    <q-tab name="profile">Profil</q-tab>
+    <q-tab name="profile">Profilové fotky</q-tab>
     <q-tab name="changePassword">Změna hesla</q-tab>
     <q-tab name="publicProfile">Veřejný profil</q-tab>
   </q-tabs>
 
   <q-tab-panels v-model="openedTab">
     <q-tab-panel name="profile">
-      <ProfileForm :user="loggedUser" @save="handleSave"/>
+      <ProfileImagesForm :user="loggedUser" @save="handleSave"/>
     </q-tab-panel>
 
     <q-tab-panel name="changePassword">

src/pages/public/FlightDetailPage.vue

@@ -27,24 +27,29 @@ watch(flight, (newVal) => {
 
 <template>
 
-  <FlightDetailSkeleton v-if="loading || !flight"/>
+  <div>
+    <FlightDetailSkeleton v-if="loading || !flight"/>
 
-  <template v-else>
-
-    <q-banner class="bg-warning text-white q-mx-md q-my-md" v-if="!flight.isPublic">
-      Pozor! Tento let není publikován a nebude tak dostupný pro ostatní!
-    </q-banner>
+    <template v-else>
+      <q-banner class="bg-warning text-white q-mx-md q-my-md" v-if="!flight.isPublic">
+        Pozor! Tento let není publikován a nebude tak dostupný pro ostatní!
+      </q-banner>
 
 
-    <q-card class="q-mx-md q-my-md flight-detail-card">
-      <PhotoCarousel :cover-photo-url="flight.coverPhoto.url" :photos="flight.photos"/>
-      <q-card-section>
-        <FlightBasicInfo :flight="flight"/>
+      <q-card class="q-mx-md q-my-md flight-detail-card">
+        <PhotoCarousel
+          v-if="flight.coverPhoto"
+          :cover-photo-url="flight.coverPhoto.url"
+          :photos="flight.photos"
+        />
+        <q-card-section>
+          <FlightBasicInfo :flight="flight"/>
 
-        <article class="q-my-lg" v-html="flight.description"/>
+          <article class="q-my-lg" v-html="flight.description"/>
 
-        <FlightTrackMap :flight="flight"/>
-      </q-card-section>
-    </q-card>
-  </template>
+          <FlightTrackMap :flight="flight"/>
+        </q-card-section>
+      </q-card>
+    </template>
+  </div>
 </template>

src/pages/public/PilotProfilePage.vue

@@ -8,6 +8,7 @@ import {useFlightsStore} from "stores/Flights";
 import {storeToRefs} from "pinia";
 import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
 import FlightsList from "components/flights/FlightsList.vue";
+import AvatarFromPhoto from "components/AvatarFromPhoto.vue";
 
 const props = defineProps({
   loggedUser: {
@@ -55,9 +56,7 @@ const flights = storeToRefs(useFlightsStore()).items;
     </div>
     <div class="col-4 sm-hide">
       <div class="text-center">
-        <q-avatar size="150px">
-          <img :src="pilot.avatarImageUrl" alt="">
-        </q-avatar>
+        <AvatarFromPhoto :size="150" :src="pilot.avatarImageUrl"/>
       </div>
 
       <h3>{{ pilot.name }}</h3>