web: Show the little graphs if the Tilde Friends verison thingy is expanded. I want to be able to optionally see these on mobile.

This commit is contained in:
Cory McWilliams 2024-11-20 20:06:33 -05:00
parent 0ea1213139
commit ef5ce1d6e1

View File

@ -56,7 +56,7 @@ class TfNavigationElement extends LitElement {
status: {type: Object},
spark_lines: {type: Object},
version: {type: Object},
show_version: {type: Boolean},
show_expanded: {type: Boolean},
identity: {type: String},
identities: {type: Array},
names: {type: Object},
@ -105,7 +105,6 @@ class TfNavigationElement extends LitElement {
let spark_line = document.createElement('tf-sparkline');
spark_line.title = key;
spark_line.classList.add('w3-bar-item');
spark_line.classList.add('w3-hide-small');
spark_line.style.paddingRight = '0';
if (options) {
if (options.max) {
@ -315,13 +314,13 @@ class TfNavigationElement extends LitElement {
<span
class="w3-bar-item"
style="cursor: pointer"
@click=${() => (this.show_version = !this.show_version)}
@click=${() => (this.show_expanded = !this.show_expanded)}
>😎</span
>
<span
class="w3-bar-item"
style=${'white-space: nowrap' +
(this.show_version ? '' : '; display: none')}
(this.show_expanded ? '' : '; display: none')}
title=${this.version?.name +
' ' +
Object.entries(this.version || {})
@ -376,9 +375,11 @@ class TfNavigationElement extends LitElement {
</div>
`
: undefined}
${Object.keys(this.spark_lines)
.sort()
.map((x) => this.spark_lines[x])}
<span class=${this.show_expanded ? '' : 'w3-hide-small'}>
${Object.keys(this.spark_lines)
.sort()
.map((x) => this.spark_lines[x])}
</span>
${this.render_identity()}
</div>
${this.status?.is_error