mirror of
https://github.com/Fluffy-Bean/image-gallery.git
synced 2024-12-28 02:16:17 +00:00
Making the website a bit more preformant on weaker phones and ajusting image view
This commit is contained in:
parent
c18d72ccb0
commit
85afe70daa
|
|
@ -1,19 +1,3 @@
|
|||
/*
|
||||
Tags Confirm
|
||||
*/
|
||||
if (isset($_POST['tags_confirm']) && $privilaged) {
|
||||
// Unset all the variables, needed by flyout
|
||||
unset($header, $content, $action);
|
||||
|
||||
|
||||
|
||||
|
||||
header("Location:image.php?id=".$image["id"]."&update=success");
|
||||
} else {
|
||||
header("Location:image.php?id=".$image["id"]."&update=error");
|
||||
}
|
||||
}
|
||||
}
|
||||
<?php
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
|
|
|
|||
1
assets/icons/file-search.svg
Normal file
1
assets/icons/file-search.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="#e8e3e3" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M200,224H56a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h96l56,56V216A8,8,0,0,1,200,224Z" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><polyline points="152 32 152 88 208 88" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline><line x1="143.8" y1="167.8" x2="159.8" y2="183.8" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><circle cx="124" cy="148" r="28" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></circle></svg>
|
||||
|
After Width: | Height: | Size: 776 B |
Binary file not shown.
|
|
@ -6,8 +6,7 @@ footer {
|
|||
|
||||
width: calc(100vh - 2rem));
|
||||
|
||||
background-color: var(--bg); color: var(--fg);
|
||||
backdrop-filter: blur(8px);
|
||||
background-color: var(--bg-3); color: var(--fg);
|
||||
|
||||
border: 0.2rem solid var(--green);
|
||||
/*outline: 0.5rem solid var(--bg);*/
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
--white: #E8E3E3;
|
||||
|
||||
--shadow: 6px 6px 2px #15151588;
|
||||
--rad: 2px;
|
||||
--rad: 0px;
|
||||
|
||||
--square: 33.33%;
|
||||
}
|
||||
|
|
@ -110,8 +110,7 @@ body {
|
|||
|
||||
width: auto;
|
||||
|
||||
background-color: var(--bg);
|
||||
backdrop-filter: blur(8px);
|
||||
background-color: var(--bg-3);
|
||||
|
||||
/*outline: 0.5rem solid var(--bg);*/
|
||||
|
||||
|
|
@ -152,8 +151,7 @@ body {
|
|||
.gallery-root {
|
||||
margin: 0 0 2rem; padding: 0.25rem;
|
||||
|
||||
background-color: var(--bg); color: var(--fg);
|
||||
backdrop-filter: blur(8px);
|
||||
background-color: var(--bg-3); color: var(--fg);
|
||||
|
||||
border: 0.2rem solid var(--green);
|
||||
/*outline: 0.5rem solid var(--bg);*/
|
||||
|
|
@ -332,36 +330,6 @@ body {
|
|||
/*
|
||||
-=-=-= ALERT =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
|
||||
*/
|
||||
|
||||
/*
|
||||
Notification system
|
||||
|
||||
This is the notification system used by the website. Probably a little too much for what its used for
|
||||
*/
|
||||
.notify-root {
|
||||
margin: 0; padding: 0;
|
||||
|
||||
max-width: 621px; width: calc(100% - 2rem);
|
||||
height: auto;
|
||||
|
||||
top: 1rem; left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
position: fixed; z-index: 999;
|
||||
}
|
||||
.notify {
|
||||
margin-bottom: 1rem; padding: 0.5rem;
|
||||
|
||||
width: auto;
|
||||
|
||||
text-align: center;
|
||||
|
||||
display: block;
|
||||
|
||||
border-radius: var(--rad);
|
||||
/*outline: 0.5rem solid var(--bg);*/
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 0.69rem;
|
||||
|
||||
|
|
@ -447,51 +415,6 @@ a.btn {
|
|||
border-radius: var(--rad);
|
||||
}
|
||||
|
||||
/*
|
||||
-=-=-= FLYOUT =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
|
||||
*/
|
||||
/*.flyout {
|
||||
margin: 0; padding: 0.5rem 0.5rem 1.5rem;
|
||||
|
||||
max-width: 621px; width: calc(100% - 2.5rem + 3px);
|
||||
max-height: 20rem; height: auto; min-height: 10rem;
|
||||
|
||||
bottom: -20rem; left: 50%;
|
||||
|
||||
transform: translateX(-50%) scale(0.8);
|
||||
|
||||
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), transform 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: 1;
|
||||
|
||||
display: none;
|
||||
|
||||
background: #15151588;
|
||||
backdrop-filter: blur(5px);
|
||||
|
||||
transition: opacity 2s cubic-bezier(.19,1,.22,1);
|
||||
}*/
|
||||
|
||||
/*
|
||||
-=-=-= FONT SIZES =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -6,14 +6,13 @@ nav {
|
|||
|
||||
width: calc(100vh - 2rem)); height: 2.5rem;
|
||||
|
||||
position: sticky; z-index: 99;
|
||||
position: static; z-index: 99;
|
||||
top: 1rem;
|
||||
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
|
||||
background-color: var(--bg); color: var(--fg);
|
||||
backdrop-filter: blur(8px);
|
||||
background-color: var(--bg-3); color: var(--fg);
|
||||
|
||||
border: 0.2rem solid var(--green);
|
||||
/*outline: 0.5rem solid var(--bg);*/
|
||||
|
|
@ -62,6 +61,9 @@ nav hr {
|
|||
position: fixed;
|
||||
top: auto; bottom: 0; left: 0; right: 0;
|
||||
|
||||
background-color: var(--bg);
|
||||
backdrop-filter: blur(8px);
|
||||
|
||||
border: none;
|
||||
border-top: 3px solid var(--green);
|
||||
border-radius: 0;
|
||||
|
|
|
|||
135
image.php
135
image.php
|
|
@ -41,6 +41,8 @@
|
|||
|-------------------------------------------------------------
|
||||
*/
|
||||
include "ui/required.php";
|
||||
include "ui/nav.php";
|
||||
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
|
|
@ -50,98 +52,132 @@
|
|||
| If ID cannot be obtained, give error. ID going here ^^
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
if (isset($_GET['id'])) {
|
||||
if (isset($_GET['id']) && is_numeric($_GET['id'])) {
|
||||
// Get all image info
|
||||
$image = get_image_info($conn, $_GET['id']);
|
||||
|
||||
// Check if image is avalible
|
||||
if (isset($image['imagename'])) {
|
||||
// Display image
|
||||
$image_path = "images/".$image['imagename'];
|
||||
$image_alt = $image['alt'];
|
||||
$image_present = True;
|
||||
} else {
|
||||
// ID not avalible toast
|
||||
echo "<p class='alert alert-low space-bottom-large'>Could not find image with ID: ".$_GET['id']."</p>";
|
||||
|
||||
// Replacement "no image" image and description
|
||||
$image_path = "assets/no_image.png";
|
||||
$image_alt = "No image could be found, sowwy";
|
||||
?>
|
||||
<script>
|
||||
sniffleAdd('Woops', 'Something happened, either image with the ID <?php echo $_GET['id']; ?> was deleted or never existed, either way it could not be found!', 'var(--red)', '<?php echo $root_dir; ?>assets/icons/cross.svg');
|
||||
</script>
|
||||
<?php
|
||||
$image_present = False;
|
||||
}
|
||||
} else {
|
||||
// No ID toast
|
||||
//echo "<p class='alert alert-low space-bottom-large'>No ID present</p>";
|
||||
|
||||
// Replacement "no image" image and description
|
||||
//$image_path = "assets/no_image.png";
|
||||
//$image_alt = "No image could be found, sowwy";
|
||||
?>
|
||||
<script>
|
||||
sniffleAdd('Where is da image?', 'The link you followed seems to be broken, or there was some other error, who knows!', 'var(--red)', '<?php echo $root_dir; ?>assets/icons/cross.svg');
|
||||
</script>
|
||||
<?php
|
||||
$image_present = False;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| Get all user details
|
||||
| Image verification
|
||||
|-------------------------------------------------------------
|
||||
| This gets the user info from the image
|
||||
| Doublechecking if all information on images exists, if yes
|
||||
| display it, otherwise don't display at all or replace with
|
||||
| blank or filler info
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
if (isset($image['author'])) {
|
||||
$user = get_user_info($conn, $image['author']);
|
||||
if ($image_present) {
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| Check user details
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
if (isset($image['author'])) {
|
||||
// Get all information on the user
|
||||
$user = get_user_info($conn, $image['author']);
|
||||
|
||||
if (isset($user['username'])) {
|
||||
$image_author = $user['username'];
|
||||
} else {
|
||||
$image_author = "Deleted User";
|
||||
}
|
||||
} else {
|
||||
$image_author = "No author";
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| Check if image path is good
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
if (isset($image['imagename'])) {
|
||||
$image_path = "images/".$image['imagename'];
|
||||
$image_alt = $image['alt'];
|
||||
} else {
|
||||
$image_path = "assets/no_image.png";
|
||||
$image_alt = "No image could be found, sowwy";
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| If description not set or empty, replace with filler
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
if (!isset($image_alt) || empty($image_alt)) {
|
||||
$image_alt = "No description avalible";
|
||||
}
|
||||
} else {
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| Image was not present
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
$image_path = "assets/no_image.png";
|
||||
$image_alt = "No image could be found, sowwy";
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| Check user privilge
|
||||
|-------------------------------------------------------------
|
||||
| This requires the user to be logged in or an admin
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
if (image_privilage($image['author']) || is_admin($_SESSION['id'])) {
|
||||
$privilaged = True;
|
||||
} else {
|
||||
$privilaged = False;
|
||||
}
|
||||
|
||||
include "ui/nav.php";
|
||||
?>
|
||||
|
||||
<div class="image-container space-bottom-large">
|
||||
<img class='image' id='<?php echo $image['id']; ?>' src='<?php echo $image_path; ?>' alt='<?php echo $image_alt; ?>'>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| Start of displaying all info on image
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
if ($image_present) {
|
||||
?>
|
||||
|
||||
<div class="image-description default-window">
|
||||
<h2>Description</h2>
|
||||
<?php
|
||||
// Image Description/Alt
|
||||
if (isset($image_alt) && !empty($image_alt)) {
|
||||
echo "<p>".$image_alt."</p>";
|
||||
} else {
|
||||
echo "<p>No description provided</p>";
|
||||
}
|
||||
?>
|
||||
<p><?php echo $image_alt; ?></p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="image-detail flex-down default-window">
|
||||
<h2>Details</h2>
|
||||
<?php
|
||||
// Image ID
|
||||
if (isset($image['author'])) {
|
||||
if (isset($user['username'])) {
|
||||
echo "<p>Author: ".$user['username']."</p>";
|
||||
} else {
|
||||
echo "<p>Author: Deleted User</p>";
|
||||
}
|
||||
} else {
|
||||
echo "<p>Author: No author</p>";
|
||||
}
|
||||
// User
|
||||
echo "<p>Author: ".$image_author."</p>";
|
||||
|
||||
// Image ID
|
||||
echo "<p>ID: ".$image['id']."</p>";
|
||||
|
||||
// File name
|
||||
if (strlen($image['imagename']) > 30) {
|
||||
echo "<p>File Name: ".trim(substr($image['imagename'], 0, 30))."...</p>";
|
||||
echo "<p>File Name: ".substr($image['imagename'], 0, 30)."...</p>";
|
||||
} else {
|
||||
echo "<p>File Name: ".$image['imagename']."</p>";
|
||||
}
|
||||
|
|
@ -195,8 +231,8 @@
|
|||
|-------------------------------------------------------------
|
||||
| Check if user is privilaged,
|
||||
|-------------------------------------------------------------
|
||||
| If yes, grant them access to the Danger zone, or "the place that can fuck things up"
|
||||
| Checking is done prior to here
|
||||
| If yes, grant them access to the Danger zone, or "the place
|
||||
| that can fuck things up"
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
if ($privilaged) {
|
||||
|
|
@ -338,6 +374,13 @@
|
|||
}
|
||||
echo "</div>";
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| End of displaying all user info
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
}
|
||||
?>
|
||||
|
||||
<?php include "ui/footer.php"; ?>
|
||||
|
|
|
|||
55
upload.php
55
upload.php
|
|
@ -33,30 +33,41 @@
|
|||
$(document).ready(function() {
|
||||
$("#uploadSubmit").submit(function(event) {
|
||||
event.preventDefault();
|
||||
// Make form
|
||||
var formData = new FormData();
|
||||
// Check if image avalible
|
||||
var file = $("#image").val();
|
||||
if (file != "") {
|
||||
// Make form
|
||||
var formData = new FormData();
|
||||
|
||||
// Get image
|
||||
var image_data = $("#image").prop("files")[0];
|
||||
formData.append("image", image_data);
|
||||
// Get ALT
|
||||
var alt = $("#alt").val();
|
||||
formData.append("alt", alt);
|
||||
// Get ALT
|
||||
var submit = $("#submit").val();
|
||||
formData.append("submit", submit);
|
||||
// Get image
|
||||
var image_data = $("#image").prop("files")[0];
|
||||
formData.append("image", image_data);
|
||||
// Get ALT
|
||||
var alt = $("#alt").val();
|
||||
formData.append("alt", alt);
|
||||
// Get ALT
|
||||
var submit = $("#submit").val();
|
||||
formData.append("submit", submit);
|
||||
|
||||
// Upload the information
|
||||
$.ajax({
|
||||
url: 'app/image/upload_image.php',
|
||||
type: 'post',
|
||||
data: formData,
|
||||
contentType: false,
|
||||
processData: false,
|
||||
success: function(response){
|
||||
$("#sniffle").html(response);
|
||||
}
|
||||
});
|
||||
// Upload the information
|
||||
$.ajax({
|
||||
url: 'app/image/upload_image.php',
|
||||
type: 'post',
|
||||
data: formData,
|
||||
contentType: false,
|
||||
processData: false,
|
||||
success: function(response){
|
||||
$("#sniffle").html(response);
|
||||
}
|
||||
});
|
||||
|
||||
// Empty values
|
||||
$("#image").val("");
|
||||
$("#alt").val("");
|
||||
$("#submit").val("");
|
||||
} else {
|
||||
sniffleAdd('Gwha!', 'Pls provide image', 'var(--red)', '<?php echo $root_dir; ?>assets/icons/file-search.svg');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue