Moving nav bar to bottom when smol screen and fixing broken code on seperate pages

This commit is contained in:
Michał Gdula 2022-08-09 11:14:30 +01:00
parent bf449271e6
commit 2cffd0debd
11 changed files with 130 additions and 81 deletions

View file

@ -31,7 +31,7 @@
and a text div .sniffle-content
*/
.sniffle-notification {
margin-bottom: 1rem; padding: 0.5rem;
margin-bottom: 0.5rem; padding: 0.5rem;
max-width: calc(100% - 1rem); min-height: 2.5rem;
@ -53,7 +53,6 @@
cursor: pointer;
}
/*
Notification content Root
@ -86,8 +85,8 @@
.sniffle-header {
margin: 0 0 0.25rem 0; padding: 0;
font-size: 16px;
font-weight: bold;
font-size: 14px;
font-weight: 621;
color: var(--fg);
}
@ -96,10 +95,10 @@
*/
.sniffle-description {
margin: 0; padding: 0;
font-size: 14px;
font-size: 15px;
word-wrap: break-word;
font-weight: bold;
font-weight: 300;
color: var(--fg);
}

View file

@ -1,5 +1,3 @@
<?php include "../ui/required.php"; ?>
<!DOCTYPE html>
<html>
<head>
@ -13,14 +11,19 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&amp;display=swap">
<!-- JQuery -->
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Sniffle script! -->
<script src="../Sniffle/sniffle.js"></script>
<link rel='stylesheet' href='../Sniffle/sniffle.css'>
<!-- Flyout script! -->
<script src="../Flyout/flyout.js"></script>
<link rel='stylesheet' href='../Flyout/flyout.css'>
</head>
<body>
<?php
include "../ui/required.php";
include "../ui/nav.php";
?>
@ -54,9 +57,6 @@
?>
</div>
<?php
include "../ui/top.html";
include "../ui/footer.php";
?>
<?php include "../ui/footer.php"; ?>
</body>
</html>

View file

@ -1,5 +1,3 @@
<?php include "../ui/required.php"; ?>
<!DOCTYPE html>
<html>
<head>
@ -13,14 +11,19 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&amp;display=swap">
<!-- JQuery -->
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Sniffle script! -->
<script src="../Sniffle/sniffle.js"></script>
<link rel='stylesheet' href='../Sniffle/sniffle.css'>
<!-- Flyout script! -->
<script src="../Flyout/flyout.js"></script>
<link rel='stylesheet' href='../Flyout/flyout.css'>
</head>
<body>
<?php
include "../ui/required.php";
include "../ui/nav.php";
// Initialize the session
@ -124,9 +127,6 @@
<a class='btn alert-default space-top-large' href='https://superdupersecteteuploadtest.fluffybean.gay/account/signup.php'><img class="svg" src="../assets/icons/sign-in.svg">Need an account? Sign up!</a>
</div>
<?php
include "../ui/top.html";
include "../ui/footer.php";
?>
<?php include "../ui/footer.php"; ?>
</body>
</html>

View file

@ -1,5 +1,3 @@
<?php include "../ui/required.php"; ?>
<!DOCTYPE html>
<html>
<head>
@ -13,14 +11,19 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&amp;display=swap">
<!-- JQuery -->
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Sniffle script! -->
<script src="../Sniffle/sniffle.js"></script>
<link rel='stylesheet' href='../Sniffle/sniffle.css'>
<!-- Flyout script! -->
<script src="../Flyout/flyout.js"></script>
<link rel='stylesheet' href='../Flyout/flyout.css'>
</head>
<body>
<?php
include "../ui/required.php";
include "../ui/nav.php";
// Initialize the session
@ -103,9 +106,6 @@
</form>
</div>
<?php
include "../ui/top.html";
include "../ui/footer.php";
?>
<?php include "../ui/footer.php"; ?>
</body>
</html>

View file

