Galleries/PHPGallery
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/image-gallery.git synced 2025-05-14 07:32:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Preparing to add AJAX

Browse source
This commit is contained in:
Michał Gdula 2022-08-02 14:13:35 +01:00
parent 4c064eeaed
commit a52f2c3da7
13 changed files with 77 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
account/account.php
View file

@ -11,6 +11,7 @@
</head> </head>
<body> <body>
<?php <?php
include "../ui/required.php";
include("../ui/header.php"); include("../ui/header.php");
?> ?>

1
account/login.php
View file

@ -11,6 +11,7 @@
</head> </head>
<body> <body>
<?php <?php
include "../ui/required.php";
include("../ui/header.php"); include("../ui/header.php");
// Initialize the session // Initialize the session

1
account/password-reset.php
View file

@ -11,6 +11,7 @@
</head> </head>
<body> <body>
<?php <?php
include "../ui/required.php";
include("../ui/header.php"); include("../ui/header.php");
// Initialize the session // Initialize the session

1
account/signup.php
View file

@ -11,6 +11,7 @@
</head> </head>
<body> <body>
<?php <?php
include "../ui/required.php";
include("../ui/header.php"); include("../ui/header.php");
// Validate susness of Username // Validate susness of Username

27
css/master.css
View file

@ -63,12 +63,13 @@ body {
#back-to-top { #back-to-top {
margin: 0; padding: 0.5rem; margin: 0; padding: 0.5rem;
position: fixed; position: fixed; z-index: 9999999999;
right: -2.5rem; bottom: 1rem; right: -2.5rem; bottom: 1rem;
object-position: center; object-position: center;
background-color: var(--bg); background-color: var(--bg);
backdrop-filter: blur(8px);
border-radius: 50%; border-radius: 50%;
box-shadow: var(--shadow); box-shadow: var(--shadow);
@ -193,12 +194,11 @@ body {
-=-=-= IMAGE FULLSCREEN =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -=-=-= IMAGE FULLSCREEN =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
*/ */
.image-container { .image-container {
margin: 0 0 2rem; padding: 0;
width: calc(100vw - var(--space-medium)); width: calc(100vw - var(--space-medium));
height: 69vh; max-height: 69vh; height: auto;
position: relative; position: relative;
display: flex;
background-color: var(--bg); background-color: var(--bg);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
@ -206,24 +206,20 @@ body {
border-radius: var(--rad); 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) { @media (max-width: 600px) {
.image-container { .image-container {
height: 35vh; max-height: 35vh;
} }
} }
.image { .image {
max-width: 100%; margin: 0 auto;
width: auto;
max-height: 100%;
height: auto;
position: absolute; max-width: 100%; width: auto;
top: 50%; left: 50%; max-height: inherit; height: auto;
transform: translate(-50%, -50%);
border-radius: var(--rad); border-radius: var(--rad);
} }
@ -348,6 +344,11 @@ body {
border-radius: var(--rad); border-radius: var(--rad);
outline: 0.5rem solid var(--bg); outline: 0.5rem solid var(--bg);
transition: transform 0.15s cubic-bezier(.19,1,.22,1);
}
.alert:hover {
transform: scale(1.05);
} }
.alert-high { .alert-high {

7
image.php
View file

@ -16,7 +16,10 @@
<meta property="og:description" content="Only Legs, a gallery made and hosted by Fluffy"> <meta property="og:description" content="Only Legs, a gallery made and hosted by Fluffy">
</head> </head>
<body> <body>
<?php include("ui/header.php"); ?> <?php
include "ui/required.php";
include("ui/header.php");
?>
<div class="alert-banner"> <div class="alert-banner">
<?php <?php
@ -255,7 +258,7 @@
} }
?> ?>
<div class="image-container"> <div class="image-container space-bottom-large">
<?php <?php
// Displaying image // Displaying image
echo "<img class='image' id='".$image['id']."' src='".$image_path."' alt='".$image_alt."'>"; echo "<img class='image' id='".$image['id']."' src='".$image_path."' alt='".$image_alt."'>";

8
index.php
View file

@ -10,7 +10,10 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&amp;display=swap"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&amp;display=swap">
</head> </head>
<body> <body>
<?php include("ui/header.php"); ?> <?php
include "ui/required.php";
include "ui/header.php";
?>
<div class="alert-banner"> <div class="alert-banner">
<?php <?php
@ -121,9 +124,6 @@
</div> </div>
<?php <?php
// Must be included with flyout.php
echo "<script src='scripts/flyout.js'></script>";
include("ui/top.html"); include("ui/top.html");
include("ui/footer.php"); include("ui/footer.php");
?> ?>

28
scripts/flyout.js
View file

@ -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/ . . ."); 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"); $(document).ready(function() {
let hide = document.querySelector(".flyout-close"); let show = document.querySelectorAll(".flyout-display");
let hide = document.querySelector(".flyout-close");
show.forEach(function(){ show.forEach(function(){
document.querySelector(".flyout").style.transform= "translateX(-50%) scale(1)"; document.querySelector(".flyout").style.transform= "translateX(-50%) scale(1)";
document.querySelector(".flyout").style.bottom= "-1rem"; document.querySelector(".flyout").style.bottom= "-1rem";
document.querySelector(".flyout-dim").style.display= "block"; document.querySelector(".flyout-dim").style.display= "block";
}); });
hide.addEventListener("click", function(){ hide.addEventListener("click", function(){
document.querySelector(".flyout").style.transform= "translateX(-50%) scale(0.8)"; document.querySelector(".flyout").style.transform= "translateX(-50%) scale(0.8)";
document.querySelector(".flyout").style.bottom= "-20rem"; document.querySelector(".flyout").style.bottom= "-20rem";
document.querySelector(".flyout-dim").style.display= "none"; document.querySelector(".flyout-dim").style.display= "none";
});
}); });

18
scripts/top.js
View file

@ -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() { function scrollFunction() {
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) { if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
button.style.right = "1rem"; button.style.right = "1rem";
} else { } else {
button.style.right = "-2.5rem"; button.style.right = "-2.5rem";
}
} }
} });

5
ui/functions.php
View file

@ -150,6 +150,9 @@ function flyout($header, $content, $action) {
// Exit button + Div End // Exit button + Div End
echo "<button class='btn alert-default space-top flyout-close'>Close</button> echo "<button class='btn alert-default space-top flyout-close'>Close</button>
</div>"; </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 returns notification html including classes
===== Editors note ================================== ===== Programmers note ==============================
I made this so I didn't have to remake the html I made this so I didn't have to remake the html
portion of the notification, it was annoying. portion of the notification, it was annoying.
This also allows for expanding the system later on! This also allows for expanding the system later on!

14
ui/header.php
View file

@ -1,18 +1,4 @@
<?php <?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 // Check which directory icons are in
if (is_dir("assets/icons/")) { if (is_dir("assets/icons/")) {
$dir = "assets/icons/"; $dir = "assets/icons/";

20
ui/required.php Normal file
View 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>

1
upload.php
View file

@ -11,6 +11,7 @@
</head> </head>
<body> <body>
<?php <?php
include "ui/required.php";
include("ui/header.php"); include("ui/header.php");
// Check if user is logged in // Check if user is logged in