failed-galleries/php-gallery
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/image-gallery.git synced 2024-12-29 10:56:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Testing out flyout menus

Browse source
This commit is contained in:
Michał 2022-07-29 13:53:36 +01:00
parent 0d9687e836
commit 7eae10b4bf
4 changed files with 73 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
css/master.css
View file

@ -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 =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
*/

5
image.php
View file

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

13
scripts/flyout.js Normal file
View file

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

14
ui/flyout.php Normal file
View file

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