From f670e000b8e9a48b5a3dee6cf0187a909845a72c Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Fri, 29 Jul 2022 16:41:05 +0100
Subject: [PATCH] In the process of suffering

---
 css/master.css    | 10 ++++++----
 image.php         | 36 +++++++++++++++++++++++++-----------
 scripts/flyout.js | 28 ++++++++++++++++++----------
 ui/flyout.php     | 22 +++++++++++++++++-----
 4 files changed, 66 insertions(+), 30 deletions(-)

diff --git a/css/master.css b/css/master.css
index a6778f9..2444d69 100644
--- a/css/master.css
+++ b/css/master.css
@@ -31,6 +31,8 @@ html {
 
   min-height: 100vh; max-width: 100vw;
 
+  position: relative;
+
   background-color: var(--bg-2);
   background-image: url("../assets/bg2.svg");
 
@@ -377,11 +379,11 @@ a.btn {
   margin: 0; padding: 0.5rem 0.5rem 1.5rem;
 
   max-width: 621px; width: calc(100% - 2.5rem + 3px);
-  max-height: 50vh; height: auto;
+  max-height: 20rem; height: auto; min-height: 10rem;
 
-  bottom: -50vh; left: 50%;
+  bottom: -20rem; left: 50%;
 
-  transform: translateX(-50%);
+  transform: translateX(-50%) scale(0.8);
 
   position: fixed; z-index: 99999;
 
@@ -393,7 +395,7 @@ a.btn {
 
   word-wrap: break-word;
 
-  transition: bottom 0.5s cubic-bezier(.19,1,.22,1);
+  transition: bottom 0.5s cubic-bezier(.19,1,.22,1), transform 0.5s cubic-bezier(.19,1,.22,1);
 }
 
 .flyout-dim {
diff --git a/image.php b/image.php
index e4438a3..1fec0c1 100644
--- a/image.php
+++ b/image.php
@@ -105,8 +105,11 @@
 
     // Image download
     echo "<a class='btn alert-high space-top' href='images/".$image['imagename']."' download='".$image['imagename']."'><img class='svg' src='assets/icons/download.svg'>Download image</a>";
+
+    // Flyout test button
     ?>
-    <button class='btn alert-high space-top flyout-display' onclick="<?php $flyout_content = "<h2 class='space-bottom-large'>Sus</h2> <p class='space-bottom'>This is a test UwU</p> <p class='space-bottom-large'>You are currently viewing image: ".$_GET['id']."</p>"; ?>">Test button</button>
+
+
   </div>
 
   <div class="tags-root default-window">
@@ -153,24 +156,35 @@
         $error = "Could not delete image";
       }
     }
-    // Delete form
-    echo "<div class='danger-zone flex-down default-window'>";
-    echo "<h2>Danger zone</h2>";
 
-    // Image hover details
-    echo "<form class='detail' method='POST' enctype='multipart/form-data'>";
-    echo "<button class='btn alert-low' type='submit' name='delete' value='".$image['id']."'><img class='svg' src='assets/icons/trash.svg'>Delete image</button>";
-    if (isset($error)) {
-      echo "<p class='alert alert-fail' id='deleted'>".$error."</p>";
-    }
-    echo "</form>";
+    // Danger zone
+    echo "<div class='danger-zone flex-down default-window'>
+    <h2>Danger zone</h2>";
 
+    // Delete button
+    ?>
+
+    <button class="btn alert-low space-top flyout-display" onClick=" <?php
+     $flyout_header = "Are you sure?";
+     $flyout_content = "Deleting this image is pernament, there is no going back after this!!!!!";
+     $flyout_interaction = "<form class='detail' method='POST' enctype='multipart/form-data'>
+     <button class='btn alert-low' type='submit' name='delete' value='".$image['id']."'><img class='svg' src='assets/icons/trash.svg'>Delete image</button>
+     </form>";
+    ?> ">Delete image</button>
+
+    <?php
     // Edit image button
     echo "<a class='btn alert-low space-top-small' href='https://superdupersecteteuploadtest.fluffybean.gay/edit.php?id=".$image['id']."'><img class='svg' src='assets/icons/edit.svg'>Modify image content</a>";
     echo "</div>";
   }
   ?>
 
