poletani.cz/app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Prvni naznak verejne casti, sprava profilu

Browse Source
This commit is contained in:
Michal Kváček
2023-08-09 00:26:59 +02:00
parent c4603cf090
commit 25250ae00e
31 changed files with 6505 additions and 786 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/photos/PhotoDetail.vue
+59 -14
View File
@@ -48,29 +48,74 @@ const prevPhoto = () => {
if (photoIndex.value > 0) photoIndex.value--;
}
const showExtra = ref(false);
</script>
<template>
<q-dialog v-model="open" full-width @keyup.left="prevPhoto" @keyup.right="nextPhoto">
<q-card>
<q-dialog
v-model="open"
full-width
>
<q-card
v-touch-swipe.mouse.left="prevPhoto"
v-touch-swipe.mouse.right="nextPhoto"
@keyup.left="prevPhoto"
@keyup.right="nextPhoto"
>
<q-card-section>
<div class="row">
<div class="col-12 col-sm-12 col-md-9">
<q-img :src="photo.url"/>
<div class="col-12">
<q-img
:draggable="false"
style="max-height: 90vh"
fit="contain"
:src="photo.url"
>
<q-btn
class="absolute all-pointer-events"
round
flat
icon="info"
:text-color="showExtra ? 'primary' : 'white'"
style="background: rgba(0, 0, 0, 0.25); top: 8px; right: 8px"
@click="showExtra = !showExtra"
/>
<q-btn
class="absolute all-pointer-events"
style="background: rgba(0, 0, 0, 0.25); top: 50%; left: 8px;"
@click="prevPhoto"
v-if="photoIndex > 0"
icon="chevron_left"
text-color="white"
flat
rounded
>
</q-btn>
<q-btn
class="absolute all-pointer-events"
style="background: rgba(0, 0, 0, 0.25); top: 50%; right: 8px;"
@click="nextPhoto"
v-if="photoIndex < photos.length - 1"
icon-right="chevron_right"
text-color="white"
flat
rounded
>
</q-btn>
</q-img>
<strong v-if="photo.name !== ''">{{ photo.name }}</strong>
<p v-if="photo.description !== ''">{{ photo.description }}</p>
<div class="text-center q-my-sm">
<q-btn @click="prevPhoto" v-if="photoIndex > 0" icon="chevron_left" flat rounded>Předchozí</q-btn>
<q-btn @click="nextPhoto" v-if="photoIndex < photos.length - 1" icon-right="chevron_right" flat rounded>Další</q-btn>
</div>
</div>
<div class="col-12 col-sm-12 col-md-3">
<EmbeddedMap class="q-mx-sm" v-if="photo.gpsLatitude && photo.gpsLongitude" :gps-latitude="photo.gpsLatitude" :gps-longitude="photo.gpsLongitude"/>
<q-list>
<div class="col-12 q-my-md" v-if="showExtra">
<EmbeddedMap
v-if="photo.gpsLatitude && photo.gpsLongitude"
class="q-mx-sm"
:gps-latitude="photo.gpsLatitude"
:gps-longitude="photo.gpsLongitude"
/>
<q-list dense>
<q-item v-if="photo.pointOfInterest">
<q-item-section avatar>
<q-avatar icon="marker"></q-avatar>