Change a bunch of class names, introduce index.js to show/hide header

and footer
This commit is contained in:
Jacob 2024-03-31 04:01:38 +02:00
parent ca378622ff
commit a7be5a5d9b
7 changed files with 84 additions and 45 deletions

View file

@ -55,7 +55,7 @@ $html = "";
$html = printHeader($html, 0);
$html .= "\t\t\t<h1>Administrator panel</h1>\n";
$html .= "\t\t\t\t<div class=\"adminLinks\">\n";
$html .= "\t\t\t\t<div class=\"admin_links\">\n";
$html .= "\t\t\t\t\t<span id='adminSpan' class='title'>\n";
if ($Action == "users") {
@ -119,7 +119,7 @@ if ($Action == "comments") {
$html .= "\t\t\t\t</table>\n";
} else if ($Action == "create") {
$html .= "\t\t\t\t<form method=\"POST\" class=\"adminCreateForm\" action=\"create-user.php?redir=admin\" method=\"post\">\n";
$html .= "\t\t\t\t<form method=\"POST\" class=\"admin_create_form\" action=\"create-user.php?redir=admin\" method=\"post\">\n";
$html .= "\t\t\t\t\t<label for=\"type\">User type</label>\n";
$html .= "\t\t\t\t\t<select name=\"type\" required>\n";
@ -160,7 +160,7 @@ if ($Action == "comments") {
$html .= "\t\t\t\t\t\t<th class=\"adminUser\">User</th>\n";
$html .= "\t\t\t\t\t\t<th class=\"adminNumberOfComments\">Comments</th>\n";
$html .= "\t\t\t\t\t\t<th class=\"adminLastUsed\">Last used</th>\n";
$html .= "\t\t\t\t\t\t<th class=\"adminCreated\">Created</th>\n";
$html .= "\t\t\t\t\t\t<th class=\"admin_created\">Created</th>\n";
$html .= "\t\t\t\t\t\t<th class=\"adminIP\">IP</th>\n";
$html .= "\t\t\t\t\t\t<th class=\"adminUserAgent\">User agent</th>\n";
$html .= "\t\t\t\t\t\t<th class=\"adminuserType\">User type</th>\n";
@ -198,7 +198,7 @@ if ($Action == "comments") {
$html .= "\t\t\t\t\t\t<td class=\"adminUser\">$Username</td>\n";
$html .= "\t\t\t\t\t\t<td class=\"adminNumberOfComments\"><a href=\"/admin.php?action=comments&id=$ID\">$NumberOfComments</a></td>\n";
$html .= "\t\t\t\t\t\t<td class=\"adminLastUsed\">$LastUsed</td>\n";
$html .= "\t\t\t\t\t\t<td class=\"adminCreated\">$Created</td>\n";
$html .= "\t\t\t\t\t\t<td class=\"admin_created\">$Created</td>\n";
$html .= "\t\t\t\t\t\t<td class=\"adminIP\">$IP</td>\n";
$html .= "\t\t\t\t\t\t<td class=\"adminUserAgent\">$UserAgent</td>\n";
$html .= "\t\t\t\t\t\t<td class=\"adminuserType\">$userType</td>\n";

View file

@ -450,7 +450,7 @@ function printHeader($html, $printpage) {
$html .= "<!DOCTYPE html>\n";
$html .= "<html>\n";
$html .= "\t<head>\n";
$html .= "\t<head id=\"header\">\n";
$html .= "\t\t<meta name=\"description\" content=\"$description\">\n";
$html .= "\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n";
@ -464,7 +464,7 @@ function printHeader($html, $printpage) {
if (file_exists($javaScript)) $html .= "\t\t<script src=\"/$javaScript\"></script>\n";
$html .= "\t\t<title>$title</title>\n";
$html .= "\t\t<div class=\"barTitle\">\n";
$html .= "\t\t<div id=\"bar_title\" class=\"bar_title\">\n";
$endpointFound = 0;
$HeaderDatabaseQuery = $Database->query('SELECT * FROM pages');
@ -485,7 +485,7 @@ function printHeader($html, $printpage) {
}
$html .= "\t\t</div>\n";
$html .= "\t\t<div class=\"barMenu\">\n";
$html .= "\t\t<div id=\"bar_menu\" class=\"bar_menu\">\n";
$html .= "\t\t\t<script>\n";
$html .= "\t\t\t\tfunction pelem() {\n";
@ -543,7 +543,7 @@ function printHeader($html, $printpage) {
$html .= "\t\t</div>\n";
$html .= "\t</head>\n";
$html .= "\t<body>\n";
$html .= "\t\t<div class=\"content\">\n";
$html .= "\t\t<div id=\"content\" class=\"content\">\n";
if ($printpage == 1) {
if ($ret->redirectTo != '') {
@ -621,7 +621,7 @@ function printHeader($html, $printpage) {
if (file_exists($javaScript)) $html .= "\t\t<script src=\"/$javaScript\"></script>\n";
$html .= "\t\t<title>$title</title>\n";
$html .= "\t\t<div class=\"barTitle\">\n";
$html .= "\t\t<div id=\"bar_title\" class=\"bar_title\">\n";
$endpointFound = 0;
$HeaderDatabaseQuery = $Database->query('SELECT * FROM pages');
@ -642,7 +642,7 @@ function printHeader($html, $printpage) {
}
$html .= "\t\t</div>\n";
$html .= "\t\t<div class=\"barMenu\">\n";
$html .= "\t\t<div id=\"bar_menu\" class=\"bar_menu\">\n";
$html .= "\t\t\t<script>\n";
$html .= "\t\t\t\tfunction pelem() {\n";
@ -700,7 +700,7 @@ function printHeader($html, $printpage) {
$html .= "\t\t</div>\n";
$html .= "\t</head>\n";
$html .= "\t<body>\n";
$html .= "\t\t<div class=\"content\">\n";
$html .= "\t\t<div id=\"content\" class=\"content\">\n";
if ($printpage == 1) {
$ErrDatabaseQuery = $Database->query('SELECT * FROM pages');
@ -730,7 +730,7 @@ function printFooter($html) {
$html .= "\t\t</div>\n";
$html .= "\t</body>\n";
$html .= "\t<footer>\n";
$html .= "\t<footer id='footer'>\n";
$html .= "\t\t<div class='footer'>\n";
$Database = createTables($sqlDB);

View file

@ -70,7 +70,7 @@ $html = "";
$html = printHeader($html, 0);
$html .= "\t\t\t<h1>Page manager</h1>\n";
$html .= "\t\t\t\t<div class=\"pageLinks\">\n";
$html .= "\t\t\t\t<div class=\"page_links\">\n";
$html .= "\t\t\t\t\t<span id=\"pageSpan\" class=\"title\">\n";
if ($Action == "write") {
@ -153,7 +153,7 @@ if ($Action == "write") {
}
$html .= "\t\t\t\t<p class=\"pageWarning\"><strong>Switching tab will delete changes made to the Markdown document. Press 'Save' to avoid this.</strong></p>\n";
$html .= "\t\t\t\t<form method=\"POST\" class=\"newForm\" action=\"/edit.php\"><input type=\"submit\" value=\"New\"></form>\n";
$html .= "\t\t\t\t<form method=\"POST\" class=\"new_form\" action=\"/edit.php\"><input type=\"submit\" value=\"New\"></form>\n";
if ($postID == -1) {
$html .= "\t\t\t\t<form method=\"POST\" class=\"pageWriteForm\" action=\"/create.php?redir=edit\" method=\"post\">\n";

View file

@ -5,7 +5,7 @@
src: URL('font.ttf') format('truetype');
}
.barTitle {
.bar_title {
font-size: 15pt;
font-family: Noto Sans;
font-weight: normal;
@ -13,7 +13,7 @@
background-color: #363636;
}
.barMenu {
.bar_menu {
font-size: 15pt;
font-family: Noto Sans;
font-weight: normal;
@ -47,28 +47,28 @@ input[type=file]::file-selector-button {
}
.actionmenu {
background-color: #3e3e3e;
color: #ffffff;
background-color: #3e3e3e;
color: #ffffff;
}
.actionmenu:hover, .actionmenu:focus {
background-color: #646464;
background-color: #646464;
}
.dropdown-content {
background-color: #464646;
background-color: #464646;
}
.dropdown-content a {
color: #f0eee4;
color: #f0eee4;
}
.commentAuthor {
color: #00ff51;
color: #00ff51;
}
.commentAuthorMod {
color: #ffc0cb;
color: #ffc0cb;
}
.dropdown-content a:hover {
@ -119,11 +119,11 @@ input[type=file]::file-selector-button {
color: #eb345b;
}
.adminLinks, .pageLinks {
.admin_links, .page_links {
background-color: #363636;
}
.allLinks {
.all_links {
background-color: #363636;
}
@ -157,7 +157,7 @@ footer {
}
@media (prefers-color-scheme: light) {
.barTitle {
.bar_title {
font-size: 15pt;
font-family: Noto Sans;
font-weight: normal;
@ -165,7 +165,7 @@ footer {
background-color: #ececec;
}
.barMenu {
.bar_menu {
font-size: 15pt;
font-family: Noto Sans;
font-weight: normal;
@ -199,28 +199,28 @@ footer {
}
.actionmenu {
background-color: #ececec;
color: #222222;
background-color: #ececec;
color: #222222;
}
.actionmenu:hover, .actionmenu:focus {
background-color: #f2f2f2;
background-color: #f2f2f2;
}
.dropdown-content {
background-color: #ececec;
background-color: #ececec;
}
.dropdown-content a {
color: #222222;
color: #222222;
}
.commentAuthor {
color: #00ff51;
color: #00ff51;
}
.commentAuthorMod {
color: #ff99aa;
color: #ff99aa;
}
.dropdown-content a:hover {
@ -271,11 +271,11 @@ footer {
color: #eb345b;
}
.adminLinks, .pageLinks {
.admin_links, .page_links {
background-color: #ececec;
}
.allLinks {
.all_links {
background-color: #ececec;
}

27
index.js Normal file
View file

@ -0,0 +1,27 @@
window.onload = function() {
var footer = document.getElementById("footer");
footer.style.display = "none";
}
window.onscroll = function() {
var footer = document.getElementById("footer");
var scroll_pos = window.pageYOffset || document.documentElement.scrollTop;
if (document.getElementById("content").offsetHeight <= window.innerHeight + scroll_pos) {
footer.style.display = "block";
} else {
footer.style.display = "none";
}
var menu = document.getElementById("bar_menu");
var title = document.getElementById("bar_title");
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
menu.style.display = "none";
title.style.display = "none";
} else {
menu.style.display = "block";
title.style.display = "block";
}
}

View file

@ -1,8 +1,13 @@
.newForm {
@keyframes fade_in {
0% { opacity: 0; }
100% { opacity: 1; }
}
.new_form {
text-align: left;
}
.barTitle {
.bar_title {
position: sticky;
top: 0px;
z-index: 6;
@ -14,12 +19,12 @@
border-radius: 10px;
}
.barTitle p {
.bar_title p {
padding: 0px;
margin: 0px;
}
.barMenu {
.bar_menu {
position: sticky;
top: 0px;
z-index: 6;
@ -31,7 +36,7 @@
border-radius: 10px;
}
.barTitle a {
.bar_title a {
padding-left: 10px;
padding-right: 10px;
}
@ -87,6 +92,7 @@ input[type=file]::file-selector-button {
overflow: auto;
z-index: 1;
margin-top: 10px;
animation: fade_in 0.3s;
}
.dropdown-content p {
@ -112,6 +118,7 @@ input[type=file]::file-selector-button {
}
.content {
animation: fade_in 0.1s;
padding: 5px;
max-width: 1000px;
margin: auto;
@ -148,7 +155,7 @@ input[type=file]::file-selector-button {
width: 100%;
}
.adminLinks, .pageLinks {
.admin_links, .page_links {
width: 100%;
margin: 0px;
padding: 5px;
@ -157,7 +164,7 @@ input[type=file]::file-selector-button {
border-radius: 10px;
}
.allLinks {
.all_links {
margin: 0px;
padding: 5px;
padding-left: 10px;
@ -165,7 +172,7 @@ input[type=file]::file-selector-button {
border-radius: 10px;
}
.adminCreateForm {
.admin_create_form {
padding: 10px;
}
@ -197,4 +204,9 @@ footer {
width: calc(100% - 30px);
border-radius: 10px;
margin: 10px;
margin-top: 20px;
}
#footer, #bar_title, #bar_menu {
animation: fade_in 0.3s;
}

View file

@ -17,7 +17,7 @@ $html = printHeader($html, 0);
$html .= "\t\t\t<h1>Welcome</h1>\n";
$html .= "\t\t\t\t<p>Before csgen can be used, an administrator user must be created.</p>\n";
$html .= "\t\t\t\t<form method=\"POST\" class=\"adminCreateForm\" action=\"create-user.php?redir=setup\" method=\"post\">\n";
$html .= "\t\t\t\t<form method=\"POST\" class=\"admin_create_form\" action=\"create-user.php?redir=setup\" method=\"post\">\n";
$html .= "\t\t\t\t\t<label for=\"username\">Username</label>\n";
$html .= "\t\t\t\t\t<input type=\"text\" name=\"username\" placeholder=\"Username\">\n";
$html .= "\t\t\t\t\t<label for=\"password\">Password</label>\n";