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

Cleaning up CSS

Browse source
This commit is contained in:
Michał Gdula 2022-07-27 12:46:10 +01:00
parent eac7f15292
commit 58b07d30d4
16 changed files with 90 additions and 195 deletions
Download patch file Download diff file Expand all files Collapse all files

2
account/account.php
View file

@ -12,7 +12,7 @@
<body> <body>
<?php include("../ui/header.php"); ?> <?php include("../ui/header.php"); ?>
<div class="account-root"> <div class="account-root default-window">
<h2>Account settings</h2> <h2>Account settings</h2>
<?php <?php
if (isset($_SESSION["loggedin"]) && $_SESSION["loggedin"] === true) { if (isset($_SESSION["loggedin"]) && $_SESSION["loggedin"] === true) {

2
account/login.php
View file

@ -92,7 +92,7 @@
} }
?> ?>
<div class="login-root"> <div class="login-root default-window">
<h2 class="space-bottom">Login</h2> <h2 class="space-bottom">Login</h2>
<p class="space-bottom">Passwords are important to keep safe. Don't tell anyone your password, not even Fluffy!</p> <p class="space-bottom">Passwords are important to keep safe. Don't tell anyone your password, not even Fluffy!</p>
<form class="flex-down between" method="POST" action="login.php" enctype="multipart/form-data"> <form class="flex-down between" method="POST" action="login.php" enctype="multipart/form-data">

2
account/password-reset.php
View file

@ -75,7 +75,7 @@
} }
?> ?>
<div class="password-reset-root"> <div class="password-reset-root default-window">
<h2 class="space-bottom">Reset Password</h2> <h2 class="space-bottom">Reset Password</h2>
<p class="space-bottom">After reset, you will be kicked out to login again</p> <p class="space-bottom">After reset, you will be kicked out to login again</p>
<form class="flex-down between" method="POST" action="password-reset.php" enctype="multipart/form-data"> <form class="flex-down between" method="POST" action="password-reset.php" enctype="multipart/form-data">

2
account/signup.php
View file

@ -104,7 +104,7 @@
} }
?> ?>
<div class="signup-root"> <div class="signup-root default-window">
<h2 class="space-bottom">Make account</h2> <h2 class="space-bottom">Make account</h2>
<p class="space-bottom">And amazing things happened here...</p> <p class="space-bottom">And amazing things happened here...</p>
<form class="flex-down between" method="POST" action="signup.php" enctype="multipart/form-data"> <form class="flex-down between" method="POST" action="signup.php" enctype="multipart/form-data">

16
css/about.css
View file

@ -1,16 +0,0 @@
/*
-=-=-= ABOUT =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
*/
.about-root {
margin: 0 auto 2rem; padding: 0.5rem;
max-width: 621px; width: calc(100% - 2rem);
background-color: var(--bg); color: var(--fg);
border: 0.2rem solid var(--green);
outline: 0.5rem solid var(--bg);
border-radius: var(--rad);
box-shadow: var(--shadow);
}

16
css/account.css
View file

@ -1,16 +0,0 @@
/*
-=-=-= Account =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
*/
.account-root {
margin: 0 auto 2rem; padding: 0.5rem;
max-width: 621px; width: calc(100% - 2rem);
background-color: var(--bg); color: var(--fg);
border: 0.2rem solid var(--green);
outline: 0.5rem solid var(--bg);
border-radius: var(--rad);
box-shadow: var(--shadow);
}

16
css/edit.css
View file

@ -1,16 +0,0 @@
/*
-=-=-= EDIT =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
*/
.edit-root {
margin: 0 auto 2rem; padding: 0.5rem;
max-width: 621px; width: calc(100% - 2rem);
background-color: var(--bg); color: var(--fg);
border: 0.2rem solid var(--red);
outline: 0.5rem solid var(--bg);
border-radius: var(--rad);
box-shadow: var(--shadow);
}

26
css/image.css
View file

