Fullscreen image view

assets/ui/nav.php

@@ -5,11 +5,11 @@ use App\Account;
 $loggedin = new Account();
 ?>
 
-<nav class="nav-root flex-left">
+<nav class="nav-root">
-	<div class="nav-name flex-left">
+	<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

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;

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;

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>
+				<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."'>
+				<button class='preview-button' onclick='fullScreen()'><img src='assets/icons/scan.svg'></button>
+				</div>";
+		}
+		
+
 		?>
 		<script>
-					function showFull() {
+			function fullScreen() {
-						document.querySelector(".image").style.opacity = 0;
 				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(".image").src = "<?php echo $image_path;?>";
+					document.querySelector(".fullscreen-image").style.opacity = 1;
-							document.querySelector(".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
-		} else {
-			echo "<div class='image-container'>
-			<img class='image' id='".$image['id']."' src='".$image_path."' alt='".$image_alt."'>
-			</div>";
-		}
-
 
 		/*
 		|-------------------------------------------------------------
@@ -273,7 +290,7 @@
 		if ($privilaged) {
 		?>
 			<!-- Danger zone -->
-			<div class='danger-zone flex-down default-window'>
+			<div class='danger-zone'>
 				<h2>Danger zone</h2>
 
 				<!--