diff --git a/src/components/flights/PhotoCarousel.vue b/src/components/flights/PhotoCarousel.vue index 5c22461..16c01d6 100644 --- a/src/components/flights/PhotoCarousel.vue +++ b/src/components/flights/PhotoCarousel.vue @@ -10,6 +10,10 @@ const props = defineProps({ coverPhotoUrl: { type: String, required: false + }, + defaultTitle: { + type: String, + required: false } }) @@ -36,6 +40,7 @@ watch(() => props.photos, (newVal) => { swipeable height="auto" infinite + v-bind="$attrs" > @@ -45,6 +50,7 @@ watch(() => props.photos, (newVal) => { import EmbeddedMap from "components/map/EmbeddedMap.vue"; -import {computed, onMounted, ref} from "vue"; +import {computed, onMounted, ref, watch} from "vue"; import {formatDatetime} from "src/composables/datetimeUtils"; import 'vue-inner-image-zoom/lib/vue-inner-image-zoom.css' import {useQuasar} from "quasar"; @@ -19,6 +19,10 @@ const props = defineProps({ type: Boolean, required: false, default: false + }, + defaultTitle: { + type: String, + required: false } }); @@ -53,10 +57,24 @@ const prevPhoto = () => { if (photoIndex.value > 0) photoIndex.value--; } +const showDetail = (idx) => { + photoIndex.value = idx; +} + +const thumbnailsRef = ref(null); +watch(photoIndex, (newVal) => { + if (!thumbnailsRef.value) return; + const thumbnailWidth = 200; + const thumbnailBarWidth = thumbnailsRef.value.$el.clientWidth; + const thumbnailPosition = newVal * thumbnailWidth; + const scrollTo = Math.max(0, thumbnailPosition - thumbnailBarWidth/2); + thumbnailsRef.value.setScrollPosition("horizontal", scrollTo, 500) +}); + const showExtra = ref(false); const $q = useQuasar(); -const isMaximized = computed(() => $q.screen.width <= $q.screen.sizes.md); +const isMaximized = computed(() => $q.screen.width <= $q.screen.sizes.sm); const imageFullscreen = ref(false); @@ -75,7 +93,7 @@ const imageFullscreen = ref(false);
- {{ photo.name }} + {{ photo.name || defaultTitle }}
@@ -88,8 +106,8 @@ const imageFullscreen = ref(false);
- - - - - - {{ photo.name }} -

{{ photo.description }}

+
+ +
+ +
+
+
+ {{ photo.name }} +

{{ photo.description }}

+ diff --git a/src/layouts/PublicLayout.vue b/src/layouts/PublicLayout.vue index 020dabd..c68d1b6 100644 --- a/src/layouts/PublicLayout.vue +++ b/src/layouts/PublicLayout.vue @@ -46,11 +46,11 @@ useMeta(() => ({ title: pageTitle.value !== '' ? `${pageTitle.value} - Polétání.cz` : 'Polétání.cz' })); -onMounted(() => { - if (loggedUser || useUserStore().hasAccessToken()) { - // poll once per 5 minutes to keep access token active - setInterval(useUserStore().fetchLoggedUserDetail, 5*60*1000); - } -}) +// onMounted(() => { +// if (loggedUser || useUserStore().hasAccessToken()) { +// // poll once per 5 minutes to keep access token active +// setInterval(useUserStore().fetchLoggedUserDetail, 5*60*1000); +// } +// }) diff --git a/src/pages/public/FlightDetailPage.vue b/src/pages/public/FlightDetailPage.vue index 8402e91..b6e8e1c 100644 --- a/src/pages/public/FlightDetailPage.vue +++ b/src/pages/public/FlightDetailPage.vue @@ -40,6 +40,7 @@ watch(flight, (newVal) => {