tasiaiso/tildefriends
1
0
Fork 0
forked from cory/tildefriends
Code Issues Pull Requests Releases Wiki Activity

ssb: Add an overlay for the sidebar so that it can be closed by tapping back on the content.

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/ssb.json
View File

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

5
apps/ssb/tf-tab-news.js
View File

@ -119,10 +119,12 @@ class TfTabNewsElement extends LitElement {
show_sidebar() {
this.renderRoot.getElementById('sidebar').style.display = 'block';
this.renderRoot.getElementById('sidebar_overlay').style.display = 'block';
}
hide_sidebar() {
this.renderRoot.getElementById('sidebar').style.display = 'none';
this.renderRoot.getElementById('sidebar_overlay').style.display = 'none';
}
async channel_toggle_subscribed() {
@ -169,7 +171,7 @@ class TfTabNewsElement extends LitElement {
</div>`;
}
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>
${this.hash.startsWith('##') && this.channels.indexOf(this.hash.substring(2)) == -1 ?
html`
@ -186,6 +188,7 @@ class TfTabNewsElement extends LitElement {
style=${this.hash == '##' + x ? 'font-weight: bold' : undefined}>#${x} ${this.unread_status(x)}</a>
`)}
</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 id="show_sidebar" class="w3-left w3-button w3-hide-large" @click=${this.show_sidebar}>&#9776;</div>
<p>