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

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

View File

@ -1,5 +1,5 @@
{
"type": "tildefriends-app",
"emoji": "🦀",
"previous": "&BxKPtOan2rRMbmW8x32Dw7XZCbUloe7Nl5m/FJNqjUE=.sha256"
"previous": "&b7bvRAB4MWWsJvmyi3G+TG/eseQGUBsO4BZ1qiu8nQc=.sha256"
}

View File

@ -526,7 +526,7 @@ class TfElement extends LitElement {
let tabs = html`
<div
class="w3-bar w3-theme-l1"
style="position: sticky; top: 0; z-index: 10"
style="position: static; top: 0; z-index: 10"
>
<button
class="w3-bar-item w3-button w3-circle w3-ripple"
@ -563,10 +563,11 @@ class TfElement extends LitElement {
: this.render_tab();
return html`
<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"
>
${tabs} ${contents}
<div style="flex: 0 0">${tabs}</div>
<div style="flex: 1 1; overflow: scroll; contain: layout">${contents}</div>
</div>
`;
}

View File

@ -177,7 +177,7 @@ class TfTabNewsElement extends LitElement {
return html`
<div
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"
>
<div
@ -245,7 +245,8 @@ class TfTabNewsElement extends LitElement {
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: 0px; top: 0; max-height: 100%; overflow: scroll" id="main" class="w3-main">
<div style="padding: 8px">
<div
id="show_sidebar"
class="w3-left w3-button w3-hide-large"
@ -299,6 +300,7 @@ class TfTabNewsElement extends LitElement {
.channels_latest=${this.channels_latest}
></tf-tab-news-feed>
</div>
</div>
`;
}
}