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

Random fixes

Browse source
This commit is contained in:
Michał Gdula 2022-09-22 19:39:15 +00:00
parent 0aed7f1cb9
commit bc7dfb481a
7 changed files with 91 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Sniffle/sniffle.css
View file

@ -66,7 +66,7 @@
z-index: 1; z-index: 1;
transform: scale(1); transform: scale(1);
opacity: 1; opacity: 1;
transition: transform 1s cubic-bezier(.19,1,.22,1), opacity 0.25s cubic-bezier(.19,1,.22,1); transition: transform 1s cubic-bezier(.08,.82,.16,1.01), opacity 0.25s cubic-bezier(.08,.82,.16,1.01);
} }
.sniffle-notification:nth-of-type(2) { .sniffle-notification:nth-of-type(2) {
z-index: -1; z-index: -1;

9
account.php
View file

@ -24,12 +24,11 @@
if ($user_info->is_loggedin()) { if ($user_info->is_loggedin()) {
?> ?>
<div class="profile-settings"> <div class="profile-settings">
<h2>Profile Settings</h2> <h2>Profile</h2>
<h3>Profile Picture</h3>
<div class="pfp-upload"> <div class="pfp-upload">
<form id="pfpForm" method="POST" enctype="multipart/form-data"> <form id="pfpForm" method="POST" enctype="multipart/form-data">
<h3>Profile Picture</h3>
<input id="image" class="btn btn-neutral" type="file" placeholder="select image UwU"> <input id="image" class="btn btn-neutral" type="file" placeholder="select image UwU">
<br>
<button id="pfpSubmit" class="btn btn-good" type="submit"><img class="svg" src="assets/icons/upload.svg">Upload Image</button> <button id="pfpSubmit" class="btn btn-good" type="submit"><img class="svg" src="assets/icons/upload.svg">Upload Image</button>
</form> </form>
<?php <?php
@ -81,7 +80,7 @@
</div> </div>
<div class="account-root"> <div class="account-root">
<h2>Account Settings</h2> <h2>Account</h2>
<a class='btn btn-bad' href='password-reset.php'><img class='svg' src='assets/icons/password.svg'>Reset Password</a> <a class='btn btn-bad' href='password-reset.php'><img class='svg' src='assets/icons/password.svg'>Reset Password</a>
<button class="btn btn-bad" onclick="deleteAccount()"><img class='svg' src='assets/icons/trash.svg'>Delete account</button> <button class="btn btn-bad" onclick="deleteAccount()"><img class='svg' src='assets/icons/trash.svg'>Delete account</button>
<br> <br>
@ -149,7 +148,7 @@
if ($user_info->is_admin($conn, $_SESSION['id'])) { if ($user_info->is_admin($conn, $_SESSION['id'])) {
?> ?>
<div class="admin-root"> <div class="admin-root">
<h2>Admin controlls</h2> <h2>Admin</h2>
<h3>Invite Codes</h3> <h3>Invite Codes</h3>
<?php <?php
$token_request = mysqli_query($conn, "SELECT * FROM tokens WHERE used = 0"); $token_request = mysqli_query($conn, "SELECT * FROM tokens WHERE used = 0");

89
css/main.css
View file

@ -21,7 +21,7 @@
--white: #E8E3E3; --white: #E8E3E3;
--accent: #8C977D; --accent: #8C977D;
--shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); --shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
--rad: 0.3rem; --rad: 0.4rem;
} }
/* /*
@ -35,7 +35,7 @@ nav {
width: calc(100% - 1.4rem); width: calc(100% - 1.4rem);
background-color: #151515; background-color: #151515;
color: #E8E3E3; color: #E8E3E3;
border-radius: 0.3rem; border-radius: 0.4rem;
border: 0.2rem solid #8C977D; border: 0.2rem solid #8C977D;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
display: flex; display: flex;
@ -213,7 +213,7 @@ nav .btn {
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
border: 0.2rem solid #8C977D; border: 0.2rem solid #8C977D;
border-radius: 0.3rem; border-radius: 0.4rem;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
} }
@ -224,7 +224,7 @@ nav .btn {
max-width: calc(20% - 0.5rem); max-width: calc(20% - 0.5rem);
min-width: calc(20% - 0.5rem); min-width: calc(20% - 0.5rem);
background-color: #151515; background-color: #151515;
border-radius: -0.2rem; border-radius: -0.1rem;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
flex: 1 0 150px; flex: 1 0 150px;
@ -267,7 +267,7 @@ nav .btn {
object-fit: cover; object-fit: cover;
-o-object-position: center; -o-object-position: center;
object-position: center; object-position: center;
border-radius: -0.2rem; border-radius: -0.1rem;
} }
.nsfw-blur { .nsfw-blur {
@ -336,11 +336,11 @@ nav .btn {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
border-radius: 0.3rem; border-radius: 0.4rem;
z-index: 1; z-index: 1;
} }
.fullscreen-image button { .fullscreen-image button {
padding: 0; padding: 0.25rem;
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
position: absolute; position: absolute;
@ -349,7 +349,7 @@ nav .btn {
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
border: none; border: none;
border-radius: 0.3rem; border-radius: 0.4rem;
transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1); transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
background-color: #121212; background-color: #121212;
z-index: 2; z-index: 2;
@ -375,7 +375,7 @@ nav .btn {
background-color: rgba(21, 21, 21, 0.7333333333); background-color: rgba(21, 21, 21, 0.7333333333);
-webkit-backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border-radius: 0.3rem; border-radius: 0.4rem;
transition: max-height 0.15s cubic-bezier(0.19, 1, 0.22, 1); transition: max-height 0.15s cubic-bezier(0.19, 1, 0.22, 1);
} }
@ -390,11 +390,12 @@ nav .btn {
width: auto; width: auto;
max-height: inherit; max-height: inherit;
height: auto; height: auto;
border-radius: 0.3rem; border-radius: 0.4rem;
transition: opacity 0.5s; transition: opacity 0.5s;
} }
.preview-button { .preview-button {
padding: 0.25rem;
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
position: absolute; position: absolute;
@ -403,9 +404,9 @@ nav .btn {
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
border: none; border: none;
border-radius: 0.3rem; border-radius: 0.4rem;
transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1); transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
background-color: #121212; background-color: rgba(21, 21, 21, 0.7333333333);
z-index: 2; z-index: 2;
} }
.preview-button img { .preview-button img {
@ -424,7 +425,7 @@ nav .btn {
width: calc(100% - 1.4rem); width: calc(100% - 1.4rem);
background-color: #151515; background-color: #151515;
color: #E8E3E3; color: #E8E3E3;
border-radius: 0.3rem; border-radius: 0.4rem;
border: 0.2rem solid #8C977D; border: 0.2rem solid #8C977D;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
} }
@ -454,7 +455,7 @@ nav .btn {
width: calc(100% - 1.4rem); width: calc(100% - 1.4rem);
background-color: #151515; background-color: #151515;
color: #E8E3E3; color: #E8E3E3;
border-radius: 0.3rem; border-radius: 0.4rem;
border: 0.2rem solid #8C977D; border: 0.2rem solid #8C977D;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
} }
@ -507,7 +508,7 @@ nav .btn {
width: calc(100% - 1.4rem); width: calc(100% - 1.4rem);
background-color: #151515; background-color: #151515;
color: #E8E3E3; color: #E8E3E3;
border-radius: 0.3rem; border-radius: 0.4rem;
border: 0.2rem solid #8C977D; border: 0.2rem solid #8C977D;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
} }
@ -544,7 +545,7 @@ nav .btn {
padding: 0.5rem; padding: 0.5rem;
display: block; display: block;
background-color: #8C977D; background-color: #8C977D;
border-radius: calc(0.3rem - (0.5rem + 3px)); border-radius: -0.3rem;
font-family: "Secular One", sans-serif; font-family: "Secular One", sans-serif;
} }
.tag::before { .tag::before {
@ -557,7 +558,7 @@ nav .btn {
width: calc(100% - 1.4rem); width: calc(100% - 1.4rem);
background-color: #151515; background-color: #151515;
color: #E8E3E3; color: #E8E3E3;
border-radius: 0.3rem; border-radius: 0.4rem;
border: 0.2rem solid #B66467; border: 0.2rem solid #B66467;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
} }
@ -592,7 +593,7 @@ nav .btn {
width: calc(100% - 1.4rem); width: calc(100% - 1.4rem);
background-color: #151515; background-color: #151515;
color: #E8E3E3; color: #E8E3E3;
border-radius: 0.3rem; border-radius: 0.4rem;
border: 0.2rem solid #8C977D; border: 0.2rem solid #8C977D;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
margin: 3rem auto 1rem auto; margin: 3rem auto 1rem auto;
@ -628,7 +629,7 @@ nav .btn {
left: 6rem; left: 6rem;
top: -3rem; top: -3rem;
transform: translateX(-50%); transform: translateX(-50%);
border-radius: 0.3rem; border-radius: 0.4rem;
border: #8C977D 0.2rem solid; border: #8C977D 0.2rem solid;
background-color: #151515; background-color: #151515;
} }
@ -682,7 +683,7 @@ nav .btn {
width: calc(100% - 1.4rem); width: calc(100% - 1.4rem);
background-color: #151515; background-color: #151515;
color: #E8E3E3; color: #E8E3E3;
border-radius: 0.3rem; border-radius: 0.4rem;
border: 0.2rem solid #8C977D; border: 0.2rem solid #8C977D;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
} }
@ -717,7 +718,7 @@ nav .btn {
width: calc(100% - 1.4rem); width: calc(100% - 1.4rem);
background-color: #151515; background-color: #151515;
color: #E8E3E3; color: #E8E3E3;
border-radius: 0.3rem; border-radius: 0.4rem;
border: 0.2rem solid #8C977D; border: 0.2rem solid #8C977D;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
} }
@ -742,27 +743,41 @@ nav .btn {
} }
.pfp-upload { .pfp-upload {
margin-bottom: 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.pfp-upload > img { .pfp-upload > img {
margin-left: 1rem; margin-left: 0.5rem;
width: 7.25rem; width: 7.8rem;
height: 7.25rem; height: 7.8rem;
-o-object-fit: cover; -o-object-fit: cover;
object-fit: cover; object-fit: cover;
border-radius: calc(0.3rem - (0.5rem + 3px)); border-radius: -0.3rem;
background-color: #121212; background-color: #121212;
} }
.pfp-upload form > * {
margin: 0 0 0.5rem 0;
}
.pfp-upload form > *:last-child {
margin: 0 0 0 0;
}
@media (max-width: 621px) {
.pfp-upload {
display: flex;
flex-direction: column-reverse;
}
.pfp-upload > img {
margin: 0 auto 1rem;
}
}
.account-root { .account-root {
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 0.5rem 0.5rem 0 0.5rem; padding: 0.5rem 0.5rem 0 0.5rem;
width: calc(100% - 1.4rem); width: calc(100% - 1.4rem);
background-color: #151515; background-color: #151515;
color: #E8E3E3; color: #E8E3E3;
border-radius: 0.3rem; border-radius: 0.4rem;
border: 0.2rem solid #8C977D; border: 0.2rem solid #8C977D;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
} }
@ -792,7 +807,7 @@ nav .btn {
width: calc(100% - 1.4rem); width: calc(100% - 1.4rem);
background-color: #151515; background-color: #151515;
color: #E8E3E3; color: #E8E3E3;
border-radius: 0.3rem; border-radius: 0.4rem;
border: 0.2rem solid #8C977D; border: 0.2rem solid #8C977D;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
} }
@ -840,7 +855,7 @@ nav .btn {
display: none; display: none;
flex-direction: column; flex-direction: column;
background-color: #151515; background-color: #151515;
border-radius: calc(0.3rem - (0.5rem + 3px)); border-radius: -0.3rem;
} }
.log { .log {
@ -887,7 +902,7 @@ nav .btn {
display: none; display: none;
flex-direction: column; flex-direction: column;
background-color: #151515; background-color: #151515;
border-radius: calc(0.3rem - (0.5rem + 3px)); border-radius: -0.3rem;
} }
.ban { .ban {
@ -941,7 +956,7 @@ nav .btn {
display: none; display: none;
flex-direction: column; flex-direction: column;
background-color: #151515; background-color: #151515;
border-radius: calc(0.3rem - (0.5rem + 3px)); border-radius: -0.3rem;
} }
.user { .user {
@ -996,7 +1011,7 @@ nav .btn {
width: calc(100% - 1.4rem); width: calc(100% - 1.4rem);
background-color: #151515; background-color: #151515;
color: #E8E3E3; color: #E8E3E3;
border-radius: 0.3rem; border-radius: 0.4rem;
border: 0.2rem solid #8C977D; border: 0.2rem solid #8C977D;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
display: none; display: none;
@ -1027,7 +1042,7 @@ nav .btn {
width: calc(100% - 1.4rem); width: calc(100% - 1.4rem);
background-color: #151515; background-color: #151515;
color: #E8E3E3; color: #E8E3E3;
border-radius: 0.3rem; border-radius: 0.4rem;
border: 0.2rem solid #8C977D; border: 0.2rem solid #8C977D;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
} }
@ -1062,7 +1077,7 @@ nav .btn {
width: calc(100% - 1.4rem); width: calc(100% - 1.4rem);
background-color: #151515; background-color: #151515;
color: #E8E3E3; color: #E8E3E3;
border-radius: 0.3rem; border-radius: 0.4rem;
border: 0.2rem solid #B66467; border: 0.2rem solid #B66467;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
} }
@ -1166,7 +1181,7 @@ body * {
font-family: "Secular One", sans-serif; font-family: "Secular One", sans-serif;
text-decoration: none; text-decoration: none;
border: none; border: none;
border-radius: calc(0.3rem - (0.5rem + 3px)); border-radius: -0.3rem;
transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1); transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
} }
.btn:hover { .btn:hover {
@ -1182,7 +1197,7 @@ body * {
text-decoration: none; text-decoration: none;
background-color: #E8E3E3; background-color: #E8E3E3;
border: none; border: none;
border-radius: calc(0.3rem - (0.5rem + 3px)); border-radius: -0.3rem;
} }
.btn:where(input[type=file])::file-selector-button { .btn:where(input[type=file])::file-selector-button {
margin: -0.25rem 0.5rem -0.25rem -0.25rem; margin: -0.25rem 0.5rem -0.25rem -0.25rem;
@ -1192,7 +1207,7 @@ body * {
text-decoration: none; text-decoration: none;
background-color: #E8E3E3; background-color: #E8E3E3;
border: none; border: none;
border-radius: calc(0.3rem - (0.5rem + 3px)); border-radius: -0.3rem;
} }
a.btn { a.btn {

4
css/main.scss
View file

@ -78,7 +78,7 @@ body {
text-decoration: none; text-decoration: none;
border: none; border: none;
border-radius: calc($rad - (0.5rem + 3px)); border-radius: calc($rad - 0.7rem);
transition: outline 0.1s cubic-bezier(.19, 1, .22, 1); transition: outline 0.1s cubic-bezier(.19, 1, .22, 1);
@ -102,7 +102,7 @@ body {
background-color: $white; background-color: $white;
border: none; border: none;
border-radius: calc($rad - (0.5rem + 3px)); border-radius: calc($rad - 0.7rem);
} }
} }

41
css/scss/_body.scss
View file

@ -214,7 +214,7 @@
} }
button { button {
padding: 0; padding: 0.25rem;
width: 2rem; height: 2rem; width: 2rem; height: 2rem;
@ -288,6 +288,8 @@
} }
.preview-button { .preview-button {
padding: 0.25rem;
width: 2rem; height: 2rem; width: 2rem; height: 2rem;
position: absolute; position: absolute;
@ -302,7 +304,7 @@
transition: outline 0.1s cubic-bezier(.19, 1, .22, 1); transition: outline 0.1s cubic-bezier(.19, 1, .22, 1);
background-color: $black; background-color: $bg-alt;
z-index: +2; z-index: +2;
@ -381,7 +383,7 @@
background-color: $page-accent; background-color: $page-accent;
border-radius: calc($rad - (0.5rem + 3px)); border-radius: calc($rad - 0.7rem);
font-family: $font-body; font-family: $font-body;
@ -492,23 +494,38 @@
@include defaultFont(); @include defaultFont();
} }
.pfp-upload { .pfp-upload {
margin-bottom: 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
& > img { & > img {
margin-left: 1rem; margin-left: 0.5rem;
width: 7.25rem; width: 7.8rem;
height: 7.25rem; height: 7.8rem;
object-fit: cover; object-fit: cover;
border-radius: calc($rad - (0.5rem + 3px)); border-radius: calc($rad - 0.7rem);
background-color: $black; background-color: $black;
} }
form > * {
margin: 0 0 0.5rem 0;
}
form > *:last-child {
margin: 0 0 0 0;
}
}
@media (max-width: 621px) {
.pfp-upload {
display: flex;
flex-direction: column-reverse;
& > img {
margin: 0 auto 1rem;
}
}
} }
.account-root { .account-root {
@ -546,7 +563,7 @@
display: none; flex-direction: column; display: none; flex-direction: column;
background-color: $bg; background-color: $bg;
border-radius: calc($rad - (0.5rem + 3px)); border-radius: calc($rad - 0.7rem);
} }
.log { .log {
min-width: 769px; min-width: 769px;
@ -598,7 +615,7 @@
display: none; flex-direction: column; display: none; flex-direction: column;
background-color: $bg; background-color: $bg;
border-radius: calc($rad - (0.5rem + 3px)); border-radius: calc($rad - 0.7rem);
} }
.ban { .ban {
min-width: 769px; min-width: 769px;
@ -656,7 +673,7 @@
display: none; flex-direction: column; display: none; flex-direction: column;
background-color: $bg; background-color: $bg;
border-radius: calc($rad - (0.5rem + 3px)); border-radius: calc($rad - 0.7rem);
} }
.user { .user {
min-width: 769px; min-width: 769px;

2
css/scss/_variables.scss
View file

@ -13,7 +13,7 @@ $white: #E8E3E3;
$page-accent: #8C977D; $page-accent: #8C977D;
$shadow: 6px 6px 2px #15151566; $shadow: 6px 6px 2px #15151566;
$rad: 0.3rem; $rad: 0.4rem;
$weight-bold: 621; $weight-bold: 621;
$weight-normal: 400; $weight-normal: 400;

4
image.php
View file

@ -184,8 +184,8 @@
<div> <div>
<?php <?php
// User // User
if ($user_info->is_admin($conn, $image['author'])) { if (empty($image['author'])) {
echo "<p>Author: <a href='profile.php?user=".$image['author']."' class='link'>".$image_author."</a><img class='svg' style='margin: 0 0 0.1rem 0.2rem;' src='assets/icons/crown-simple.svg'></p>"; echo "<p>Author: ".$image_author."</p>";
} else { } else {
echo "<p>Author: <a href='profile.php?user=".$image['author']."' class='link'>".$image_author."</a></p>"; echo "<p>Author: <a href='profile.php?user=".$image['author']."' class='link'>".$image_author."</a></p>";
} }