+  <button class="btn alert-high space-top flyout-display" onClick=" <?php
+   $flyout_header = "Sus";
+   $flyout_content = "This is a test UwU. You are currently viewing image: ".$_GET['id'];
+   $flyout_interaction = "<a class='btn alert-high'>This button does nothing!</a> <a class='btn alert-low space-top-small'>I'm another button, but scawwy</a>";
+   ?> ">Test button</button>
+
   <?php
   include_once("ui/flyout.php");
 
diff --git a/scripts/flyout.js b/scripts/flyout.js
index 9a1c147..001c83a 100644
--- a/scripts/flyout.js
+++ b/scripts/flyout.js
@@ -1,13 +1,21 @@
-document.querySelector(".flyout-close").onclick = () =>{
+let show = document.querySelectorAll(".flyout-display");
+let hide = document.querySelector(".flyout-close");
+
+show.forEach((pain) => {
+  pain.addEventListener("click", function(){
+    document.querySelector("html").style.overflow= "hidden";
+
+    document.querySelector(".flyout").style.transform= "translateX(-50%) scale(1)";
+    document.querySelector(".flyout").style.bottom= "-1rem";
+    document.querySelector(".flyout-dim").style.display= "block";
+  });
+});
+
+
+hide.addEventListener("click", function(){
   document.querySelector("html").style.overflow= "auto";
 
-  document.querySelector(".flyout").style.bottom= "-50vh";
+  document.querySelector(".flyout").style.transform= "translateX(-50%) scale(0.8)";
+  document.querySelector(".flyout").style.bottom= "-20rem";
   document.querySelector(".flyout-dim").style.display= "none";
-}
-
-document.querySelector(".flyout-display").onclick = () =>{
-  document.querySelector("html").style.overflow= "hidden";
-
-  document.querySelector(".flyout").style.bottom= "-1rem";
-  document.querySelector(".flyout-dim").style.display= "block";
-}
+});
diff --git a/ui/flyout.php b/ui/flyout.php
index 9730a84..5221d04 100644
--- a/ui/flyout.php
+++ b/ui/flyout.php
@@ -2,13 +2,25 @@
 </div>
 <div class="flyout flex-down default-window between">
   <?php
-  if (isset($flyout_content) && !empty($flyout_content)) {
-    echo $flyout_content;
+  // Header for the flyout, must be included
+  if (isset($flyout_header) && !empty($flyout_header)) {
+    echo "<h2 class='space-bottom'>".$flyout_header."</h2>";
   } else {
-    $flyout_content = "<h2 class='space-bottom-large'>Dialog</h2> <p>This is a very cool flyout that does nothing but be annoying right now! Sowwy for taking up your screenspace with this box!</p class='space-bottom-large'> <p>This is just being tested as a better alternative to some things, sowwy!</p> <a class='btn alert-low'>Accept the world is cruel</a>";
-    echo $flyout_content;
+    echo "<h2 class='space-bottom'>Missing Header</h2>";
+  }
+
+  // Flyout content, must be included!!!!
+  if (isset($flyout_content) && !empty($flyout_content)) {
+    echo "<p class='space-bottom'>".$flyout_content."</p>";
+  } else {
+    echo "<p class='space-bottom'>This is just being tested as a better alternative to some things, sowwy!</p>";
+  }
+
+  // Flyout button, not required so must need more information when added
+  if (isset($flyout_interaction) && !empty($flyout_interaction)) {
+    echo $flyout_interaction;
   }
   ?>
-  <a class="btn alert-default space-top-small flyout-close">Cancel</a>
+  <a class="btn alert-default space-top flyout-close">Cancel</a>
 </div>
 <script src="scripts/flyout.js"></script>