In the process of suffering

This commit is contained in:
Michał 2022-07-29 16:41:05 +01:00
parent 7eae10b4bf
commit f670e000b8
4 changed files with 66 additions and 30 deletions

View file

@ -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 {

View file

@ -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");

View file

@ -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";
}
});

View file

@ -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>