@ -36,39 +36,13 @@
} }
.image-description { .image-description {
margin: 0 0 2rem; padding: 0.5rem;
background-color: var(--bg); color: var(--fg);
border: 0.2rem solid var(--green); border: 0.2rem solid var(--green);
outline: 0.5rem solid var(--bg);
border-radius: var(--rad);
box-shadow: var(--shadow);
} }
.image-detail { .image-detail {
margin: 0 0 2rem; padding: 0.5rem;
background-color: var(--bg); color: var(--fg);
word-wrap: break-word;
border: 0.2rem solid var(--green); border: 0.2rem solid var(--green);
outline: 0.5rem solid var(--bg);
border-radius: var(--rad);
box-shadow: var(--shadow);
} }
.danger-zone { .danger-zone {
margin: 0 0 2rem; padding: 0.5rem;
background-color: var(--bg); color: var(--fg);
border: 0.2rem solid var(--red); border: 0.2rem solid var(--red);
outline: 0.5rem solid var(--bg);
border-radius: var(--rad);
box-shadow: var(--shadow);
} }

16
css/login.css
View file

@ -1,16 +0,0 @@
/*
-=-=-= LONGIN =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
*/
.login-root {
margin: 0 auto 2rem; padding: 0.5rem;
max-width: 621px; width: calc(100% - 2rem);
background-color: var(--bg); color: var(--fg);
border: 0.2rem solid var(--green);
outline: 0.5rem solid var(--bg);
border-radius: var(--rad);
box-shadow: var(--shadow);
}

71
css/master.css
View file

