mirror of
https://github.com/Fluffy-Bean/image-gallery.git
synced 2025-01-29 17:28:27 +00:00
In the process of suffering
This commit is contained in:
parent
7eae10b4bf
commit
f670e000b8
|
@ -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 {
|
||||
|
|
36
image.php
36
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");
|
||||
|
||||
|
|
|
@ -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";
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue