fix(core): update

2020-05-11 00:36:58 +00:00
parent addec288bd
commit c0900e265b
9 changed files with 495 additions and 19 deletions
--- a/ts_web/elements/wcc-frame.ts
+++ b/ts_web/elements/wcc-frame.ts
@ -0,0 +1,71 @@
+import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
+
+const breakpoints = {
+  desktop: 1240,
+  tablet: 700,
+  phablet: 500,
+  phone: 340,
+};
+
+@customElement('wcc-frame')
+export class WccFrame extends LitElement {
+  @property()
+  public viewport: string;
+
+  public render(): TemplateResult {
+    return html`
+      <style>
+        :host {
+          border: 10px solid #ffaeaf;
+          background: #222;
+          position: absolute;
+          left: 200px;
+          right: 0px;
+          top: 0px;
+          bottom: 100px;
+          overflow-y: auto;
+          overflow-x: auto;
+          ${(() => {
+          switch (this.viewport) {
+            case 'desktop':
+              return `
+                  padding: 0px 0px;
+                `;
+            case 'tablet':
+              return `
+                  padding: 0px ${(document.body.clientWidth - 200 - breakpoints.tablet) / 2}px;
+                `;
+            case 'phablet':
+              return `
+                  padding: 0px ${(document.body.clientWidth - 200 - breakpoints.phablet) / 2}px;
+                `;
+            case 'phone':
+              return `
+                  padding: 0px ${(document.body.clientWidth - 200 - breakpoints.phone) / 2}px;
+                `;
+          }
+        })()}
+        }
+        .viewport {
+          position: relative;
+          ${this.viewport !== 'desktop'
+          ? html` border-right: 1px dotted #444; border-left: 1px dotted #444; `
+          : html``}
+          min-height: 100%;
+          background:
+            radial-gradient(#444444 3px, transparent 4px),
+            radial-gradient(#444444 3px, transparent 4px),
+            linear-gradient(#222222 4px, transparent 0),
+            linear-gradient(45deg, transparent 74px, transparent 75px, #444444 75px, #444444 76px, transparent 77px, transparent 109px),
+            linear-gradient(-45deg, transparent 75px, transparent 76px, #444444 76px, #444444 77px, transparent 78px, transparent 109px),
+            #222222;
+            background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;
+            background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
+        }
+      </style>
+      <div class="viewport">
+        <slot></slot>
+      </div>
+    `;
+  }
+}