mirror of
https://github.com/Fluffy-Bean/image-gallery.git
synced 2025-01-29 17:28:27 +00:00
Preparing to add AJAX
This commit is contained in:
parent
4c064eeaed
commit
a52f2c3da7
|
|
@ -11,6 +11,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<?php
|
||||
include "../ui/required.php";
|
||||
include("../ui/header.php");
|
||||
?>
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<?php
|
||||
include "../ui/required.php";
|
||||
include("../ui/header.php");
|
||||
|
||||
// Initialize the session
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<?php
|
||||
include "../ui/required.php";
|
||||
include("../ui/header.php");
|
||||
|
||||
// Initialize the session
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<?php
|
||||
include "../ui/required.php";
|
||||
include("../ui/header.php");
|
||||
|
||||
// Validate susness of Username
|
||||
|
|
|
|||
|
|
@ -63,12 +63,13 @@ body {
|
|||
#back-to-top {
|
||||
margin: 0; padding: 0.5rem;
|
||||
|
||||
position: fixed;
|
||||
position: fixed; z-index: 9999999999;
|
||||
right: -2.5rem; bottom: 1rem;
|
||||
|
||||
object-position: center;
|
||||
|
||||
background-color: var(--bg);
|
||||
backdrop-filter: blur(8px);
|
||||
|
||||
border-radius: 50%;
|
||||
box-shadow: var(--shadow);
|
||||
|
|
@ -193,12 +194,11 @@ body {
|
|||
-=-=-= IMAGE FULLSCREEN =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
|
||||
*/
|
||||
.image-container {
|
||||
margin: 0 0 2rem; padding: 0;
|
||||
|
||||
width: calc(100vw - var(--space-medium));
|
||||
height: 69vh;
|
||||
max-height: 69vh; height: auto;
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
background-color: var(--bg);
|
||||
backdrop-filter: blur(8px);
|
||||
|
|
@ -206,24 +206,20 @@ body {
|
|||
|
||||
border-radius: var(--rad);
|
||||
|
||||
transition: height 0.15s cubic-bezier(.19,1,.22,1);
|
||||
transition: max-height 0.15s cubic-bezier(.19,1,.22,1);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.image-container {
|
||||
height: 35vh;
|
||||
max-height: 35vh;
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
max-height: 100%;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
max-width: 100%; width: auto;
|
||||
max-height: inherit; height: auto;
|
||||
|
||||
border-radius: var(--rad);
|
||||
}
|
||||
|
|
@ -348,6 +344,11 @@ body {
|
|||
border-radius: var(--rad);
|
||||
|
||||
outline: 0.5rem solid var(--bg);
|
||||
|
||||
transition: transform 0.15s cubic-bezier(.19,1,.22,1);
|
||||
}
|
||||
.alert:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.alert-high {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,10 @@
|
|||
<meta property="og:description" content="Only Legs, a gallery made and hosted by Fluffy">
|
||||
</head>
|
||||
<body>
|
||||
<?php include("ui/header.php"); ?>
|
||||
<?php
|
||||
include "ui/required.php";
|
||||
include("ui/header.php");
|
||||
?>
|
||||
|
||||
<div class="alert-banner">
|
||||
<?php
|
||||
|
|
@ -255,7 +258,7 @@
|
|||
}
|
||||
?>
|
||||
|
||||
<div class="image-container">
|
||||
<div class="image-container space-bottom-large">
|
||||
<?php
|
||||
// Displaying image
|
||||
echo "<img class='image' id='".$image['id']."' src='".$image_path."' alt='".$image_alt."'>";
|
||||
|
|
|
|||
|
|
@ -10,7 +10,10 @@
|
|||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&display=swap">
|
||||
</head>
|
||||
<body>
|
||||
<?php include("ui/header.php"); ?>
|
||||
<?php
|
||||
include "ui/required.php";
|
||||
include "ui/header.php";
|
||||
?>
|
||||
|
||||
<div class="alert-banner">
|
||||
<?php
|
||||
|
|
@ -121,9 +124,6 @@
|
|||
</div>
|
||||
|
||||
<?php
|
||||
// Must be included with flyout.php
|
||||
echo "<script src='scripts/flyout.js'></script>";
|
||||
|
||||
include("ui/top.html");
|
||||
include("ui/footer.php");
|
||||
?>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,19 @@
|
|||
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/ . . .");
|
||||
|
||||
let show = document.querySelectorAll(".flyout-display");
|
||||
let hide = document.querySelector(".flyout-close");
|
||||
$(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.display= "none";
|
||||
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.display= "none";
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
button = document.getElementById("back-to-top");
|
||||
$(document).ready(function() {
|
||||
button = document.getElementById("back-to-top");
|
||||
|
||||
window.onscroll = function() {scrollFunction()};
|
||||
window.onscroll = function() {scrollFunction()};
|
||||
|
||||
function scrollFunction() {
|
||||
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
|
||||
button.style.right = "1rem";
|
||||
} else {
|
||||
button.style.right = "-2.5rem";
|
||||
function scrollFunction() {
|
||||
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
|
||||
button.style.right = "1rem";
|
||||
} else {
|
||||
button.style.right = "-2.5rem";
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -150,6 +150,9 @@ function flyout($header, $content, $action) {
|
|||
// Exit button + Div End
|
||||
echo "<button class='btn alert-default space-top flyout-close'>Close</button>
|
||||
</div>";
|
||||
|
||||
// Must be included with flyout.php
|
||||
echo "<script src='scripts/flyout.js'></script>";
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -166,7 +169,7 @@ function flyout($header, $content, $action) {
|
|||
|
||||
returns notification html including classes
|
||||
|
||||
===== Editors note ==================================
|
||||
===== Programmers note ==============================
|
||||
I made this so I didn't have to remake the html
|
||||
portion of the notification, it was annoying.
|
||||
This also allows for expanding the system later on!
|
||||
|
|
|
|||
|
|
@ -1,18 +1,4 @@
|
|||
<?php
|
||||
// Include required files and commands by every page on header
|
||||
session_start();
|
||||
|
||||
if (is_dir("ui/")) {
|
||||
include_once("ui/functions.php");
|
||||
} else {
|
||||
include_once("../ui/functions.php");
|
||||
}
|
||||
|
||||
$conn = mysqli_connect("localhost", "uwu", "fennec621", "swag");
|
||||
if ($conn->connect_error) {
|
||||
echo "<p class='alert alert-low'>Could not connect to database</p>";
|
||||
}
|
||||
|
||||
// Check which directory icons are in
|
||||
if (is_dir("assets/icons/")) {
|
||||
$dir = "assets/icons/";
|
||||
|
|
|
|||
20
ui/required.php
Normal file
20
ui/required.php
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<?php
|
||||
// Include required files and commands by every page on header
|
||||
session_start();
|
||||
|
||||
if (is_dir("ui/")) {
|
||||
include_once("ui/functions.php");
|
||||
} else {
|
||||
include_once("../ui/functions.php");
|
||||
}
|
||||
|
||||
$conn = mysqli_connect("localhost", "uwu", "fennec621", "swag");
|
||||
if ($conn->connect_error) {
|
||||
echo "<p class='alert alert-low'>Could not connect to database</p>";
|
||||
}
|
||||
?>
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.6.0.min.js"
|
||||
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
|
||||
crossorigin="anonymous">
|
||||
</script>
|
||||
|
|
@ -11,6 +11,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<?php
|
||||
include "ui/required.php";
|
||||
include("ui/header.php");
|
||||
|
||||
// Check if user is logged in
|
||||
|
|
|
|||
Loading…
Reference in a new issue