fix(core): update

2021-09-23 14:30:02 +02:00
parent 5ce4209a79
commit b5cab6d077
13 changed files with 2220 additions and 1384 deletions
--- a/ts_web/elements/upl-statuspage-statusdetails.ts
+++ b/ts_web/elements/upl-statuspage-statusdetails.ts
@@ -0,0 +1,85 @@
+import { DeesElement, property, html, customElement, TemplateResult } from '@designestate/dees-element';
+import * as domtools from '@designestate/dees-domtools';
+
+import './internal/uplinternal-miniheading';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'upl-statuspage-statusdetails': UplStatuspageStatusdetails;
+  }
+}
+
+@customElement('upl-statuspage-statusdetails')
+export class UplStatuspageStatusdetails extends DeesElement {
+  public static demo = () => html`
+    <upl-statuspage-statusdetails></upl-statuspage-statusdetails>
+  `;
+
+  
+
+  constructor() {
+    super();
+  }
+
+  public render(): TemplateResult {
+    return html`
+      ${domtools.elementBasic.styles}
+      <style>
+        :host {
+          position: relative;
+          padding: 0px 0px 15px 0px;
+          display: block;
+          background: #222222;
+          font-family: Roboto Mono;
+          color: #fff;
+        }
+
+        .mainbox {
+          margin: auto;
+          max-width: 900px;
+          text-align: right;
+          background: #404040;
+          line-height: 50px;
+          border-radius: 3px;
+        }
+
+        .mainbox .barContainer {
+          display: flex;
+          padding: 10px 6px;
+        }
+
+        .mainbox .barContainer .bar {
+          margin: 4px;
+          width: 11px;
+          border-radius: 3px;
+          height: 40px;
+          background: #2DEB51;
+        }
+        .timeIndicator {
+          position: absolute;
+          width: 11px;
+          height: 11px;
+          background: #fff;
+          top: 90px;
+          left: 600px;
+          transform: rotate(45deg);
+        }
+      </style>
+      <uplinternal-miniheading>Yesterday & Today</uplinternal-miniheading>
+      <div class="mainbox">
+        <div class="barContainer">
+          ${(() => {
+            let counter = 0;
+            const returnArray: TemplateResult[] = [];
+            while (counter < 48) {
+              counter++;
+              returnArray.push(html` <div class="bar"></div> `);
+            }
+            return returnArray;
+          })()}
+        </div>
+        <div class="timeIndicator"></div>
+      </div>
+    `;
+  }
+}