Fix z-indexu pro navigaci, pridani prostoru do verejne casti detialu letu

This commit is contained in:
Michal Kváček
2024-06-25 22:27:23 +02:00
parent 25b1735c87
commit 16650cc0cb
3 changed files with 17 additions and 8 deletions
+6 -2
View File
@@ -121,7 +121,7 @@ const handleMarkerMove = async (idx, event) => {
<template v-if="displayTrackAids"> <template v-if="displayTrackAids">
<template v-for="marker in trackAids" :key="marker"> <template v-for="marker in trackAids" :key="marker">
<CustomMarker :options="marker"> <CustomMarker :options="marker" class="track-info-marker">
<div class="track-info" :style='`transform: rotate(${marker.bearing}deg)`'> <div class="track-info" :style='`transform: rotate(${marker.bearing}deg)`'>
{{ marker.bearing }}&deg; <br> {{ marker.bearing }}&deg; <br>
{{ getDuration(marker.distance, flightPlan.plannedSpeed) }}' {{ getDuration(marker.distance, flightPlan.plannedSpeed) }}'
@@ -136,7 +136,7 @@ const handleMarkerMove = async (idx, event) => {
</MapWrapper> </MapWrapper>
</template> </template>
<style scoped> <style>
.track-info { .track-info {
background: rgba(128, 128, 128, 0.5); background: rgba(128, 128, 128, 0.5);
color: white; color: white;
@@ -147,4 +147,8 @@ const handleMarkerMove = async (idx, event) => {
font-weight: bold; font-weight: bold;
transform-origin: 50% 50%; transform-origin: 50% 50%;
} }
.track-info-marker {
z-index: 999;
}
</style> </style>
@@ -19,10 +19,8 @@ const props = defineProps({
}); });
const emits = defineEmits(["open", "change-insert-position", "fullscreen-toggle"]) const emits = defineEmits(["open", "change-insert-position", "fullscreen-toggle"])
const {getDuration, getTotalDistance, getTotalDuration} = useFlightPlanCalculations(); const {getDuration, getTotalDistance, getTotalDuration} = useFlightPlanCalculations();
const totalDistance = computed(() => getTotalDistance(props.flightPlan)); const totalDistance = computed(() => getTotalDistance(props.flightPlan));
</script> </script>
<template> <template>
@@ -69,9 +67,6 @@ const totalDistance = computed(() => getTotalDistance(props.flightPlan));
:color="insertPosition === i+1 ? 'primary' : 'grey'" :color="insertPosition === i+1 ? 'primary' : 'grey'"
/> />
</q-item-label> </q-item-label>
<q-item-label>
</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
@@ -24,6 +24,8 @@ import ContentCard from "components/ContentCard.vue";
import {usePhotosStore} from "stores/Photos"; import {usePhotosStore} from "stores/Photos";
import {computed, onMounted} from "vue"; import {computed, onMounted} from "vue";
import {publicFlightBreadcrumbs} from "src/composables/breadcrumbs"; import {publicFlightBreadcrumbs} from "src/composables/breadcrumbs";
import {useAirspacesStore} from "stores/Airspaces";
import {useAirportsStore} from "stores/Airports";
const {isQueryRunning, flight} = storeToRefs(useFlightsStore()); const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
@@ -36,8 +38,13 @@ const props = defineProps({
onMounted(() => { onMounted(() => {
usePhotosStore().fetchPublic({flightId: flight.value.id}); usePhotosStore().fetchPublic({flightId: flight.value.id});
useAirspacesStore().fetch();
useAirportsStore().fetch();
}) })
const {isQueryRunning: arePhotosLoading, photos: flightPhotos} = storeToRefs(usePhotosStore()); const {isQueryRunning: arePhotosLoading, photos: flightPhotos} = storeToRefs(usePhotosStore());
const {airspaces} = storeToRefs(useAirspacesStore());
const {airports} = storeToRefs(useAirportsStore());
const flightNameFormatted = flightName(flight.value); const flightNameFormatted = flightName(flight.value);
const event = computed(() => flight.value.event); const event = computed(() => flight.value.event);
@@ -80,8 +87,11 @@ useMeta(() => metaData({
<q-inner-loading v-if="arePhotosLoading"/> <q-inner-loading v-if="arePhotosLoading"/>
<PhotoGallery :photos="flightPhotos" v-else-if="!arePhotosLoading && flightPhotos.length > 0"/> <PhotoGallery :photos="flightPhotos" v-else-if="!arePhotosLoading && flightPhotos.length > 0"/>
<FlightTrackMap <FlightTrackMap
:key="flight.id" :airspaces-data="airspaces"
:airports="airports"
:key="flight.id"
:flight="flight" :flight="flight"
:show-info-window="true"
:showLayerControls="false" :showLayerControls="false"
:photos="flightPhotos"/> :photos="flightPhotos"/>
</q-no-ssr> </q-no-ssr>