Merge pull request #82 from geo-milev/gallery-design-improvements

Gallery design improvements
geo-milev · Sep 21, 2023 · b2497a0 · b2497a0
2 parents 83df75f + 69c8527
commit b2497a0
Show file tree

Hide file tree

Showing 3 changed files with 128 additions and 16 deletions.
diff --git a/src/lib/NavClose.svelte → src/lib/Close.svelte b/src/lib/NavClose.svelte → src/lib/Close.svelte
diff --git a/src/lib/Gallery.svelte b/src/lib/Gallery.svelte
@@ -4,6 +4,7 @@
 	import { linear } from "svelte/easing";
 	import ArrowLeft from "$lib/ArrowLeft.svelte";
 	import ArrowRight from "$lib/ArrowRight.svelte";
+	import Close from "$lib/Close.svelte";
 
 	export let images;
 	export let arrowColor;
@@ -13,6 +14,7 @@
 
 	let selectedImageIndex = 0
 	let elements = [];
+	let fullscreenShown = false;
 
 	const scrollConfig = {
 		behavior: 'smooth',
@@ -48,16 +50,48 @@
 			elements[selectedImageIndex].scrollIntoView(scrollConfig)
 		});
 	}
+
+	const openFullscreen = () => {
+		fullscreenShown = true
+		document.body.classList.add("no-scroll")
+	}
+
+	const closeFullscreen = () => {
+		fullscreenShown = false
+		document.body.classList.remove("no-scroll")
+	}
 </script>
 
 <div class="container">
-	<img class="current-image" loading="lazy"
-		 src="{env.PUBLIC_SERVER_URL + images[selectedImageIndex].image.url}"
-		 alt="{images[selectedImageIndex].image.alt}" style="opacity: {$opacity};">
-	<div class="selector" style="--arrow-color: {arrowColor}">
-		<button on:click={scrollLeft} aria-label="лява стрелка" class="arrow-button big-screen" disabled="{selectedImageIndex === 0}">
+	<button class="fullscreen button-reset" style="{fullscreenShown? 'display: flex': ''}"
+			aria-label="затваряне на цял екран" on:click={closeFullscreen}>
+		<button class="button-reset fullscreen-close"
+				aria-label="затваряне на цял екран"
+				on:click={closeFullscreen}>
+			<Close />
+		</button>
+		<figure on:click={(e) => e.stopPropagation()}>
+			<img class="current-image" loading="lazy"
+				 src="{env.PUBLIC_SERVER_URL + images[selectedImageIndex].image.url}"
+				 alt="{images[selectedImageIndex].image.alt}" style="opacity: 1;">
+			<figcaption>{images[selectedImageIndex].image.alt}</figcaption>
+		</figure>
+	</button>
+
+	<div class="current-image-container" style="--arrow-color: {arrowColor}">
+		<button on:click={scrollLeft} aria-label="лява стрелка" class="arrow-button left big-screen" disabled="{selectedImageIndex === 0}">
 			<ArrowLeft />
 		</button>
+		<button on:click={scrollRight} aria-label="дясна стрелка" class="arrow-button right big-screen" disabled="{selectedImageIndex === images.length - 1}">
+			<ArrowRight />
+		</button>
+		<button aria-label="отваряне на цял екран" class="button-reset" on:click={openFullscreen}>
+			<img class="current-image" loading="lazy"
+				 src="{env.PUBLIC_SERVER_URL + images[selectedImageIndex].image.url}"
+				 alt="{images[selectedImageIndex].image.alt}" style="opacity: {$opacity};">
+		</button>
+	</div>
+	<div class="selector">
 		<div class="previews">
 			{#each images as image, index}
 				<button bind:this={elements[index]}
@@ -70,10 +104,7 @@
 				</button>
 			{/each}
 		</div>
-		<button on:click={scrollRight} aria-label="лява стрелка" class="arrow-button big-screen" disabled="{selectedImageIndex === images.length - 1}">
-			<ArrowRight />
-		</button>
-		<div class="small-screen-navigation">
+		<div class="small-screen-navigation" style="--arrow-color: {arrowColor}">
 			<button on:click={scrollLeft} aria-label="лява стрелка" class="arrow-button" disabled="{selectedImageIndex === 0}">
 				<ArrowLeft />
 			</button>
@@ -98,7 +129,7 @@
         width: 100%;
         max-width: 40rem;
         height: 100%;
-        max-height: 40rem;
+        max-height: 30rem;
 	}
 
     .image-button {
@@ -137,13 +168,34 @@
 		padding-top: 1rem;
 		padding-bottom: 1rem;
         max-width: 60rem;
-        max-height: 60rem;
+	}
+
+	.current-image-container {
+		position: relative;
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		max-width: 60rem;
 	}
 
     .arrow-button {
         background-color: rgba(0, 0, 0, 0);
         border: none;
         cursor: pointer;
+		position: absolute;
+    }
+
+	.arrow-button.left {
+		left: 0;
+		top: 50%;
+		transform: translateY(-50%);
+	}
+
+    .arrow-button.right {
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
     }
 
     .arrow-button {
@@ -161,17 +213,77 @@
         align-items: center;
     }
 
+	.button-reset {
+		border: none;
+		padding: 0;
+		margin: 0;
+		background-color: rgba(0, 0, 0, 0);
+		cursor: pointer;
+	}
+
+    .fullscreen {
+        position: fixed;
+		display: none;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+		justify-content: center;
+		align-items: center;
+		background-color: rgba(0, 0, 0, 0.75);
+		z-index: 5;
+    }
+
+	.fullscreen-close {
+		position: absolute;
+		top: 2rem;
+		right: 2rem;
+	}
+
+	.fullscreen figcaption {
+        font-family: 'Roboto', serif;
+        font-size: 18px;
+        line-height: 22px;
+        color: #FFFFFF;
+		text-align: start;
+		overflow: auto;
+	}
+
+	.fullscreen figure {
+		margin: 1rem;
+	}
+
+    .fullscreen figure img {
+        cursor: auto;
+    }
+
+	.fullscreen .current-image {
+        max-width: 90vw;
+        max-height: 90vh;
+	}
+
     @media only screen and (max-width: 580px) {
+		.arrow-button {
+			position: relative;
+		}
+
         .big-screen {
             display: none;
         }
 
-		.selector {
-			flex-direction: column;
-		}
+        .selector {
+            flex-direction: column;
+        }
 
         .small-screen-navigation {
             display: flex;
         }
     }
+
+    @media only screen and (max-width: 800px) {
+        .fullscreen .current-image {
+            max-width: 100%;
+			max-height: 90vh;
+        }
+    }
 </style>
diff --git a/src/lib/Navbar.svelte b/src/lib/Navbar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import NavLines from "$lib/NavLines.svelte";
-    import NavClose from "$lib/NavClose.svelte";
+    import Close from "$lib/Close.svelte";
     import NavMinus from "$lib/NavMinus.svelte";
     import NavPlus from "$lib/NavPlus.svelte";
     import { afterNavigate } from '$app/navigation';
@@ -192,7 +192,7 @@
         <div class="mobile-nav" transition:fly="{{ x: 300, duration: 300 }}">
             <div class="close">
                 <button class="icon-button" aria-label="затвори мобилна навигация" on:click={closeNavbar}>
-                    <NavClose />
+                    <Close />
                 </button>
             </div>
             <nav>