@ -3,15 +3,6 @@
@import "gallery.css"; @import "gallery.css";
@import "image.css"; @import "image.css";
@import "edit.css";
@import "upload.css";
@import "about.css";
@import "signup.css";
@import "login.css";
@import "account.css";
@import "password-reset.css";
:root { :root {
--bg: #151515df; --bg: #151515df;
@ -135,13 +126,11 @@ form * {
} }
.btn:hover { .btn:hover {
outline: var(--white) 3px solid; outline: var(--white) 3px solid;
color: var(--fg);
} }
a.btn { a.btn {
text-align: center; text-align: center;
} }
.link:hover {
color: var(--orange);
}
.space-bottom { .space-bottom {
margin-bottom: 1rem; margin-bottom: 1rem;
@ -164,17 +153,6 @@ a.btn {
display: inline; display: inline;
} }
.default-window {
margin: 0 auto 2rem; padding: 0.5rem;
background-color: var(--bg); color: var(--fg);
outline: 0.5rem solid var(--bg);
border-radius: var(--rad);
box-shadow: var(--shadow);
}
/* /*
-=-=-= TEXT SIZES =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -=-=-= TEXT SIZES =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
*/ */
@ -206,6 +184,9 @@ p, a {
margin: 0 0 0.5rem 0; margin: 0 0 0.5rem 0;
font-family: "Fira Code", monospace; font-family: "Fira Code", monospace;
} }
a:hover {
color: var(--orange);
}
/* /*
-=-=-= Back to top button =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -=-=-= Back to top button =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
@ -237,3 +218,47 @@ p, a {
object-position: center; object-position: center;
} }
/*
-=-=-= DIV DECORATIONS =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
*/
.default-window {
margin: 0 0 2rem; padding: 0.5rem;
/*max-width: 621px;*/ width: calc(100% - 2rem);
background-color: var(--bg);
outline: 0.5rem solid var(--bg);
border-radius: var(--rad);
box-shadow: var(--shadow);
}
.upload-root {
border: 0.2rem solid var(--green);
}
.edit-root {
border: 0.2rem solid var(--red);
}
.signup-root {
border: 0.2rem solid var(--green);
}
.password-reset-root {
border: 0.2rem solid var(--red);
}
.account-root {
border: 0.2rem solid var(--green);
}
.login-root {
border: 0.2rem solid var(--green);
}
.about-root {
border: 0.2rem solid var(--green);
}

16
css/password-reset.css
View file

@ -1,16 +0,0 @@
/*
-=-=-= LONGIN =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
*/
.password-reset-root {
margin: 0 auto 2rem; padding: 0.5rem;
max-width: 621px; width: calc(100% - 2rem);
background-color: var(--bg); color: var(--fg);
border: 0.2rem solid var(--green);
outline: 0.5rem solid var(--bg);
border-radius: var(--rad);
box-shadow: var(--shadow);
}

16
css/signup.css
View file

@ -1,16 +0,0 @@
/*
-=-=-= SIGN UP =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
*/
.signup-root {
margin: 0 auto 2rem; padding: 0.5rem;
max-width: 621px; width: calc(100% - 2rem);
background-color: var(--bg); color: var(--fg);
border: 0.2rem solid var(--green);
outline: 0.5rem solid var(--bg);
border-radius: var(--rad);
box-shadow: var(--shadow);
}

16
css/upload.css
View file

@ -1,16 +0,0 @@
/*
-=-=-= UPLOAD =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
*/
.upload-root {
margin: 0 auto 2rem; padding: 0.5rem;
max-width: 621px; width: calc(100% - 2rem);
background-color: var(--bg); color: var(--fg);
border: 0.2rem solid var(--green);
outline: 0.5rem solid var(--bg);
border-radius: var(--rad);
box-shadow: var(--shadow);
}

12
edit.php
View file

@ -23,10 +23,10 @@
$image_results = mysqli_query($conn, $get_image); $image_results = mysqli_query($conn, $get_image);
$image = mysqli_fetch_assoc($image_results); $image = mysqli_fetch_assoc($image_results);
// Check if user owns image // Updating alt
if (isset($_SESSION['id']) && $image['author'] == $_SESSION['id'] || $_SESSION['id'] == 1) { if (isset($_SESSION['id']) && $image['author'] == $_SESSION['id'] || $_SESSION['id'] == 1) {
// If no errors // If no errors
if (empty($error)) { if (isset($_POST['alt']) || $_POST['alt'] != "") {
// getting ready forSQL asky asky // getting ready forSQL asky asky
$sql = "UPDATE swag_table SET alt=? WHERE id=?"; $sql = "UPDATE swag_table SET alt=? WHERE id=?";
@ -45,6 +45,8 @@
$error = "Something went fuckywucky, please try later"; $error = "Something went fuckywucky, please try later";
} }
} }
} else {
header("Location:https://superdupersecteteuploadtest.fluffybean.gay/image.php?id=".$_POST['id']."&update=skip");
} }
} else { } else {
$error = "You do not have edit rights"; $error = "You do not have edit rights";
@ -56,12 +58,12 @@
} }
?> ?>
<div class="edit-root"> <div class="edit-root default-window">
<h2>Modify Information</h2> <h2>Modify Information</h2>
<p class="space-below">This is a dangerous place to step foot into... tread carefully.</p> <p class="space-below">This is a dangerous place to step foot into... tread carefully.</p>
<form class="flex-down between" method="POST" action="edit.php" enctype="multipart/form-data"> <form class="flex-down between" method="POST" action="edit.php" enctype="multipart/form-data">
<input class="btn alert-default space-bottom-large" type="text" name="alt" placeholder="Description/Alt for image"> <input class="btn alert-default space-bottom-large" type="text" name="alt" placeholder="Description/Alt for image">
<?php echo "<button class='btn alert-default' type='submit' name='id' value=".$_GET["id"]."><img class='svg' src='assets/icons/edit.svg'>Update information</button>"; ?> <?php echo "<button class='btn alert-default' type='submit' name='id' value=".$_GET["id"]."><img class='svg' src='assets/icons/edit.svg'>Update information</button>"; ?>
</form> </form>
<?php <?php
if (isset($error)) { if (isset($error)) {

54
image.php
View file

@ -18,6 +18,8 @@
// Update toast // Update toast
if ($_GET["update"] == "success") { if ($_GET["update"] == "success") {
echo "<p class='alert alert-high space-bottom-large'>Information updated</p>"; echo "<p class='alert alert-high space-bottom-large'>Information updated</p>";
} elseif ($_GET["update"] == "skip") {
echo "<p class='alert alert-default space-bottom-large'>No alt, skip</p>";
} }
// Getting all image info from table // Getting all image info from table
@ -67,7 +69,7 @@
<?php echo "<img class='image' id='".$image['id']."' src='".$image_path."' alt='".$image_alt."'>"; ?> <?php echo "<img class='image' id='".$image['id']."' src='".$image_path."' alt='".$image_alt."'>"; ?>
</div> </div>
<div class="image-description"> <div class="image-description default-window">
<h2>Description</h2> <h2>Description</h2>
<?php <?php
// Image Description/Alt // Image Description/Alt
@ -76,11 +78,10 @@
}else{ }else{
echo "<p>".$image_alt."</p>"; echo "<p>".$image_alt."</p>";
} }
?> ?>
</div> </div>
<div class="image-detail flex-down"> <div class="image-detail flex-down default-window">
<h2>Details</h2> <h2>Details</h2>
<?php <?php
// Image ID // Image ID
@ -113,35 +114,40 @@
<?php <?php
if (isset($_SESSION['id']) && $image['author'] == $_SESSION['id'] || $_SESSION['id'] == 1) { if (isset($_SESSION['id']) && $image['author'] == $_SESSION['id'] || $_SESSION['id'] == 1) {
echo "<div class='danger-zone flex-down'>"; // Deleting image
if (isset($_POST['delete'])) {
// Delete from table
$image_delete_request = "DELETE FROM swag_table WHERE id =".$image['id'];
$image_delete = mysqli_query($conn,$image_delete_request);
if ($image_delete) {
// See if image is in the directory
if (is_file("images/".$image['imagename'])) {
unlink("images/".$image['imagename']);
}
// Delete thumbnail if exitsts
if (is_file("images/thumbnails/".$image['imagename'])) {
unlink("images/thumbnails/".$image['imagename']);
}
header("Location:index.php?del=true&id=".$image['id']);
} else {
$error = "Could not delete image";
}
}
// Delete form
echo "<div class='danger-zone flex-down default-window'>";
echo "<h2>Danger zone</h2>"; echo "<h2>Danger zone</h2>";
// Image hover details // Image hover details
echo "<form class='detail' method='POST' enctype='multipart/form-data'>"; 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>"; 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>"; echo "</form>";
// Check if query is set // Edit image button
if (isset($_POST['delete'])) {
// Try deleting image
if(unlink("images/".$image['imagename']) && unlink("images/thumbnails/".$image['imagename'])) {
// If deleted, delete from Table
$image_delete_request = "DELETE FROM swag_table WHERE id =".$image['id'];
$image_delete = mysqli_query($conn,$image_delete_request);
if ($image_delete) {
// Deleted image
header("Location:index.php?del=true&id=".$image['id']);
}
} else {
// Could not delete from file
echo "<p class='alert alert-fail' id='deleted'>Error: Coult not delete image</p>";
}
}
echo "<a class='btn alert-low space-top' href='https://superdupersecteteuploadtest.fluffybean.gay/edit.php?id=".$image['id']."'><img class='svg' src='assets/icons/edit.svg'>Modify image content</a>"; echo "<a class='btn alert-low space-top' href='https://superdupersecteteuploadtest.fluffybean.gay/edit.php?id=".$image['id']."'><img class='svg' src='assets/icons/edit.svg'>Modify image content</a>";
echo "</div>"; echo "</div>";
} else {
} }
?> ?>

2
info/about.php
View file

@ -12,7 +12,7 @@
<body> <body>
<?php include("../ui/header.php"); ?> <?php include("../ui/header.php"); ?>
<div class="about-root"> <div class="about-root default-window">
<h2 id="about">What is Fluffys Amazing Gallery?</h2> <h2 id="about">What is Fluffys Amazing Gallery?</h2>
<p>Fluffys Amazing Gallery, or F.A.G for short, is a project by Fluffy Bean. It started as a project to manage the gallery on my main page, but quickly turned into its own thing.</p> <p>Fluffys Amazing Gallery, or F.A.G for short, is a project by Fluffy Bean. It started as a project to manage the gallery on my main page, but quickly turned into its own thing.</p>
<p>What do I want this to become? Good question! I have no clue. All I know is that I want to make this open-source and free to host on your own server once I'm finished with this.</p> <p>What do I want this to become? Good question! I have no clue. All I know is that I want to make this open-source and free to host on your own server once I'm finished with this.</p>