Mercurial Hosting > disearch
changeset 9:88f425d261b3
add menu
author | Franklin Schmidt <fschmidt@gmail.com> |
---|---|
date | Wed, 25 Oct 2023 18:38:07 -0600 |
parents | 9534dd5eda89 |
children | ae9ebeb1c246 |
files | src/lib/Shared.luan src/site.css src/site.js |
diffstat | 3 files changed, 51 insertions(+), 1 deletions(-) [+] |
line wrap: on
line diff
diff -r 9534dd5eda89 -r 88f425d261b3 src/lib/Shared.luan --- a/src/lib/Shared.luan Tue Oct 24 19:31:33 2023 -0600 +++ b/src/lib/Shared.luan Wed Oct 25 18:38:07 2023 -0600 @@ -30,7 +30,13 @@ <% if get_user() == nil then %> <a href="login1.red">login</a> <% else %> - <a href="javascript:logout()"><script>document.write(`<img src="https://cdn.discordapp.com/avatars/${localStorage.user_id}/${localStorage.user_avatar}.png">`)</script></a> + <span right pulldown> + <script>document.write(`<img src="https://cdn.discordapp.com/avatars/${localStorage.user_id}/${localStorage.user_avatar}.png" onclick="clickMenu(this)">`)</script> + <div pulldown_menu> + <span username><script>document.write(localStorage.user_name)</script></span> + <a href="javascript:logout()">Log out</a> + </div> + </span> <% end %> </div> <hr>
diff -r 9534dd5eda89 -r 88f425d261b3 src/site.css --- a/src/site.css Tue Oct 24 19:31:33 2023 -0600 +++ b/src/site.css Wed Oct 25 18:38:07 2023 -0600 @@ -13,6 +13,23 @@ text-decoration: underline; } +[onclick] { + cursor: pointer; +} + +[pulldown] { + position: relative; +} +[pulldown_menu] { + display: none; + z-index: 20; + position: absolute; + top: 40px; + border: 1px solid #DDDDDD; + text-align: left; + background-color: #ffffff; +} + div[header] { display: flex; justify-content: space-between; @@ -25,3 +42,8 @@ object-fit: cover; border-radius: 50%; } + +div[header] [pulldown_menu] { + right: 0; + margin-top: 20px; +}
diff -r 9534dd5eda89 -r 88f425d261b3 src/site.js --- a/src/site.js Tue Oct 24 19:31:33 2023 -0600 +++ b/src/site.js Wed Oct 25 18:38:07 2023 -0600 @@ -43,6 +43,28 @@ ajax( '/error_log.js', 'err='+encodeURIComponent(err) ); }; +let currentPulldown = null; +let newPulldown = null; + +function clickMenu(clicked,display) { + //console.log("clickMenu"); + let pulldown = clicked.parentNode.querySelector('[pulldown_menu]'); + if( pulldown !== currentPulldown ) { + pulldown.style.display = display || "block"; + newPulldown = pulldown; + window.onclick = function() { + if( currentPulldown ) { + currentPulldown.style.display = "none"; + if( !newPulldown ) + window.onclick = null; + } + currentPulldown = newPulldown; + newPulldown = null; + }; + pulldown.scrollIntoViewIfNeeded(false); + } +} + function logout() { document.cookie = 'user=; Max-Age=0; path=/;'; location = '/';