Testing out flyout menus

css/master.css

@@ -370,6 +370,48 @@ a.btn {
   text-align: center;
 }
 
+/*
+  -=-=-= FLYOUT =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
+*/
+.flyout {
+  margin: 0; padding: 0.5rem 0.5rem 1.5rem;
+
+  max-width: 621px; width: calc(100% - 2.5rem + 3px);
+  max-height: 50vh; height: auto;
+
+  bottom: -50vh; left: 50%;
+
+  transform: translateX(-50%);
+
+  position: fixed; z-index: 99999;
+
+  overflow-y: auto;
+
+  border: 0.2rem solid var(--green);
+  border-bottom: none;
+  border-radius: inherit inherit none none;
+
+  word-wrap: break-word;
+
+  transition: bottom 0.5s cubic-bezier(.19,1,.22,1);
+}
+
+.flyout-dim {
+  margin: 0; padding: 0;
+
+  width: 100vw; height: 100vh;
+
+  left: 0; top: 0;
+
+  position: fixed; z-index: 99998;
+
+  opacity: 0.8;
+
+  display: none;
+
+  background: var(--bg);
+}
+
 /*
   -=-=-= FONT SIZES =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
 */

image.php

@@ -106,11 +106,12 @@
     // 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>";
     ?>
+    <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">
     <h2>Tags</h2>
-    <div class="tags flex-left around">
+    <div class="tags flex-left">
       <?php
       function clean($string) {
         $string = str_replace('-', '_', $string);
@@ -171,6 +172,8 @@
   ?>
 
   <?php
+  include_once("ui/flyout.php");
+
   include("ui/top.html");
   include("ui/footer.php");
   ?>

scripts/flyout.js

@@ -0,0 +1,13 @@
+document.querySelector(".flyout-close").onclick = () =>{
+  document.querySelector("html").style.overflow= "auto";
+
+  document.querySelector(".flyout").style.bottom= "-50vh";
+  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";
+}

ui/flyout.php

@@ -0,0 +1,14 @@
+<div class="flyout-dim">
+</div>
+<div class="flyout flex-down default-window between">
+  <?php
+  if (isset($flyout_content) && !empty($flyout_content)) {
+    echo $flyout_content;
+  } 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;
+  }
+  ?>
+  <a class="btn alert-default space-top-small flyout-close">Cancel</a>
+</div>
+<script src="scripts/flyout.js"></script>