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