Upravy UI, refaktoring, davkove upravy a mazani fotek

src/components/photos/PhotoDetail.vue

@@ -3,6 +3,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'
+import {useQuasar} from "quasar";
 
 const props = defineProps({
   photos: {
@@ -50,68 +51,91 @@ const prevPhoto = () => {
 }
 
 const showExtra = ref(false);
+
+const $q = useQuasar();
+const isMaximized = computed(() => $q.screen.width <= $q.screen.sizes.md);
+const imageFullscreen = ref(false);
 </script>
 
 <template>
   <q-dialog
-    v-model="open"
-    full-width
+      v-model="open"
+      full-width
+      :maximized="isMaximized"
   >
     <q-card
-      v-touch-swipe.mouse.left="prevPhoto"
-      v-touch-swipe.mouse.right="nextPhoto"
-      @keyup.left="prevPhoto"
-      @keyup.right="nextPhoto"
+        v-touch-swipe.mouse.left="prevPhoto"
+        v-touch-swipe.mouse.right="nextPhoto"
+        @keyup.left="prevPhoto"
+        @keyup.right="nextPhoto"
     >
-      <q-card-section>
-        <div class="relative-position">
+      <q-card-section class="bg-black text-white" v-if="isMaximized">
+        <div class="row">
+          <div class="col">
+            <strong v-if="photo.name !== ''">{{ photo.name }}</strong>
+          </div>
+          <div class="col text-right">
+            <q-btn round text-color="white" size="sm" icon="close" @click="open = false"/>
+          </div>
+        </div>
+
+      </q-card-section>
+
+      <q-card-section :class="{'q-pa-none': isMaximized}">
+        <div :class="{'relative-position': true, 'image-full-height': imageFullscreen}">
           <div class="text-center">
-            <inner-image-zoom move-type="pan" :zoomScale="0.75" :hide-hint="true" :src="photo.url"/>
+            <inner-image-zoom
+                move-type="pan"
+                :zoomScale="0.75"
+                :hide-hint="true"
+                :after-zoom-in="() => imageFullscreen = true"
+                :after-zoom-out="() => imageFullscreen = false"
+                :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"
+              class="absolute all-pointer-events"
+              round
+              flat
+              icon="info"
+              :text-color="showExtra ? 'primary' : 'white'"
+              style="background: rgba(0, 0, 0, 0.25); bottom: 16px; left: 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
+              class="absolute all-pointer-events"
+              style="background: rgba(0, 0, 0, 0.25); top: 50%; left: 8px;"
+              @click="prevPhoto"
+              v-if="photoIndex > 0 && !isMaximized"
+              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
+              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 && !isMaximized"
+              icon-right="chevron_right"
+              text-color="white"
+              flat
+              rounded
           >
           </q-btn>
-          <strong v-if="photo.name !== ''">{{ photo.name }}</strong>
+          <strong v-if="photo.name !== '' && !isMaximized">{{ photo.name }}</strong>
           <p v-if="photo.description !== ''">{{ photo.description }}</p>
         </div>
 
         <div class="row">
-
           <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"
+                v-if="photo.gpsLatitude && photo.gpsLongitude"
+                class="q-mx-sm"
+                :gps-latitude="photo.gpsLatitude"
+                :gps-longitude="photo.gpsLongitude"
             />
 
             <q-list dense>
@@ -153,8 +177,20 @@ const showExtra = ref(false);
   width: 100%;
 }
 
+.image-full-height .iiz {
+  height: calc(95vh - 65px) !important;
+}
+
 .iiz__img {
   max-height: 90vh !important;
   margin: 0 auto;
 }
+
+.iiz__img--hidden {
+  height: 100vh;
+}
+
+.iiz__zoom-img--visible {
+//height: 125vh !important
+}
 </style>