make dropdown usable

STiBaRC · Jul 20, 2024 · 9a265bd · 9a265bd
1 parent afbabab
commit 9a265bd
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 55 deletions.
diff --git a/css/global.css b/css/global.css
@@ -268,7 +268,7 @@ stibarc-icon.inverted-light {
 }
 
 .red {
-	color: var(--red);
+	color: var(--red) !important;
 }
 
 .loader {
@@ -393,9 +393,21 @@ stibarc-icon.inverted-light {
 }
 
 .headerDropdown .menuElement {
+	-webkit-appearance: none;
+	appearance: none;
+	text-decoration: none;
+	text-align: inherit;
+	border: none;
+	font-family: inherit;
+	font-size: 1rem;
+	line-height: normal;
+	width: 100%;
+	box-sizing: border-box;
 	display: flex;
+	margin: 0;
 	justify-content: left;
 	background-color: var(--color2);
+	color: inherit;
 	padding: 9px 18px;
 	transition: background-color 0.22s ease-out;
 	cursor: pointer;
@@ -550,6 +562,7 @@ stibarc-icon.inverted-light {
 	display: -webkit-box;
 	flex-basis: unset;
 	-webkit-line-clamp: 7;
+	line-clamp: 7;
 	word-wrap: break-word;
 	max-width: 100%;
 	overflow: hidden;
@@ -669,7 +682,7 @@ button.button {
 }
 
 .button.danger {
-	color: var(--red);
+	color: var(--red) !important;
 }
 
 .button:disabled,
@@ -680,6 +693,16 @@ button.button {
 	cursor: default;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+	color: var(--text);
+}
+
 .button .icon.textOnRight {
 	margin-right: 3px;
 }

diff --git a/edit.html b/edit.html
@@ -32,15 +32,15 @@
 		</span>
 		<span id="hiddenHeader" class="hidden">
 			<div class="loggedout headerDropdown">
-				<div class="menuElement" id="menulogin">Login</div>
-				<div class="menuElement" id="menuregister">Register</div>
+				<button class="menuElement" id="menulogin" onclick="login()">Login</button>
+				<button class="menuElement" id="menuregister" onclick="register()">Register</button>
 			</div>
 			<div class="loggedin headerDropdown hidden">
-				<div class="menuElement" id="menueditprofile">Edit profile</div>
-				<div class="menuElement" id="menusettings">Settings</div>
+				<a class="menuElement" id="menueditprofile" href="./editprofile.html">Edit profile</a>
+				<a class="menuElement" id="menusettings" href="./settings.html">Settings</a>
 				<div class="separator"></div>
-				<div class="menuElement" id="menuprofile"></div>
-				<div class="menuElement red" id="menulogout">Logout</div>
+				<a class="menuElement" id="menuprofile"></a>
+				<button class="menuElement red" id="menulogout" onclick="logout()">Logout</button>
 			</div>
 		</span>
 		<span id="searchResults" class="flexcontainer flexcolumn hidden">

diff --git a/editprofile.html b/editprofile.html
@@ -31,15 +31,15 @@
 		</span>
 		<span id="hiddenHeader" class="hidden">
 			<div class="loggedout headerDropdown">
-				<div class="menuElement" id="menulogin">Login</div>
-				<div class="menuElement" id="menuregister">Register</div>
+				<button class="menuElement" id="menulogin" onclick="login()">Login</button>
+				<button class="menuElement" id="menuregister" onclick="register()">Register</button>
 			</div>
 			<div class="loggedin headerDropdown hidden">
-				<div class="menuElement" id="menueditprofile">Edit profile</div>
-				<div class="menuElement" id="menusettings">Settings</div>
+				<a class="menuElement" id="menueditprofile" href="./editprofile.html">Edit profile</a>
+				<a class="menuElement" id="menusettings" href="./settings.html">Settings</a>
 				<div class="separator"></div>
-				<div class="menuElement" id="menuprofile"></div>
-				<div class="menuElement red" id="menulogout">Logout</div>
+				<a class="menuElement" id="menuprofile"></a>
+				<button class="menuElement red" id="menulogout" onclick="logout()">Logout</button>
 			</div>
 		</span>
 		<span id="searchResults" class="flexcontainer flexcolumn hidden">

diff --git a/index.html b/index.html
@@ -37,15 +37,15 @@
 		</span>
 		<span id="hiddenHeader" class="hidden">
 			<div class="loggedout headerDropdown">
-				<div class="menuElement" id="menulogin">Login</div>
-				<div class="menuElement" id="menuregister">Register</div>
+				<button class="menuElement" id="menulogin" onclick="login()">Login</button>
+				<button class="menuElement" id="menuregister" onclick="register()">Register</button>
 			</div>
 			<div class="loggedin headerDropdown hidden">
-				<div class="menuElement" id="menueditprofile">Edit profile</div>
-				<div class="menuElement" id="menusettings">Settings</div>
+				<a class="menuElement" id="menueditprofile" href="./editprofile.html">Edit profile</a>
+				<a class="menuElement" id="menusettings" href="./settings.html">Settings</a>
 				<div class="separator"></div>
-				<div class="menuElement" id="menuprofile"></div>
-				<div class="menuElement red" id="menulogout">Logout</div>
+				<a class="menuElement" id="menuprofile"></a>
+				<button class="menuElement red" id="menulogout" onclick="logout()">Logout</button>
 			</div>
 		</span>
 		<span id="searchResults" class="flexcontainer flexcolumn hidden">

diff --git a/js/global.js b/js/global.js
@@ -408,7 +408,10 @@ function userBlock(user) {
 
 function setLoggedinState(state) {
 	if ($("#mypfp")) {
-		$("#mypfp").setAttribute("src", localStorage.pfp || "https://betacdn.stibarc.com/pfp/default.png");
+		$("#mypfp").setAttribute(
+			"src",
+			localStorage.pfp || "https://betacdn.stibarc.com/pfp/default.png"
+);
 		$("#menuprofile").innerText = localStorage.username;
 	}
 	$("#menuprofile").addEventListener("click", () => {
@@ -435,6 +438,14 @@ function setLoggedinState(state) {
 	}
 }
 
+function login() {
+	$("stibarc-login-modal")[0].show();
+}
+
+function register() {
+	$("stibarc-register-modal")[0].show();
+}
+
 async function logout() {
 	await fetch("https://betaapi.stibarc.com/v4/logout.sjs", {
 		method: "post",
@@ -491,12 +502,19 @@ async function reloadSessInfo() {
 
 refreshTheme();
 
-if (localStorage.sess !== undefined &&
-	(sessionStorage.loadedBefore === undefined || localStorage.username === undefined || localStorage.pfp === undefined)
+if (
+	localStorage.sess !== undefined &&
+	(sessionStorage.loadedBefore === undefined ||
+		localStorage.username === undefined ||
+		localStorage.pfp === undefined)
 ) {
 	if ($("#mypfp")) {
-		$("#mypfp").setAttribute("src", localStorage.pfp || "https://betacdn.stibarc.com/pfp/default.png");
+		$("#mypfp").setAttribute(
+			"src",
+			localStorage.pfp || "https://betacdn.stibarc.com/pfp/default.png"
+		);
 		$("#menuprofile").innerText = localStorage.username;
+		$("#menuprofile").href = `./user.html?username=${localStorage.username}`;
 	}
 }
 
@@ -508,9 +526,7 @@ window.addEventListener("load", function () {
 			localStorage.pfp === undefined)
 	) {
 		reloadSessInfo();
-		$("#menuprofile").addEventListener("click", () => {
-			location.href = `./user.html?username=${localStorage.username}`;
-		});
+		$("#menuprofile").href = `./user.html?username=${localStorage.username}`;
 	}
 	document.addEventListener("click", function (event) {
 		/* header pfp dropdown */
@@ -532,10 +548,6 @@ window.addEventListener("load", function () {
 			func(event);
 		}
 	});
-
-	$("#menueditprofile").onclick = function (e) {
-		location.href = "./editprofile.html";
-	};
 	$("#searchBtn").addEventListener("click", () => {
 		location.href = "./search.html";
 	});

diff --git a/post.html b/post.html
@@ -32,15 +32,15 @@
 		</span>
 		<span id="hiddenHeader" class="hidden">
 			<div class="loggedout headerDropdown">
-				<div class="menuElement" id="menulogin">Login</div>
-				<div class="menuElement" id="menuregister">Register</div>
+				<button class="menuElement" id="menulogin" onclick="login()">Login</button>
+				<button class="menuElement" id="menuregister" onclick="register()">Register</button>
 			</div>
 			<div class="loggedin headerDropdown hidden">
-				<div class="menuElement" id="menueditprofile">Edit profile</div>
-				<div class="menuElement" id="menusettings">Settings</div>
+				<a class="menuElement" id="menueditprofile" href="./editprofile.html">Edit profile</a>
+				<a class="menuElement" id="menusettings" href="./settings.html">Settings</a>
 				<div class="separator"></div>
-				<div class="menuElement" id="menuprofile"></div>
-				<div class="menuElement red" id="menulogout">Logout</div>
+				<a class="menuElement" id="menuprofile"></a>
+				<button class="menuElement red" id="menulogout" onclick="logout()">Logout</button>
 			</div>
 		</span>
 		<span id="searchResults" class="flexcontainer flexcolumn hidden">

diff --git a/search.html b/search.html
@@ -31,15 +31,15 @@
 		</span>
 		<span id="hiddenHeader" class="hidden">
 			<div class="loggedout headerDropdown">
-				<div class="menuElement" id="menulogin">Login</div>
-				<div class="menuElement" id="menuregister">Register</div>
+				<button class="menuElement" id="menulogin" onclick="login()">Login</button>
+				<button class="menuElement" id="menuregister" onclick="register()">Register</button>
 			</div>
 			<div class="loggedin headerDropdown hidden">
-				<div class="menuElement" id="menueditprofile">Edit profile</div>
-				<div class="menuElement" id="menusettings">Settings</div>
+				<a class="menuElement" id="menueditprofile" href="./editprofile.html">Edit profile</a>
+				<a class="menuElement" id="menusettings" href="./settings.html">Settings</a>
 				<div class="separator"></div>
-				<div class="menuElement" id="menuprofile"></div>
-				<div class="menuElement red" id="menulogout">Logout</div>
+				<a class="menuElement" id="menuprofile"></a>
+				<button class="menuElement red" id="menulogout" onclick="logout()">Logout</button>
 			</div>
 		</span>
 		<span id="searchResults" class="flexcontainer flexcolumn hidden">

diff --git a/settings.html b/settings.html
@@ -31,15 +31,15 @@
 		</span>
 		<span id="hiddenHeader" class="hidden">
 			<div class="loggedout headerDropdown">
-				<div class="menuElement" id="menulogin">Login</div>
-				<div class="menuElement" id="menuregister">Register</div>
+				<button class="menuElement" id="menulogin" onclick="login()">Login</button>
+				<button class="menuElement" id="menuregister" onclick="register()">Register</button>
 			</div>
 			<div class="loggedin headerDropdown hidden">
-				<div class="menuElement" id="menueditprofile">Edit profile</div>
-				<div class="menuElement" id="menusettings">Settings</div>
+				<a class="menuElement" id="menueditprofile" href="./editprofile.html">Edit profile</a>
+				<a class="menuElement" id="menusettings" href="./settings.html">Settings</a>
 				<div class="separator"></div>
-				<div class="menuElement" id="menuprofile"></div>
-				<div class="menuElement red" id="menulogout">Logout</div>
+				<a class="menuElement" id="menuprofile"></a>
+				<button class="menuElement red" id="menulogout" onclick="logout()">Logout</button>
 			</div>
 		</span>
 		<span id="searchResults" class="flexcontainer flexcolumn hidden">

diff --git a/user.html b/user.html
@@ -32,15 +32,15 @@
 		</span>
 		<span id="hiddenHeader" class="hidden">
 			<div class="loggedout headerDropdown">
-				<div class="menuElement" id="menulogin">Login</div>
-				<div class="menuElement" id="menuregister">Register</div>
+				<button class="menuElement" id="menulogin" onclick="login()">Login</button>
+				<button class="menuElement" id="menuregister" onclick="register()">Register</button>
 			</div>
 			<div class="loggedin headerDropdown hidden">
-				<div class="menuElement" id="menueditprofile">Edit profile</div>
-				<div class="menuElement" id="menusettings">Settings</div>
+				<a class="menuElement" id="menueditprofile" href="./editprofile.html">Edit profile</a>
+				<a class="menuElement" id="menusettings" href="./settings.html">Settings</a>
 				<div class="separator"></div>
-				<div class="menuElement" id="menuprofile"></div>
-				<div class="menuElement red" id="menulogout">Logout</div>
+				<a class="menuElement" id="menuprofile"></a>
+				<button class="menuElement red" id="menulogout" onclick="logout()">Logout</button>
 			</div>
 		</span>
 		<span id="searchResults" class="flexcontainer flexcolumn hidden">