From 55c853e81c7b466efcbcffca60e65e8488467cc7 Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Wed, 21 Sep 2022 16:28:57 +0000
Subject: [PATCH] Fullscreen image view

---
 assets/ui/nav.php   |  6 ++---
 css/main.css        | 49 ++++++++++++++++++++++++++++++++++
 css/scss/_body.scss | 65 +++++++++++++++++++++++++++++++++++++++++++++
 image.php           | 53 +++++++++++++++++++++++-------------
 4 files changed, 152 insertions(+), 21 deletions(-)

diff --git a/assets/ui/nav.php b/assets/ui/nav.php
index 423aa68..15427b2 100644
--- a/assets/ui/nav.php
+++ b/assets/ui/nav.php
@@ -5,11 +5,11 @@ use App\Account;
 $loggedin = new Account();
 ?>
 
-<nav class="nav-root flex-left">
-	<div class="nav-name flex-left">
+<nav class="nav-root">
+	<div class="nav-name">
 		<p><?php echo $user_settings['website_name']; ?></p>
 	</div>
-	<div class="nav-links flex-left">
+	<div class="nav-links">
 		<a class='btn' href='index.php'><img class='svg' src='assets/icons/house.svg'><span class='nav-hide'>Home</span></a>
 		<hr>
 		<?php
diff --git a/css/main.css b/css/main.css
index 66cc47d..99abf9e 100644
--- a/css/main.css
+++ b/css/main.css
@@ -310,6 +310,55 @@ nav .btn {
  | IMAGE
  |-------------------------------------------------------------
 */
+.fullscreen-image {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  background-color: rgba(21, 21, 21, 0.7333333333);
+  -webkit-backdrop-filter: blur(15px);
+          backdrop-filter: blur(15px);
+  z-index: 999;
+  transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+  display: none;
+  opacity: 0;
+}
+.fullscreen-image img {
+  max-width: 95%;
+  max-height: 95%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  border-radius: 0.25rem;
+}
+.fullscreen-image button {
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  display: block;
+  box-sizing: border-box;
+  text-decoration: none;
+  border: none;
+  border-radius: calc(0.25rem - (0.5rem + 3px));
+  transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
+  background-color: #121212;
+  box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
+}
+.fullscreen-image button img {
+  width: 1.5rem;
+  display: block;
+}
+.fullscreen-image button:hover {
+  outline: #E8E3E3 0.2rem solid;
+  color: #E8E3E3;
+}
+
 .image-container {
   margin: 1rem 0 2rem 0;
   padding: 0;
diff --git a/css/scss/_body.scss b/css/scss/_body.scss
index 400ec0e..7cfbd74 100644
--- a/css/scss/_body.scss
+++ b/css/scss/_body.scss
@@ -182,6 +182,71 @@
  | IMAGE
  |-------------------------------------------------------------
 */
+.fullscreen-image {
+    width: 100vw; height: 100vh;
+
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-050%) translateY(-50%);
+
+    background-color: $bg-alt;
+    backdrop-filter: blur(15px);
+
+    z-index: 999;
+
+    transition: opacity 0.5s cubic-bezier(.19, 1, .22, 1);
+
+    display: none;  // Hidden so to not disturb the user
+    opacity: 0;     //
+
+    img {
+        max-width: 95%; max-height: 95%;
+
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translateX(-050%) translateY(-50%);
+
+        border-radius: $rad;
+    }
+
+    button {
+        width: 1.75rem; height: 1.75rem;
+    
+        padding: 0;
+    
+        position: absolute;
+        top: 0.5rem;
+        right: 0.5rem;
+    
+        display: block;
+        box-sizing: border-box;
+    
+        text-decoration: none;
+    
+        border: none;
+        border-radius: calc($rad - (0.5rem + 3px));
+    
+        transition: outline 0.1s cubic-bezier(.19, 1, .22, 1);
+    
+        background-color: $black;
+    
+        box-shadow: $shadow;
+    
+        img {
+            width: 1.5rem;
+    
+            display: block;
+        }
+    
+        &:hover {
+            outline: $white 0.2rem solid;
+            color: $fg;
+        }
+    }
+}
+
 .image-container {
     margin: 1rem 0 2rem 0;
     padding: 0;
diff --git a/image.php b/image.php
index 59c6ab2..1c40dfc 100644
--- a/image.php
+++ b/image.php
@@ -121,29 +121,46 @@
 			$privilaged = False;
 		}
 
+		echo "<div class='fullscreen-image'>
+			<button onclick='closeFullScreen()'><img src='assets/icons/cross.svg'></button>
+			<img>
+			</div>";
+		
 		if (is_file("images/previews/".$image['imagename'])) {
 			echo "<div class='image-container'>
-			<img class='image' id='".$image['id']."' src='images/previews/".$image['imagename']."' alt='".$image_alt."'>
-			<button class='preview-button' onclick='showFull()'><img src='assets/icons/scan.svg'></button>
-			</div>";
-			?>
-				<script>
-					function showFull() {
-						document.querySelector(".image").style.opacity = 0;
-						document.querySelector(".preview-button").style.display = "none";
-						setTimeout(function(){
-							document.querySelector(".image").src = "<?php echo $image_path;?>";
-							document.querySelector(".image").style.opacity = 1;
-						}, 500);
-					}
-				</script>
-			<?php
+				<img class='image' id='".$image['id']."' src='images/previews/".$image['imagename']."' alt='".$image_alt."'>
+				<button class='preview-button' onclick='fullScreen()'><img src='assets/icons/scan.svg'></button>
+				</div>";
 		} else {
 			echo "<div class='image-container'>
-			<img class='image' id='".$image['id']."' src='".$image_path."' alt='".$image_alt."'>
-			</div>";
+				<img class='image' id='".$image['id']."' src='".$image_path."' alt='".$image_alt."'>
+				<button class='preview-button' onclick='fullScreen()'><img src='assets/icons/scan.svg'></button>
+				</div>";
 		}
+		
 
+		?>
+		<script>
+			function fullScreen() {
+				document.querySelector(".preview-button").style.display = "none";
+
+				document.querySelector(".fullscreen-image").style.display = "block";
+				document.querySelector(".fullscreen-image > img").src = "<?php echo $image_path;?>";
+				setTimeout(function(){
+					document.querySelector(".fullscreen-image").style.opacity = 1;
+				}, 500);
+			}
+
+			function closeFullScreen() {
+				document.querySelector(".preview-button").style.display = "block";
+				
+				document.querySelector(".fullscreen-image").style.opacity = 0;
+				setTimeout(function(){
+					document.querySelector(".fullscreen-image").style.display = "none";
+				}, 500);
+			}
+		</script>
+		<?php
 
 		/*
 		|-------------------------------------------------------------
@@ -273,7 +290,7 @@
 		if ($privilaged) {
 		?>
 			<!-- Danger zone -->
-			<div class='danger-zone flex-down default-window'>
+			<div class='danger-zone'>
 				<h2>Danger zone</h2>
 
 				<!--