@ -1,5 +1,3 @@
<?php include "../ui/required.php"; ?>
<!DOCTYPE html>
<html>
<head>
@ -13,14 +11,19 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&amp;display=swap">
<!-- JQuery -->
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Sniffle script! -->
<script src="../Sniffle/sniffle.js"></script>
<link rel='stylesheet' href='../Sniffle/sniffle.css'>
<!-- Flyout script! -->
<script src="../Flyout/flyout.js"></script>
<link rel='stylesheet' href='../Flyout/flyout.css'>
</head>
<body>
<?php
include "../ui/required.php";
include "../ui/nav.php";
// Validate susness of Username
@ -189,9 +192,6 @@
</form>
</div>
<?php
include "../ui/top.html";
include "../ui/footer.php";
?>
<?php include "../ui/footer.php"; ?>
</body>
</html>

View file

@ -54,10 +54,30 @@ nav hr {
}
@media (max-width: 550px) {
nav {
margin: 0;
width: calc(100vw - 2rem));
position: fixed;
top: auto; bottom: 0; left: 0; right: 0;
border: none;
border-top: 3px solid var(--green);
backdrop-filter: blur(16px);
}
.nav-hide {
display: none;
}
.nav-links a .svg {
margin: 0;
}
footer {
margin-bottom: 3.5rem !important;
}
#back-to-top {
bottom: 4.5rem !important;
}
}

View file

@ -13,10 +13,6 @@
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
</script>
<!-- Sniffle script! -->
<script src="Sniffle/sniffle.js"></script>
<link rel='stylesheet' href='Sniffle/sniffle.css'>
@ -155,6 +151,18 @@
// Image download
echo "<a class='btn alert-high space-top' href='images/".$image['imagename']."' download='".$image['imagename']."'><img class='svg' src='assets/icons/download.svg'>Download image</a>";
// Copy image
?>
<script>
function copyLink() {
navigator.clipboard.writeText(window.location.href);
sniffleAdd("Info", "Link has been copied!", "var(--green)", "assets/icons/clipboard-text.svg");
}
</script>
<?php
echo "<button class='btn alert-high space-top-small' onclick='copyLink()'><img class='svg' src='assets/icons/clipboard-text.svg'>Copy image link</button>";
?>
</div>

View file

@ -9,8 +9,8 @@
<!-- Google Fonts -->
<link rel="stylesheet" href="css/master.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@600&amp;display=swap">
<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=Lexend+Deca:wght@600">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500">
<!-- JQuery -->
<script
@ -45,15 +45,40 @@
<div class="info-text center">
<?php
// Set time for message
$time = date("H");
$timezone = date("e");
if ($time < "12") {
$time_welc = "Good morning";
} else if ($time >= "12" && $time < "17") {
$time_welc = "Good afternoon";
} else if ($time >= "17" && $time < "19") {
$time_welc = "Good evening";
} else if ($time >= "19") {
$time_welc = "Good night";
}
// Welcome depending on if user is logged in or not
if (isset($_SESSION["username"])) {
echo "<h1>Welcome ".$_SESSION['username']."!</h1>";
echo "<h1>".$time_welc." ".$_SESSION['username']."!</h1>";
} else {
echo "<h1>Welcome!</h1>";
}
// Random welcome message
$welcome_message = array("*internal screaming*", "Sussy Wussy", "What is this world?", "Don't forget to drink water!", "Bruh", "This is so poorly programmed", "Sorry", "Fluffy made this!", "maybe", "I'm gay", "I wish we were better strangers.");
$welcome_message = array("*internal screaming*",
"Sussy Wussy",
"What is this world?",
"Don't forget to drink water!",
"Bruh",
"This is so poorly programmed",
"Sorry",
"Fluffy made this!",
"maybe",
"I'm gay",
"I wish we were better strangers.",
"<span style='color:#ffff00;'>Just like Minecraft!</span>",
"If I were you, I'd run now");
echo "<p>".$welcome_message[array_rand($welcome_message, 1)]."</p>";
?>
</div>

View file

