mirror of
https://github.com/Fluffy-Bean/image-gallery.git
synced 2024-12-28 02:16:17 +00:00
Adding modules
This commit is contained in:
parent
dc89737cfc
commit
c8f434e106
6
.gitmodules
vendored
Normal file
6
.gitmodules
vendored
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
[submodule "Sniffle"]
|
||||
path = Sniffle
|
||||
url = https://github.com/Fluffy-Bean/Sniffle.git
|
||||
[submodule "Flyout"]
|
||||
path = Flyout
|
||||
url = https://github.com/Fluffy-Bean/Flyout.git
|
||||
1
Flyout
Submodule
1
Flyout
Submodule
|
|
@ -0,0 +1 @@
|
|||
Subproject commit 57d63d741f57eaaa8b863b1ecd5d6df8c1d00834
|
||||
1
Sniffle
Submodule
1
Sniffle
Submodule
|
|
@ -0,0 +1 @@
|
|||
Subproject commit 471cd363a78fd2b73d960211a33829bada62e849
|
||||
|
|
@ -337,7 +337,7 @@ body {
|
|||
This is the notification system used by the website. Probably a little too much for what its used for
|
||||
*/
|
||||
.notify-root {
|
||||
margin: 0; padding: 1rem;
|
||||
margin: 0; padding: 0;
|
||||
|
||||
max-width: 621px; width: calc(100% - 2rem);
|
||||
height: auto;
|
||||
|
|
@ -447,7 +447,7 @@ a.btn {
|
|||
/*
|
||||
-=-=-= FLYOUT =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
|
||||
*/
|
||||
.flyout {
|
||||
/*.flyout {
|
||||
margin: 0; padding: 0.5rem 0.5rem 1.5rem;
|
||||
|
||||
max-width: 621px; width: calc(100% - 2.5rem + 3px);
|
||||
|
|
@ -487,7 +487,7 @@ a.btn {
|
|||
backdrop-filter: blur(5px);
|
||||
|
||||
transition: opacity 2s cubic-bezier(.19,1,.22,1);
|
||||
}
|
||||
}*/
|
||||
|
||||
/*
|
||||
-=-=-= FONT SIZES =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
|
||||
|
|
|
|||
36
image.php
36
image.php
|
|
@ -93,28 +93,26 @@ if (image_privilage($image['author']) || is_admin($_SESSION['id'])) {
|
|||
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
|
||||
crossorigin="anonymous">
|
||||
</script>
|
||||
|
||||
<!-- Sniffle script! -->
|
||||
<script src="Sniffle/sniffle.js"></script>
|
||||
<link rel='stylesheet' href='Sniffle/sniffle.css'>
|
||||
|
||||
<!-- Flyout script! -->
|
||||
<script src="Flyout/flyout.js"></script>
|
||||
<link rel='stylesheet' href='Flyout/flyout.css'>
|
||||
</head>
|
||||
<body>
|
||||
<?php include"ui/nav.php"; ?>
|
||||
|
||||
<div class="alert-banner">
|
||||
<?php
|
||||
/*
|
||||
If theres a success in updating the image,
|
||||
it'll let the user know
|
||||
*/
|
||||
if ($_GET["update"] == "success") {
|
||||
echo notify("Information updated", "high");
|
||||
} elseif ($_GET["update"] == "error") {
|
||||
echo notify("Something went fuckywucky, please try later", "default");
|
||||
<script>
|
||||
if (params.update == "success") {
|
||||
sniffleAdd("Info", "Image information updated", "var(--green)");
|
||||
}
|
||||
if ($_GET["del"] == "fail") {
|
||||
echo notify("Failed to delete image", "low");
|
||||
if (params.del == "fail") {
|
||||
sniffleAdd("Error", "Failed to delete image", "var(--red)");
|
||||
}
|
||||
?>
|
||||
<p class='alert alert-high space-bottom-large' onclick='closeAlert(this)'></p>
|
||||
<script src='scripts/alert.js'></script>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<?php
|
||||
/*
|
||||
|
|
@ -408,6 +406,12 @@ if (image_privilage($image['author']) || is_admin($_SESSION['id'])) {
|
|||
</form>";
|
||||
}
|
||||
|
||||
echo "<button id='flyoutShow' class='btn'>Show flyout!</button>";
|
||||
|
||||
echo"<script>$('#flyoutShow').click(function(){
|
||||
flyoutShow('Flyout Header', 'A very very cool description', '<button>Im a cool button!</button>');
|
||||
});</script>";
|
||||
|
||||
echo "</div>";
|
||||
}
|
||||
?>
|
||||
|
|
|
|||
54
index.php
54
index.php
|
|
@ -18,29 +18,28 @@
|
|||
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
|
||||
crossorigin="anonymous">
|
||||
</script>
|
||||
|
||||
<!-- Sniffle script! -->
|
||||
<script src="Sniffle/sniffle.js"></script>
|
||||
<link rel='stylesheet' href='Sniffle/sniffle.css'>
|
||||
|
||||
<!-- Flyout script! -->
|
||||
<script src="Flyout/flyout.js"></script>
|
||||
<link rel='stylesheet' href='Flyout/flyout.css'>
|
||||
</head>
|
||||
<body>
|
||||
<?php
|
||||
include "ui/nav.php";
|
||||
?>
|
||||
|
||||
<div class="alert-banner">
|
||||
<?php
|
||||
/*
|
||||
If theres a success in updating the image,
|
||||
it'll let the user know
|
||||
*/
|
||||
// Deletion toast
|
||||
if ($_GET["del"] == "true") {
|
||||
echo notify("Successfully deleted image: ".$_GET['id'], "high");
|
||||
<script>
|
||||
if (params.del == "true") {
|
||||
sniffleAdd("Image Deleted", "Successfully deleted image: <?php echo $_GET['id']; ?>", "var(--green)");
|
||||
}
|
||||
// Account toast
|
||||
if ($_GET["login"] == "success") {
|
||||
echo notify("O hi ".$_SESSION['username'], "high");
|
||||
if (params.login == "success") {
|
||||
sniffleAdd("Logged in", "O hi <?php echo $_SESSION['username']; ?>", "var(--green)");
|
||||
}
|
||||
?>
|
||||
<script src='scripts/alert.js'></script>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<?php
|
||||
// Show search
|
||||
|
|
@ -92,30 +91,6 @@
|
|||
$image_request = mysqli_query($conn, "SELECT * FROM swag_table ORDER BY id DESC");
|
||||
|
||||
while ($image = mysqli_fetch_array($image_request)) {
|
||||
// If search is set
|
||||
if (isset($_GET['q']) && !empty($_GET['q'])) {
|
||||
// Make search into an array
|
||||
$search_array = explode(" ", $_GET['q']);
|
||||
|
||||
// Get images tags for comparing
|
||||
$image_tag_array = explode(" ", $image['tags']);
|
||||
|
||||
// Compare arrays
|
||||
$compare_results = array_intersect($image_tag_array, $search_array);
|
||||
if (count($compare_results) > 0) {
|
||||
// Getting thumbnail
|
||||
if (file_exists("images/thumbnails/".$image['imagename'])) {
|
||||
$image_path = "images/thumbnails/".$image['imagename'];
|
||||
} else {
|
||||
$image_path = "images/".$image['imagename'];
|
||||
}
|
||||
|
||||
// Image loading
|
||||
echo "<div class='gallery-item'>";
|
||||
echo "<a href='image.php?id=".$image['id']."'><img class='gallery-image' loading='lazy' src='".$image_path."' id='".$image['id']."'></a>";
|
||||
echo "</div>";
|
||||
}
|
||||
} else {
|
||||
// Getting thumbnail
|
||||
if (file_exists("images/thumbnails/".$image['imagename'])) {
|
||||
$image_path = "images/thumbnails/".$image['imagename'];
|
||||
|
|
@ -127,7 +102,6 @@
|
|||
echo "<div class='gallery-item'>";
|
||||
echo "<a href='image.php?id=".$image['id']."'><img class='gallery-image' loading='lazy' src='".$image_path."' id='".$image['id']."'></a>";
|
||||
echo "</div>";
|
||||
}
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
let alertClose = document.querySelectorAll(".alert");
|
||||
|
||||
function closeAlert(gone) {
|
||||
gone.closest(".alert").style.transform="translateY(-10rem) scale(0.8)";
|
||||
gone.closest(".alert").style.opacity="0";
|
||||
|
||||
setTimeout(function(){
|
||||
gone.closest(".alert").style.display="none";
|
||||
}, 200);
|
||||
};
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
$(document).ready(function() {
|
||||
let show = document.querySelectorAll(".flyout-display");
|
||||
let hide = document.querySelector(".flyout-close");
|
||||
|
||||
show.forEach(function(){
|
||||
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(".flyout").style.transform= "translateX(-50%) scale(0.8)";
|
||||
document.querySelector(".flyout").style.bottom= "-20rem";
|
||||
|
||||
document.querySelector(".flyout-dim").style.opacity= "0";
|
||||
|
||||
setTimeout(function(){
|
||||
document.querySelector(".flyout-dim").style.display= "none";
|
||||
}, 621);
|
||||
});
|
||||
});
|
||||
25
search.php
Normal file
25
search.php
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<?php
|
||||
if (isset($_GET['q']) && !empty($_GET['q'])) {
|
||||
// Make search into an array
|
||||
$search_array = explode(" ", $_GET['q']);
|
||||
|
||||
// Get images tags for comparing
|
||||
$image_tag_array = explode(" ", $image['tags']);
|
||||
|
||||
// Compare arrays
|
||||
$compare_results = array_intersect($image_tag_array, $search_array);
|
||||
if (count($compare_results) > 0) {
|
||||
// Getting thumbnail
|
||||
if (file_exists("images/thumbnails/".$image['imagename'])) {
|
||||
$image_path = "images/thumbnails/".$image['imagename'];
|
||||
} else {
|
||||
$image_path = "images/".$image['imagename'];
|
||||
}
|
||||
|
||||
// Image loading
|
||||
echo "<div class='gallery-item'>";
|
||||
echo "<a href='image.php?id=".$image['id']."'><img class='gallery-image' loading='lazy' src='".$image_path."' id='".$image['id']."'></a>";
|
||||
echo "</div>";
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
|
@ -52,5 +52,28 @@ include $root_dir."ui/functions.php";
|
|||
echo "<div id='notify-root' class='notify-root'></div>";
|
||||
?>
|
||||
<script>
|
||||
/*
|
||||
This is a little secrete for the ones who care, nothing important
|
||||
*/
|
||||
console.log(" . . /|/| . . . . . . . \n .. /0 0 \\ . . . . . .. \n (III% . \\________, . . \n .. .\\_, .%###%/ \\'\\,.. \n . . . .||#####| |'\\ \\. \n .. . . ||. . .|/. .\\V. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . cc/ . .cc/ . . .");
|
||||
|
||||
/*
|
||||
Gets Querys from the URL the user is at
|
||||
Used by Sniffle to display notificaions
|
||||
*/
|
||||
const params = new Proxy(new URLSearchParams(window.location.search), {
|
||||
get: (searchParams, prop) => searchParams.get(prop),
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Used by Sniffle to add Notifications, div can be displayed all time as it has no width or height initself -->
|
||||
<div id='sniffle' class='sniffle'></div>
|
||||
|
||||
<!-- Div for information flyouts, controlled by Flyout.js -->
|
||||
<div id='flyoutDim' class='flyout-dim'></div>
|
||||
<div id='flyoutRoot' class='flyout'>
|
||||
<p id='flyoutHeader' class='flyout-header'>Header</p>
|
||||
<p id='flyoutDescription' class='flyout-description'>Description</p>
|
||||
<div id='flyoutActionbox' class='flyout-actionbox'></div>
|
||||
<button onclick='flyoutClose()'>Close</button>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue