ssb: Add an overlay for the sidebar so that it can be closed by tapping back on the content.
All checks were successful
Build Tilde Friends / Build-All (push) Successful in 16m42s

This commit is contained in:
Cory McWilliams 2024-12-03 19:40:08 -05:00
parent 5d13f6aab6
commit e0d7e90894
2 changed files with 5 additions and 2 deletions

View File

@ -1,5 +1,5 @@
{ {
"type": "tildefriends-app", "type": "tildefriends-app",
"emoji": "🐌", "emoji": "🐌",
"previous": "&kAAjuIOpPmvwRqQKyFIexrTclB3vLAWGwfDgRy16npA=.sha256" "previous": "&eNt+jXQkI/zOdhmV7bpHSY/m4son/xtQocFj14hxUII=.sha256"
} }

View File

@ -119,10 +119,12 @@ class TfTabNewsElement extends LitElement {
show_sidebar() { show_sidebar() {
this.renderRoot.getElementById('sidebar').style.display = 'block'; this.renderRoot.getElementById('sidebar').style.display = 'block';
this.renderRoot.getElementById('sidebar_overlay').style.display = 'block';
} }
hide_sidebar() { hide_sidebar() {
this.renderRoot.getElementById('sidebar').style.display = 'none'; this.renderRoot.getElementById('sidebar').style.display = 'none';
this.renderRoot.getElementById('sidebar_overlay').style.display = 'none';
} }
async channel_toggle_subscribed() { async channel_toggle_subscribed() {
@ -169,7 +171,7 @@ class TfTabNewsElement extends LitElement {
</div>`; </div>`;
} }
return html` return html`
<div class="w3-sidebar w3-bar-block w3-theme-d1 w3-collapse w3-animate-left" style="width: 2in; left: 0" id="sidebar"> <div class="w3-sidebar w3-bar-block w3-theme-d1 w3-collapse w3-animate-left" style="width: 2in; left: 0; z-index: 5" id="sidebar">
<div class="w3-right w3-button w3-hide-large" @click=${this.hide_sidebar}>&times;</div> <div class="w3-right w3-button w3-hide-large" @click=${this.hide_sidebar}>&times;</div>
${this.hash.startsWith('##') && this.channels.indexOf(this.hash.substring(2)) == -1 ? ${this.hash.startsWith('##') && this.channels.indexOf(this.hash.substring(2)) == -1 ?
html` html`
@ -186,6 +188,7 @@ class TfTabNewsElement extends LitElement {
style=${this.hash == '##' + x ? 'font-weight: bold' : undefined}>#${x} ${this.unread_status(x)}</a> style=${this.hash == '##' + x ? 'font-weight: bold' : undefined}>#${x} ${this.unread_status(x)}</a>
`)} `)}
</div> </div>
<div class="w3-overlay" id="sidebar_overlay" @click=${this.hide_sidebar}></div>
<div style="margin-left: 2in; padding: 8px" id="main" class="w3-main"> <div style="margin-left: 2in; padding: 8px" id="main" class="w3-main">
<div id="show_sidebar" class="w3-left w3-button w3-hide-large" @click=${this.show_sidebar}>&#9776;</div> <div id="show_sidebar" class="w3-left w3-button w3-hide-large" @click=${this.show_sidebar}>&#9776;</div>
<p> <p>