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-statusmonth.ts
+++ b/ts_web/elements/upl-statuspage-statusmonth.ts
@@ -0,0 +1,124 @@
+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-statusmonth': UplStatuspageStatusmonth;
+  }
+}
+
+@customElement('upl-statuspage-statusmonth')
+export class UplStatuspageStatusmonth extends DeesElement {
+  public static demo = () => html` <upl-statuspage-statusmonth></upl-statuspage-statusmonth> `;
+
+  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;
+          display: grid;
+          grid-template-columns: repeat(5, calc(100% / 5 - 80px / 5));
+          grid-column-gap: 20px;
+        }
+
+        .statusMonth {
+          background: #404040;
+          min-height: 20px;
+          display: grid;
+          padding: 10px;
+          grid-template-columns: repeat(6, auto);
+          grid-gap: 9px;
+          border-radius: 3px;
+        }
+
+        .statusMonth .statusDay {
+          width: 16px;
+          height: 16px;
+          background: #2deb51;
+          border-radius: 3px;
+        }
+      </style>
+      <uplinternal-miniheading>Last 150 days</uplinternal-miniheading>
+      <div class="mainbox">
+        <div class="statusMonth">
+          ${(() => {
+            let counter = 0;
+            const returnArray: TemplateResult[] = [];
+            while (counter < 30) {
+              counter++;
+              returnArray.push(html` <div class="statusDay"></div> `);
+            }
+            return returnArray;
+          })()}
+        </div>
+        <div class="statusMonth">
+          ${(() => {
+            let counter = 0;
+            const returnArray: TemplateResult[] = [];
+            while (counter < 30) {
+              counter++;
+              returnArray.push(html` <div class="statusDay"></div> `);
+            }
+            return returnArray;
+          })()}
+        </div>
+        <div class="statusMonth">
+          ${(() => {
+            let counter = 0;
+            const returnArray: TemplateResult[] = [];
+            while (counter < 30) {
+              counter++;
+              returnArray.push(html` <div class="statusDay"></div> `);
+            }
+            return returnArray;
+          })()}
+        </div>
+        <div class="statusMonth">
+          ${(() => {
+            let counter = 0;
+            const returnArray: TemplateResult[] = [];
+            while (counter < 30) {
+              counter++;
+              returnArray.push(html` <div class="statusDay"></div> `);
+            }
+            return returnArray;
+          })()}
+        </div>
+        <div class="statusMonth">
+          ${(() => {
+            let counter = 0;
+            const returnArray: TemplateResult[] = [];
+            while (counter < 30) {
+              counter++;
+              returnArray.push(html` <div class="statusDay"></div> `);
+            }
+            return returnArray;
+          })()}
+        </div>
+      </div>
+    `;
+  }
+}