@ -3,17 +3,17 @@
<p>Lynx Gallery</p>
</div>
<div class="nav-links flex-left">
<a class='btn alert-default' href='index.php'><img class='svg' src='<?php echo $root_dir; ?>assets/icons/house.svg'><span class='nav-hide'>Home</span></a>
<a class='btn alert-default' href='<?php echo $root_dir; ?>index.php'><img class='svg' src='<?php echo $root_dir; ?>assets/icons/house.svg'><span class='nav-hide'>Home</span></a>
<hr>
<a class='btn alert-default' href='search.php'><img class='svg' src='<?php echo $root_dir; ?>assets/icons/binoculars.svg'><span class='nav-hide'>Search</span></a>
<a class='btn alert-default' href='<?php echo $root_dir; ?>search.php'><img class='svg' src='<?php echo $root_dir; ?>assets/icons/binoculars.svg'><span class='nav-hide'>Search</span></a>
<hr>
<?php
if (loggedin()) {
echo "<a class='btn alert-default' href='upload.php'><img class='svg' src='".$root_dir."assets/icons/upload.svg'><span class='nav-hide'>Upload</span></a>";
echo "<a class='btn alert-default' href='".$root_dir."upload.php'><img class='svg' src='".$root_dir."assets/icons/upload.svg'><span class='nav-hide'>Upload</span></a>";
echo "<hr>";
echo "<a class='btn alert-default' href='/account/account.php'><img class='svg' src='".$root_dir."assets/icons/user-circle.svg'><span class='nav-hide'>".substr($_SESSION["username"], 0, 15)."</span></a>";
echo "<a class='btn alert-default' href='".$root_dir."/account/account.php'><img class='svg' src='".$root_dir."assets/icons/user-circle.svg'><span class='nav-hide'>".substr($_SESSION["username"], 0, 15)."</span></a>";
} else {
echo "<a class='btn alert-default' href='/account/login.php'><img class='svg' src='".$root_dir."assets/icons/sign-in.svg'><span class='nav-hide'>Login</span></a>";
echo "<a class='btn alert-default' href='".$root_dir."/account/login.php'><img class='svg' src='".$root_dir."assets/icons/sign-in.svg'><span class='nav-hide'>Login</span></a>";
}
?>
</div>

View file

@ -78,7 +78,7 @@ include $root_dir."app/server/secrete.php";
everything can always be accessed
-->
<a id="back-to-top" href="#">
<img src="assets/icons/caret-up.svg">
<img src="<?php echo $root_dir; ?>assets/icons/caret-up.svg">
</a>
<script>
button = document.getElementById("back-to-top");

View file

@ -1,5 +1,3 @@
<?php include "ui/required.php"; ?>
<!DOCTYPE html>
<html>
<head>
@ -13,21 +11,23 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&amp;display=swap">
<!-- JQuery -->
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Sniffle script! -->
<script src="Sniffle/sniffle.js"></script>
<link rel='stylesheet' href='Sniffle/sniffle.css'>
<!-- Flyout script! -->
<script src="Flyout/flyout.js"></script>
<link rel='stylesheet' href='Flyout/flyout.css'>
</head>
<body>
<?php
include "ui/required.php";
include "ui/nav.php";
// Check if user is logged in
if (loggedin()) {
// User is logged in
} else {
$error = "You must be logged in to upload images";
if (!loggedin()) {
header("Location: index.php");
}
@ -82,10 +82,10 @@
<div class="alert-banner">
<?php
if (isset($error)) {
echo notify($error, "low");
echo "<script>sniffleAdd('Error', '".$error."', 'var(--red)', '".$root_dir."assets/icons/cross.svg');</script>";
}
if (isset($success)) {
echo notify($success, "high");
echo "<script>sniffleAdd('Success!', '".$success."', 'var(--green)', '".$root_dir."assets/icons/check.svg');</script>";
}
?>
<script src='scripts/alert.js'></script>
@ -101,9 +101,6 @@
</form>
</div>
<?php
include "ui/top.html";
include "ui/footer.php";
?>
<?php include "ui/footer.php"; ?>
</body>
</html>