Added modal system + added profile menu

public/css/custom.css

@@ -21,6 +21,40 @@
 
 .bg-mastodon { background: #3088d4 !important }
 
+/* Modals
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+a.btn-img {
+  display: flex;
+  text-decoration: none;
+}
+
+a.btn-img:hover {
+  background: #e3e3e3;
+}
+
+a.btn-img:active,
+a.btn-img:focus {
+  background: #cacaca;
+}
+
+a.btn-img .img {
+  margin-right: 3px;
+  position: relative;
+  top: -2px;
+}
+@media (max-width: 370px) {
+  a.btn-img .img { margin: 0px !important; }
+  a.btn-img .text { display: none !important; }
+}
+
+a.btn-img .text {
+  color: #626060;
+}
+
+
+/* Web
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
 header#web table {
   width: 100%;
   margin: 0;
@@ -52,6 +86,7 @@ header#web table span.brand {
   top: .4em;
 }
 
+
 /* Public
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 

public/img/sv-account-circle.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  width="24" height="24" viewBox="0 0 24 24">
+  <path fill="#7e7e7e" d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
+</svg>

public/img/sv-cog.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  width="24" height="24" viewBox="0 0 24 24">
+  <path fill="#7e7e7e" d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" />
+</svg>

public/img/sv-diamond.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  width="24" height="24" viewBox="0 0 24 24">
+  <path fill="#7e7e7e" d="M6,2L2,8L12,22L22,8L18,2H6Z" />
+</svg>

src/views/web/head.php

@@ -1,3 +1,4 @@
+<?php require '/src/views/web/modal.php' ?>
 <div id="loader" style="display: none"><div class="lds-ring">
   <div></div><div></div><div></div><div></div></div></div>
 <header id="web">
@@ -10,7 +11,7 @@
 				<span class="brand"><?php echo $user->acct ?></span>
 			</td>
 			<td style="width: 0">
-				<a href="javascript:window.USER.action.showMenu()"><div class="profile">
+				<a href="javascript:MODAL.show('profile')"><div class="profile">
 					<img width="40" height="40" src="<?php echo $user->account_data->avatar ?>"/>
 				</div></a>
 			</td>

src/views/web/modal.php

@@ -0,0 +1,75 @@
+<style>
+#modals {
+  display: flex;
+  background: #00000091;
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  z-index: 1000;
+}
+#modals > div {
+  display: none;
+  margin: auto;
+  background: #fff;
+  border-radius: 2px;
+  padding: 1em;
+  height: max-content;
+}
+</style>
+
+<div id="modals" onclick="MODAL.hide(this)"
+	style="display: none">
+
+	<!-- MODAL : profile -->
+	<style>
+	#modals.profile { background: #ffffffc4 !important; }
+	#modals > #profile {
+		margin: 0 auto !important;
+		padding: 0 !important;
+	}
+	#modals > #profile a {
+		padding: 1.3em;
+	}
+	</style>
+	<div id="profile">
+		<div style="display:flex">
+			<a class="btn-img" href="/settings">
+				<div class="img"><img src="/img/sv-cog.svg"/></div>
+				<span class="text"><?php l('modals.settings', 'Settings') ?></span>
+			</a>
+			<a class="btn-img" href="/content">
+				<div class="img"><img src="/img/sv-diamond.svg"/></div>
+				<span class="text"><?php l('modals.content', 'Content') ?></span>
+			</a>
+			<a class="btn-img" href="/profile">
+				<div class="img"><img src="/img/sv-account-circle.svg"/></div>
+				<span class="text"><?php l('modals.profile', 'Profile') ?></span>
+			</a>
+		</div>
+	</div>
+
+
+</div>
+
+<script>
+const MODAL = {
+	show: function(_id, hideOnClick) {
+		hideOnClick = hideOnClick || true;
+		document.querySelector('#modals').style = '';
+		document.querySelector('#modals').className = _id;
+		const nodes = document.querySelectorAll('#modals > div');
+		for (var i = 0; i < nodes.length; i++)
+			nodes[i].style = '';
+		document.querySelector('#modals > #'+_id).style = 'display:initial';
+		const anchors = document.querySelectorAll('#modals a');
+		if (!hideOnClick) {
+			for (var i = 0; i < anchors.length; i++)
+				anchors[i].setAttribute('onclick', 'event.stopPropagation();');
+		}
+	},
+	hide: function(el) {
+		document.querySelector('#modals').style = 'display:none';
+		document.querySelector('#modals').className = '';
+	}
+};
+</script>