Image fullscreen mode

src/components/commons/AudioPlayer.vue

@@ -100,7 +100,7 @@
                 width: size + 'px',
                 height: size + 'px',
             }"
-            @click="toggleAudio"
+            @click.stop="toggleAudio"
             data-testid="Toggle to play animal sound"
         >
             <i

src/components/commons/FullScreenImage.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+    import { Media } from '@/lib/models';
+    import { ref } from 'vue';
+
+    const props = defineProps<{
+        media: Media;
+        alt?: string;
+        ariaLabel?: string;
+        testID?: string;
+    }>();
+
+    const isFullscreen = ref(false);
+
+    function open() {
+        isFullscreen.value = true;
+    }
+
+    function close() {
+        isFullscreen.value = false;
+    }
+
+    defineExpose({ open });
+</script>
+
+<template>
+    <div @click="open">
+        <slot></slot>
+    </div>
+
+    <Transition name="fullscreen">
+        <div
+            v-if="isFullscreen"
+            class="fullScreenContainer"
+            @click.stop="close"
+        >
+            <button
+                class="close-button"
+                @click.stop="close"
+                aria-label="Close fullscreen"
+            >
+                <i class="bi bi-x-lg"></i>
+            </button>
+            <img
+                :src="media.url"
+                :alt="props.alt"
+                :aria-label="props.ariaLabel"
+                :data-testid="testID"
+                class="fullscreenImage"
+            />
+
+            <Credits
+                v-if="media.url"
+                :media="media"
+                link-color="link-light"
+            ></Credits>
+        </div>
+    </Transition>
+</template>
+
+<style scoped>
+    .close-button {
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+        font-size: 2rem;
+        color: #fff;
+        background-color: transparent;
+        border: none;
+        cursor: pointer;
+        z-index: 1001;
+    }
+
+    .close-button:hover {
+        opacity: 0.8;
+    }
+
+    .fullScreenContainer {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background-color: rgba(0, 0, 0, 0.5);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        padding: 1em;
+        z-index: 1000;
+        backdrop-filter: blur(8px);
+        -webkit-backdrop-filter: blur(8px);
+    }
+
+    .fullscreenImage {
+        max-width: 100%;
+        max-height: 100%;
+        width: auto;
+        height: auto;
+        object-fit: contain;
+        border-radius: 10px;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    }
+
+    /* Transitions for fullscreen */
+    .fullscreen-enter-active,
+    .fullscreen-leave-active {
+        transition:
+            opacity 0.3s ease,
+            backdrop-filter 0.3s ease;
+    }
+
+    .fullscreen-enter-active .fullscreenImage,
+    .fullscreen-leave-active .fullscreenImage {
+        transition:
+            transform 0.3s ease,
+            opacity 0.3s ease;
+    }
+
+    .fullscreen-enter-from,
+    .fullscreen-leave-to {
+        opacity: 0;
+        backdrop-filter: blur(0px);
+        -webkit-backdrop-filter: blur(0px);
+    }
+
+    .fullscreen-enter-from .fullscreenImage,
+    .fullscreen-leave-to .fullscreenImage {
+        transform: scale(0.8);
+        opacity: 0;
+    }
+
+    .fullscreen-enter-to,
+    .fullscreen-leave-from {
+        opacity: 1;
+    }
+
+    .fullscreen-enter-to .fullscreenImage,
+    .fullscreen-leave-from .fullscreenImage {
+        transform: scale(1);
+        opacity: 1;
+    }
+</style>

src/components/commons/Image.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
     import { ref, watch, onMounted } from 'vue';
     import { NO_IMAGE_URL } from '@/assets/constant';
+    import FullscreenImage from './FullScreenImage.vue';
 
     const props = defineProps({
         imageUrl: {
@@ -54,7 +55,7 @@
             :alt="alt"
             :aria-label="ariaLabel"
             :data-testid="props?.testID"
-            :class="imageLoaded ? 'loaded' : ''"
+            :class="{ loaded: imageLoaded }"
         />
     </div>
 </template>

src/components/commons/Popover.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+    import { ref, onMounted, onUnmounted } from 'vue';
+
+    const props = withDefaults(
+        defineProps<{
+            click?: boolean;
+            closeOnHide?: boolean;
+            delay?: { show: number; hide: number };
+        }>(),
+        {
+            click: true,
+            closeOnHide: true,
+            delay: () => ({ show: 0, hide: 0 }),
+        }
+    );
+
+    const isOpen = ref(false);
+    const popoverRef = ref<HTMLElement | null>(null);
+    const targetRef = ref<HTMLElement | null>(null);
+
+    const toggle = (event: Event) => {
+        event.stopPropagation();
+        isOpen.value = !isOpen.value;
+    };
+
+    const close = () => {
+        if (props.closeOnHide) {
+            isOpen.value = false;
+        }
+    };
+
+    const handleClickOutside = (event: MouseEvent) => {
+        if (
+            popoverRef.value &&
+            targetRef.value &&
+            !popoverRef.value.contains(event.target as Node) &&
+            !targetRef.value.contains(event.target as Node)
+        ) {
+            close();
+        }
+    };
+
+    onMounted(() => {
+        document.addEventListener('click', handleClickOutside);
+    });
+
+    onUnmounted(() => {
+        document.removeEventListener('click', handleClickOutside);
+    });
+</script>
+
+<template>
+    <div class="custom-popover-wrapper">
+        <div ref="targetRef" @click="toggle" class="popover-target">
+            <slot name="target"></slot>
+        </div>
+
+        <Transition name="popover-fade">
+            <div
+                v-if="isOpen"
+                ref="popoverRef"
+                class="custom-popover"
+                @click.stop
+            >
+                <slot></slot>
+            </div>
+        </Transition>
+    </div>
+</template>
+
+<style scoped>
+    .custom-popover-wrapper {
+        position: relative;
+        display: inline-block;
+    }
+
+    .popover-target {
+        cursor: pointer;
+    }
+
+    .custom-popover {
+        position: absolute;
+        bottom: 100%;
+        right: 0;
+        margin-bottom: 8px;
+        background: white;
+        border: 1px solid rgba(0, 0, 0, 0.15);
+        border-radius: 0.375rem;
+        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+        padding: 0.5rem 0.75rem;
+        z-index: 1060;
+        min-width: 200px;
+        max-width: 276px;
+    }
+
+    .popover-fade-enter-active,
+    .popover-fade-leave-active {
+        transition: opacity 0.15s ease;
+    }
+
+    .popover-fade-enter-from,
+    .popover-fade-leave-to {
+        opacity: 0;
+    }
+</style>

src/components/core/taxonList/TaxonDetailed.vue

@@ -16,15 +16,17 @@
     <div class="col" data-testid="Taxon detailed view">
         <div class="card h-100 mb-2">
             <div class="taxon-photo" data-testid="Taxon picture">
-                <Image
-                    :image-url="props.picture?.url"
+                <FullScreenImage
+                    :imageUrl="props.picture?.url"
                     :alt="props.picture?.urlSource"
-                    :title="
-                        props.picture?.source
-                            ? 'Source: ' + props.picture?.source
-                            : ''
-                    "
-                ></Image>
+                >
+                    <Image
+                        :image-url="props.picture?.url"
+                        :alt="props.picture?.urlSource"
+                        class="card-img-top"
+                    ></Image>
+                </FullScreenImage>
+
                 <div
                     class="caption"
                     v-if="props.picture.author"