cory/tildefriends
4
5
Fork 1
Code Issues 33 Pull Requests 1 Actions Releases 27 Wiki Activity

This appears to let me shrink the sparkline graphs. Freaking CSS.

Browse Source 
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4323 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams 2023-06-14 22:23:22 +00:00
parent ef5afc1e23
commit 87ce715011
1 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
core/client.js
View File

@ -79,6 +79,9 @@ class TfNavigationElement extends LitElement {
get_spark_line(key, options) { get_spark_line(key, options) {
if (!this.spark_lines[key]) { if (!this.spark_lines[key]) {
let spark_line = document.createElement('tf-sparkline'); let spark_line = document.createElement('tf-sparkline');
spark_line.style.display = 'flex';
spark_line.style.flexDirection = 'row';
spark_line.style.flex = '0 100 10em';
spark_line.title = key; spark_line.title = key;
if (options) { if (options) {
if (options.max) { if (options.max) {
@ -133,7 +136,7 @@ class TfNavigationElement extends LitElement {
<span style="display: inline-block; vertical-align: top; white-space: pre; color: ${this.status.color ?? kErrorColor}">${this.status.message}</span> <span style="display: inline-block; vertical-align: top; white-space: pre; color: ${this.status.color ?? kErrorColor}">${this.status.message}</span>
<span id="requests"></span> <span id="requests"></span>
${this.render_permissions()} ${this.render_permissions()}
<span style="flex: 1; white-space: nowrap; overflow: hidden; margin: 0; padding: 0">${Object.keys(this.spark_lines).sort().map(x => this.spark_lines[x]).map(x => [x.dataset.emoji, x])}</span> <span style="flex: 1 1; display: flex; flex-direction: row; white-space: nowrap; margin: 0; padding: 0">${Object.keys(this.spark_lines).sort().map(x => this.spark_lines[x]).map(x => [x.dataset.emoji, x])}</span>
<span style="flex: 0 0; white-space: nowrap">${this.render_login()}</span> <span style="flex: 0 0; white-space: nowrap">${this.render_login()}</span>
</div> </div>
`; `;
@ -315,7 +318,7 @@ class TfSparkLineElement extends LitElement {
render() { render() {
let max = Math.round(10.0 * Math.max(...this.lines.map(line => line.values[line.values.length - 1]))) / 10.0; let max = Math.round(10.0 * Math.max(...this.lines.map(line => line.values[line.values.length - 1]))) / 10.0;
return html` return html`
<svg style="width: 10em; height: 1.4em; vertical-align: top; margin: 0; padding: 0; background: #000" viewBox="0 0 100 10" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"> <svg style="width-auto: object-fit: cover; margin: 0; padding: 0; background: #000" viewBox="0 0 100 10" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
${this.lines.map(x => this.render_line(x))} ${this.lines.map(x => this.render_line(x))}
<text x="0" y="1em" style="font: 8px sans-serif; fill: #fff">${max}</text> <text x="0" y="1em" style="font: 8px sans-serif; fill: #fff">${max}</text>
</svg> </svg>