From 9dc911ea4c3c2bb3b9d4d4c9b90e00cf0e0f87a4 Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Sun, 14 Aug 2022 16:43:54 +0000
Subject: [PATCH] General fixes + nsfw tag blur

---
 Flyout/flyout.css   |  8 +++++++-
 Flyout/flyout.js    |  2 +-
 app/server/conn.php |  4 ++--
 css/main.css        |  8 ++++++++
 css/scss/_body.scss |  8 ++++++++
 image.php           |  6 +++++-
 index.php           | 15 +++++++++------
 ui/required.php     | 20 +++++++++++++++-----
 8 files changed, 55 insertions(+), 16 deletions(-)

diff --git a/Flyout/flyout.css b/Flyout/flyout.css
index 530919d..3d240c2 100644
--- a/Flyout/flyout.css
+++ b/Flyout/flyout.css
@@ -21,7 +21,7 @@
   margin: 0; padding: 0.5rem;
 
   max-width: 621px; width: calc(100% - 3.5rem);
-  max-height: 20rem; height: auto; min-height: 10rem;
+  height: auto; min-height: 10rem;
 
   position: fixed; z-index: 9999;
   left: 50%; bottom: -15rem;
@@ -41,9 +41,15 @@
 }
 
 .flyout-header {
+  margin: 0 0 0.5rem 0;
   font-size: 20px;
   font-family: "Lexend Deca", sans-serif;
 }
