nobigtech
/
realfan
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added modal system + added profile menu

This commit is contained in:
Bofh 2021-11-28 18:37:26 +01:00
parent 8ca3a6c051
commit 684e169b70
6 changed files with 127 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
public/css/custom.css
View File

@ -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
–––––––––––––––––––––––––––––––––––––––––––––––––– */

5
public/img/sv-account-circle.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 572 B

5
public/img/sv-cog.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

5
public/img/sv-diamond.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 345 B

3
src/views/web/head.php
View File

@ -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>

75
src/views/web/modal.php Normal file
View File

@ -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>