Added logout button on profile menu

This commit is contained in:
Bofh 2021-11-28 19:25:28 +01:00
parent 684e169b70
commit 697204fe7b
3 changed files with 27 additions and 3 deletions

View File

@ -42,7 +42,7 @@ a.btn-img .img {
position: relative; position: relative;
top: -2px; top: -2px;
} }
@media (max-width: 370px) { @media (max-width: 400px) {
a.btn-img .img { margin: 0px !important; } a.btn-img .img { margin: 0px !important; }
a.btn-img .text { display: none !important; } a.btn-img .text { display: none !important; }
} }

5
public/img/sv-logout.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="M16,17V14H9V10H16V7L21,12L16,17M14,2A2,2 0 0,1 16,4V6H14V4H5V20H14V18H16V20A2,2 0 0,1 14,22H5A2,2 0 0,1 3,20V4A2,2 0 0,1 5,2H14Z" />
</svg>

After

Width:  |  Height:  |  Size: 446 B

View File

@ -12,9 +12,14 @@
margin: auto; margin: auto;
background: #fff; background: #fff;
border-radius: 2px; border-radius: 2px;
padding: 1em; padding: 2em;
height: max-content; height: max-content;
} }
@media (max-width: 350px) {
#modals > div {
padding: 2em 1em !important;
}
}
</style> </style>
<div id="modals" onclick="MODAL.hide(this)" <div id="modals" onclick="MODAL.hide(this)"
@ -45,6 +50,20 @@
<div class="img"><img src="/img/sv-account-circle.svg"/></div> <div class="img"><img src="/img/sv-account-circle.svg"/></div>
<span class="text"><?php l('modals.profile', 'Profile') ?></span> <span class="text"><?php l('modals.profile', 'Profile') ?></span>
</a> </a>
<a class="btn-img" href="javascript:MODAL.show('logout')">
<div class="img" style="margin:0">
<img src="/img/sv-logout.svg"/></div>
</a>
</div>
</div>
<div id="logout">
<p><?php l('modals.logout_confirm', 'Are you sure you want to end your current session?') ?></p>
<div style="display:flex">
<a class="button button-primary u-full-width" href="javascript:MODAL.hide()">
<?php l('modals.cancel', 'Cancel') ?></a>
<div style="width:1em"></div>
<a class="button u-full-width" href="/logout/">
<?php l('modals.yes', 'Yes') ?></a>
</div> </div>
</div> </div>
@ -67,7 +86,7 @@ const MODAL = {
anchors[i].setAttribute('onclick', 'event.stopPropagation();'); anchors[i].setAttribute('onclick', 'event.stopPropagation();');
} }
}, },
hide: function(el) { hide: function() {
document.querySelector('#modals').style = 'display:none'; document.querySelector('#modals').style = 'display:none';
document.querySelector('#modals').className = ''; document.querySelector('#modals').className = '';
} }