cory/tildefriends
5
6
Fork 2
Code Issues 34 Pull Requests 1 Actions Releases 28 Wiki Activity

ssb: Trying to get the sidebar to behave better. Fighting CSS.
All checks were successful
Build Tilde Friends / Build-All (push) Successful in 24m25s
Details

Browse Source
This commit is contained in:
Cory McWilliams 2024-12-29 12:44:42 -05:00
parent efcc710d91
commit baf125c450
3 changed files with 56 additions and 53 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", "type": "tildefriends-app",
"emoji": "🦀", "emoji": "🦀",
"previous": "&BxKPtOan2rRMbmW8x32Dw7XZCbUloe7Nl5m/FJNqjUE=.sha256" "previous": "&b7bvRAB4MWWsJvmyi3G+TG/eseQGUBsO4BZ1qiu8nQc=.sha256"
} }

7
apps/ssb/tf-app.js
View File

@ -526,7 +526,7 @@ class TfElement extends LitElement {
let tabs = html` let tabs = html`
<div <div
class="w3-bar w3-theme-l1" class="w3-bar w3-theme-l1"
style="position: sticky; top: 0; z-index: 10" style="position: static; top: 0; z-index: 10"
> >
<button <button
class="w3-bar-item w3-button w3-circle w3-ripple" class="w3-bar-item w3-button w3-circle w3-ripple"
@ -563,10 +563,11 @@ class TfElement extends LitElement {
: this.render_tab(); : this.render_tab();
return html` return html`
<div <div
style="width: 100vw; min-height: 100vh; height: 100%" style="width: 100vw; min-height: 100vh; height: 100vh; display: flex; flex-direction: column"
class="w3-theme-dark" class="w3-theme-dark"
> >
${tabs} ${contents} <div style="flex: 0 0">${tabs}</div>
<div style="flex: 1 1; overflow: scroll; contain: layout">${contents}</div>
</div> </div>
`; `;
} }

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

@ -177,7 +177,7 @@ class TfTabNewsElement extends LitElement {
return html` return html`
<div <div
class="w3-sidebar w3-bar-block w3-theme-d1 w3-collapse w3-animate-left" class="w3-sidebar w3-bar-block w3-theme-d1 w3-collapse w3-animate-left"
style="width: 2in; left: 0; z-index: 5; box-sizing: border-box" style="width: 2in; left: 0; z-index: 5; box-sizing: border-box; top: 0"
id="sidebar" id="sidebar"
> >
<div <div
@ -245,59 +245,61 @@ class TfTabNewsElement extends LitElement {
id="sidebar_overlay" id="sidebar_overlay"
@click=${this.hide_sidebar} @click=${this.hide_sidebar}
></div> ></div>
<div style="margin-left: 2in; padding: 8px" id="main" class="w3-main"> <div style="margin-left: 2in; padding: 0px; top: 0; max-height: 100%; overflow: scroll" id="main" class="w3-main">
<div <div style="padding: 8px">
id="show_sidebar" <div
class="w3-left w3-button w3-hide-large" id="show_sidebar"
@click=${this.show_sidebar} class="w3-left w3-button w3-hide-large"
> @click=${this.show_sidebar}
&#9776; >
</div> &#9776;
<p> </div>
<button class="w3-button w3-theme-d1" @click=${this.show_more}> <p>
${this.new_messages_text()} <button class="w3-button w3-theme-d1" @click=${this.show_more}>
</button> ${this.new_messages_text()}
${this.hash.startsWith('##') </button>
? html` ${this.hash.startsWith('##')
<button ? html`
class="w3-button w3-theme-d1" <button
@click=${this.channel_toggle_subscribed} class="w3-button w3-theme-d1"
> @click=${this.channel_toggle_subscribed}
${this.channels.indexOf(this.hash.substring(2)) != -1 >
? 'Unsubscribe from #' ${this.channels.indexOf(this.hash.substring(2)) != -1
: 'Subscribe to #'}${this.hash.substring(2)} ? 'Unsubscribe from #'
</button> : 'Subscribe to #'}${this.hash.substring(2)}
` </button>
: undefined} `
</p> : undefined}
<div class="w3-bar"> </p>
Welcome, <tf-user id=${this.whoami} .users=${this.users}></tf-user>! <div class="w3-bar">
${edit_profile} Welcome, <tf-user id=${this.whoami} .users=${this.users}></tf-user>!
</div> ${edit_profile}
<div> </div>
<tf-compose <div>
id="tf-compose" <tf-compose
id="tf-compose"
whoami=${this.whoami}
.users=${this.users}
.drafts=${this.drafts}
@tf-draft=${this.draft}
.channel=${this.channel()}
></tf-compose>
</div>
${profile}
<tf-tab-news-feed
id="news"
whoami=${this.whoami} whoami=${this.whoami}
.users=${this.users} .users=${this.users}
.following=${this.following}
hash=${this.hash}
.drafts=${this.drafts} .drafts=${this.drafts}
.expanded=${this.expanded}
@tf-draft=${this.draft} @tf-draft=${this.draft}
.channel=${this.channel()} @tf-expand=${this.on_expand}
></tf-compose> .channels_unread=${this.channels_unread}
.channels_latest=${this.channels_latest}
></tf-tab-news-feed>
</div> </div>
${profile}
<tf-tab-news-feed
id="news"
whoami=${this.whoami}
.users=${this.users}
.following=${this.following}
hash=${this.hash}
.drafts=${this.drafts}
.expanded=${this.expanded}
@tf-draft=${this.draft}
@tf-expand=${this.on_expand}
.channels_unread=${this.channels_unread}
.channels_latest=${this.channels_latest}
></tf-tab-news-feed>
</div> </div>
`; `;
} }