Mercurial > code > home > repos > light9
annotate light9/homepage/ServiceButtonRow.ts @ 2292:0a11698fecc4
look who just read https://lit.dev/docs/components/properties/#boolean-attributes
| author | drewp@bigasterisk.com |
|---|---|
| date | Mon, 29 May 2023 23:37:08 -0700 |
| parents | e462853f1ef6 |
| children | ccd04278e357 |
| rev | line source |
|---|---|
| 2033 | 1 import { LitElement, html, css } from "lit"; |
| 2 import { customElement, property } from "lit/decorators.js"; | |
| 3 export { StatsLine } from "./StatsLine"; | |
| 4 | |
| 5 @customElement("service-button-row") | |
| 6 export class ServiceButtonRow extends LitElement { | |
| 7 @property() name: string = "?"; | |
|
2292
0a11698fecc4
look who just read https://lit.dev/docs/components/properties/#boolean-attributes
drewp@bigasterisk.com
parents:
2280
diff
changeset
|
8 @property({ type:Boolean, attribute: "metrics" }) hasMetrics: boolean = false; |
| 2033 | 9 static styles = [ |
| 10 css` | |
| 11 :host { | |
| 12 padding-bottom: 10px; | |
|
2280
e462853f1ef6
redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents:
2037
diff
changeset
|
13 border-bottom: 1px solid #333; |
| 2033 | 14 } |
| 15 a { | |
| 16 color: #7d7dec; | |
| 17 } | |
| 18 div { | |
| 19 display: flex; | |
| 20 justify-content: space-between; | |
| 21 padding: 2px 3px; | |
| 22 } | |
| 23 .left { | |
| 24 display: inline-block; | |
| 25 margin-right: 3px; | |
| 26 flex-grow: 1; | |
| 27 } | |
| 28 .window { | |
| 29 } | |
| 30 .serviceGrid > td { | |
| 31 border: 5px solid red; | |
| 32 display: inline-block; | |
| 33 } | |
| 34 .big { | |
| 35 font-size: 120%; | |
| 36 display: inline-block; | |
| 37 padding: 10px 0; | |
| 38 } | |
| 39 | |
| 40 :host > div { | |
| 41 display: inline-block; | |
| 42 vertical-align: top; | |
| 43 } | |
| 44 :host > div:nth-child(2) { | |
| 45 width: 9em; | |
| 46 } | |
| 47 `, | |
| 48 ]; | |
| 49 | |
| 50 render() { | |
| 51 return html` | |
| 52 <div> | |
| 53 <div class="left"><a class="big" href="${this.name}/">${this.name}</a></div> | |
| 54 <div class="window"><button @click="${this.click}">window</button></div> | |
|
2280
e462853f1ef6
redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents:
2037
diff
changeset
|
55 ${this.hasMetrics ? html`<div><a href="${this.name}/metrics">metrics</a></div>` : ""} |
| 2033 | 56 </div> |
| 57 | |
|
2280
e462853f1ef6
redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents:
2037
diff
changeset
|
58 ${this.hasMetrics ? html`<div id="stats"><stats-line name="${this.name}"></div>` : ""} |
| 2033 | 59 `; |
| 60 } | |
| 61 | |
| 62 click() { | |
| 63 window.open(this.name + "/", "_blank", "scrollbars=1,resizable=1,titlebar=0,location=0"); | |
| 64 } | |
| 65 } |