+.flyout-description {
+  margin: 0 0 0.5rem 0;
+  max-height: 8rem;
+  overflow-y: auto;
+}
 
 .flyout-actionbox {
   display: inline;
diff --git a/Flyout/flyout.js b/Flyout/flyout.js
index c929271..bf0f215 100644
--- a/Flyout/flyout.js
+++ b/Flyout/flyout.js
@@ -25,7 +25,7 @@ function flyoutShow(header, description, actionbox) {
   $(flyoutActionbox).html(actionbox);
 
   // Show the flyout
-  flyoutRoot.style.display = "flex";
+  flyoutRoot.style.display = "block";
   // Show the dim
   flyoutDim.style.display = "block";
   setTimeout(function(){
diff --git a/app/server/conn.php b/app/server/conn.php
index 688078f..595d099 100644
--- a/app/server/conn.php
+++ b/app/server/conn.php
@@ -6,10 +6,10 @@
   For now it's hard-coded, shouldn't be an issue as most people wont be changing this often anyway
 */
 // Setting up connection variables
-$conn_ip = "localhost";
+$conn_ip = "192.168.0.79:3306";
 $conn_username = "uwu";
 $conn_password = "fennec621";
-$conn_database = "swag";
+$conn_database = "gallery";
 
 $conn = mysqli_connect($conn_ip, $conn_username, $conn_password , $conn_database);
 if ($conn->connect_error) {
diff --git a/css/main.css b/css/main.css
index fbbb8c5..50f7d00 100644
--- a/css/main.css
+++ b/css/main.css
@@ -185,6 +185,7 @@ nav .btn {
   background-color: #151515;
   border-radius: -0.5rem;
   position: relative;
+  overflow: hidden;
   flex: 1 0 150px;
   transition: transform 0.15s cubic-bezier(0.19, 1, 0.22, 1);
 }
@@ -216,6 +217,10 @@ nav .btn {
   border-radius: -0.5rem;
 }
 
+.nsfw-blur {
+  filter: blur(10px);
+}
+
 /*
  |-------------------------------------------------------------
  | IMAGE
@@ -349,6 +354,9 @@ nav .btn {
   border-radius: 0rem;
   font-family: "Secular One", sans-serif;
 }
+.tag::before {
+  content: "# ";
+}
 
 .danger-zone {
   margin-bottom: 1rem;
diff --git a/css/scss/_body.scss b/css/scss/_body.scss
index 78888f4..8b3bd3a 100644
--- a/css/scss/_body.scss
+++ b/css/scss/_body.scss
@@ -55,6 +55,8 @@
 
     position: relative;
 
+    overflow: hidden;
+
     flex: 1 0 150px;
 
     transition: transform 0.15s cubic-bezier(.19, 1, .22, 1);
@@ -93,6 +95,9 @@
     border-radius: calc($rad - 0.5rem);
 }
 
+.nsfw-blur {
+    filter: blur(10px);
+}
 /*
  |-------------------------------------------------------------
  | IMAGE
@@ -168,6 +173,9 @@
     border-radius: $rad;
 
     font-family: $font-body;
+    &::before {
+        content: '# ';
+    }
 }
 
 // DANGER ZONE
diff --git a/image.php b/image.php
index bece92c..d51bd1f 100644
--- a/image.php
+++ b/image.php
@@ -219,7 +219,11 @@
       if (isset($image['tags']) && !empty($image['tags'])) {
         $image_tags_array = explode(" ", $image['tags']);
         foreach ($image_tags_array as $tag) {
-          echo "<p class='tag btn-good'><img class='svg' src='assets/icons/tag.svg'>".$tag."</p>";
+          if ($tag == "nsfw") {
+            echo "<p id='tag' class='tag btn-bad'>".$tag."</p>";
+          } else {
+            echo "<p id='tag' class='tag btn-good'>".$tag."</p>";
+          }
         }
       } else {
         echo "<p>No tags present</p>";
diff --git a/index.php b/index.php
index 2317a2a..30b407d 100644
--- a/index.php
+++ b/index.php
@@ -28,18 +28,14 @@
 	<!-- Flyout script! -->
 	<script src="Flyout/flyout.js"></script>
 	<link rel='stylesheet' href='Flyout/flyout.css'>
-
-	<?php include "ui/required.php"; ?>
 </head>
 <body>
 <?php
+include "ui/required.php";
 include "ui/nav.php";
 ?>
 
-
 <script>
-	//sniffleAdd("Warning", "The website is currently being worked on, some functionality has been restored, but tread carefully as errors may occur", "var(--red)", "<?php echo $root_dir ?>assets/icons/warning.svg");
-
 	if (params.del == "true") {
 		sniffleAdd("Image Deleted", "Successfully deleted image: <?php echo $_GET['id']; ?>", "var(--green)", "<?php echo $root_dir ?>assets/icons/trash.svg");
 	}
@@ -110,9 +106,16 @@ include "ui/nav.php";
 			$image_path = "images/".$image['imagename'];
 		}
 
+		// Check for NSFW tag
+		if (str_contains($image['tags'], "nsfw")) {
+			$image_nsfw = "nsfw-blur";
+		} else {
+			$image_nsfw = "";
+		}
+
 		// Image loading
 		echo "<div class='gallery-item'>";
-		echo "<a href='image.php?id=".$image['id']."'><img class='gallery-image' loading='lazy' src='".$image_path."' id='".$image['id']."'></a>";
+		echo "<a href='image.php?id=".$image['id']."'><img class='gallery-image ".$image_nsfw."' loading='lazy' src='".$image_path."' id='".$image['id']."'></a>";
 		echo "</div>";
 	}
 	?>
diff --git a/ui/required.php b/ui/required.php
index 010d885..468f435 100644
--- a/ui/required.php
+++ b/ui/required.php
@@ -1,4 +1,12 @@
 <?php
+/*
+  Used for testing, do not use this in production
+*/
+ini_set('display_errors', 1);
+ini_set('display_startup_errors', 1);
+error_reporting(E_ERROR | E_PARSE | E_NOTICE);;
+
+
 /*
   Start session
 
@@ -64,11 +72,13 @@ include $root_dir."app/server/secrete.php";
   Controlled by Flyout.js
 -->
 <div id='flyoutDim' class='flyout-dim'></div>
-<div id='flyoutRoot' class='flyout flex-down'>
-  <p id='flyoutHeader' class='flyout-header space-bottom'>Header</p>
-  <p id='flyoutDescription' class='flyout-description space-bottom'>Description</p>
-  <div id='flyoutActionbox' class='flyout-actionbox space-bottom-small'></div>
-  <button onclick='flyoutClose()' class='btn alert-default'>Close</button>
+<div id='flyoutRoot' class='flyout'>
+  <p id='flyoutHeader' class='flyout-header'>Header</p>
+  <br>
+  <p id='flyoutDescription' class='flyout-description'>Description</p>
+  <br>
+  <div id='flyoutActionbox' class='flyout-actionbox'></div>
+  <button onclick='flyoutClose()' class='btn btn-neutral'>Close</button>
 </div>
 
 <!--