chore: move demo styles out of the ui module

w-gao · Apr 5, 2023 · 02f2318 · 02f2318
1 parent efcd85d
commit 02f2318
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 46 deletions.
diff --git a/packages/web/index.html b/packages/web/index.html
@@ -6,14 +6,7 @@
     <title>Variation Graph Visualization</title>
   </head>
   <body>
-    <div id="app">
-
-      <!-- <div class="alert" id="alert">
-        <div class="alert__content">This is a message.</div>
-        <div class="alert__close" onclick="document.getElementById('alert').style.display = 'none'">[x]</div>
-      </div> -->
-
-    </div>
+    <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/packages/web/src/main.scss b/packages/web/src/main.scss
@@ -0,0 +1,37 @@
+:root {
+    font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    color: #242424;
+}
+
+body {
+    margin: 0;
+}
+
+#app {
+    min-height: 500px;
+    background: #fefefe;
+}
+
+// TODO: move this to its own component.
+
+// <!-- <div class="alert" id="alert">
+// <div class="alert__content">This is a message.</div>
+// <div class="alert__close" onclick="document.getElementById('alert').style.display = 'none'">[x]</div>
+// </div> -->
+
+.alert {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 10px 20px;
+    background: #ffb1b1;
+    border: 1px rgb(255 137 10) solid;
+    border-radius: 3px;
+}
+
+.alert__close {
+    cursor: pointer;
+}
diff --git a/packages/web/src/main.ts b/packages/web/src/main.ts
@@ -1,4 +1,5 @@
 import { PGV } from "./pgv"
+import "./main.scss"
 
 /**
  * Main entry.

diff --git a/packages/web/src/pgv.ts b/packages/web/src/pgv.ts
@@ -87,6 +87,7 @@ export class PGV {
         // Clear whatever we might have.
         this._renderer.clear()
 
+        // Show the selected region on the UI.
         this._ui.updateRegion(desc.region)
 
         // Apply the layout.

diff --git a/packages/web/src/renderer/three.ts b/packages/web/src/renderer/three.ts
@@ -101,7 +101,6 @@ export class ThreeRenderer implements IRenderer {
         this.renderer.shadowMap.enabled = true
 
         this.element = this.renderer.domElement
-        this.element.setAttribute("class", "renderCanvas")
 
         // Add canvas element to container.
         divElement.appendChild(this.element)

diff --git a/packages/web/src/ui/style.css b/packages/web/src/ui/style.css
@@ -1,36 +0,0 @@
-:root {
-    font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 400;
-    color: #242424;
-}
-
-body {
-    margin: 0;
-}
-
-#app {
-    min-height: 500px;
-    background: #fefefe;
-}
-
-.alert {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
-    padding: 10px 20px;
-    background: #ffb1b1;
-    border: 1px rgb(255 137 10) solid;
-    border-radius: 3px;
-}
-
-.alert__close {
-    cursor: pointer;
-}
-
-.renderCanvas {
-    margin: 0;
-    width: 100%;
-    height: 500px;
-}

diff --git a/packages/web/src/ui/ui.tsx b/packages/web/src/ui/ui.tsx
@@ -31,7 +31,7 @@ export interface Track {
 /**
  * The user interface.
  *
- * Use the method calls to update the values on the UI.
+ * Use the method calls to update what is shown on the UI.
  *
  * Register events to handle user input from the UI. (WIP)
  *