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

Fotogalerie se zoomem, uprava verejnych avataru

Browse Source
This commit is contained in:
Michal Kváček
2023-08-10 00:44:17 +02:00
parent 3e33187ba5
commit 85bec30ca9
17 changed files with 466 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/photos/PhotoDetail.vue
+47 -37
View File
@@ -2,6 +2,7 @@
import EmbeddedMap from "components/map/EmbeddedMap.vue";
import {computed, onMounted, ref} from "vue";
import {formatDatetime} from "src/composables/datetimeUtils";
import 'vue-inner-image-zoom/lib/vue-inner-image-zoom.css'
const props = defineProps({
photos: {
@@ -65,44 +66,41 @@ const showExtra = ref(false);
<q-card-section>
<div class="row">
<div class="col-12">
<q-img
:draggable="false"
style="max-height: 90vh"
fit="contain"
:src="photo.url"
<div class="text-center">
<inner-image-zoom move-type="pan" :zoomScale="0.75" :hide-hint="true" :src="photo.url"/>
</div>
<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
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>
</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>
<strong v-if="photo.name !== ''">{{ photo.name }}</strong>
<p v-if="photo.description !== ''">{{ photo.description }}</p>
</div>
@@ -148,3 +146,15 @@ const showExtra = ref(false);
</q-card>
</q-dialog>
</template>
<style>
.iiz {
width: 100%;
height: 90vh;
}
.iiz__img {
max-height: 90vh !important;
margin: 0 auto;
}
</style>