Add bulma / styling

webserial/package-lock.json

@@ -11,6 +11,7 @@
         "@sveltejs/vite-plugin-svelte": "^2.0.0",
         "@tsconfig/svelte": "^3.0.0",
         "@types/w3c-web-serial": "^1.0.3",
+        "bulma": "^0.9.4",
         "monaco-editor": "^0.34.1",
         "sass": "^1.57.1",
         "svelte": "^3.54.0",
@@ -545,6 +546,12 @@
         "node": "*"
       }
     },
+    "node_modules/bulma": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz",
+      "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==",
+      "dev": true
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -1806,6 +1813,12 @@
       "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
       "dev": true
     },
+    "bulma": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz",
+      "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==",
+      "dev": true
+    },
     "callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",

webserial/package.json

@@ -13,6 +13,7 @@
     "@sveltejs/vite-plugin-svelte": "^2.0.0",
     "@tsconfig/svelte": "^3.0.0",
     "@types/w3c-web-serial": "^1.0.3",
+    "bulma": "^0.9.4",
     "monaco-editor": "^0.34.1",
     "sass": "^1.57.1",
     "svelte": "^3.54.0",

webserial/src/app.scss

@@ -0,0 +1,9 @@
+/* Import only what you need from Bulma */
+@import "bulma/sass/utilities/_all";
+@import "bulma/sass/base/_all";
+@import "bulma/sass/elements/_all";
+@import "bulma/sass/form/_all";
+@import "bulma/sass/components/_all";
+@import "bulma/sass/grid/_all";
+@import "bulma/sass/helpers/_all";
+@import "bulma/sass/layout/_all";

webserial/src/editor/Monaco.svelte

@@ -51,5 +51,6 @@
 
     .editor {
         height: 100%;
+        resize: both;
     }
 </style>

webserial/src/main.ts

@@ -1,4 +1,5 @@
 import App from './App.svelte'
+import "./app.scss";
 
 const app = new App({
   target: document.getElementById('app'),

webserial/src/serial/SerialConnection.svelte

@@ -124,10 +124,10 @@
     });
 </script>
 
-<p>
+<span>
     {#if lastLoopTime !== null}
         {lastLoopTime.toFixed(2).padStart(5)}
     {:else}
         syncing
     {/if}
-</p>
+</span>

webserial/src/serial/SerialManager.svelte

@@ -13,28 +13,71 @@
     }
 </script>
 
-<div>
+<section class="section bg-footer">
-    {#if navigator.serial}
+    <div class="container">
-        <p>Serial available &#x1f680;</p>
+        {#if navigator.serial}
-        {#if port !== null}
+            <div class="box parent">
-            <SerialConnection {port} />
+                <span class="left">Serial available &#x1f680;</span>
-            <p><button on:click={disconnect}>disconnect</button></p>
+                <span class="middle">
+                    {#if port !== null}
+                        <button class="button is-warning" on:click={disconnect}
+                            >disconnect</button
+                        >
+                    {:else}
+                        <button class="button is-primary" on:click={connect}
+                            >connect</button
+                        >
+                    {/if}
+                </span>
+                <span class="right">
+                    {#if port !== null}
+                        <SerialConnection {port} />
+                    {:else}
+                        Not connected
+                    {/if}
+                </span>
+            </div>
         {:else}
-            <p><button on:click={connect}>connect</button></p>
+            <div class="notification is-danger text-center">
+                <p>
+                    Looks like your browser does not support WebSerial &#x1f622;
+                </p>
+                <p>
+                    Check <a
+                        href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility"
+                        >here</a
+                    > for a list of compatible browsers
+                </p>
+            </div>
         {/if}
-    {:else}
+    </div>
-        <p>Looks like your browser does not support WebSerial &#x1f622;</p>
+</section>
-        <p>
-            Check <a
-                href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility"
-                >here</a
-            > for a list of compatible browsers
-        </p>
-    {/if}
-</div>
 
 <style lang="scss">
-    div {
+    .parent {
-        height: 15vh;
+        display: flex;
+        flex-direction: row;
+    }
+
+    .left,
+    .middle,
+    .right {
+        flex: 1;
+    }
+
+    .middle {
+        text-align: center;
+    }
+
+    .right {
+        text-align: right;
+    }
+
+    .text-center {
+        text-align: center;
+    }
+
+    .bg-footer {
+        background-color: hsl(0, 0%, 98%);
     }
 </style>