kai/light_maymays
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add bulma / styling

Browse Source
This commit is contained in:
Kai Vogelgesang 2022-12-29 13:53:51 +01:00
parent 7720005194
commit 2dba389d48
Signed by: kai
GPG Key ID: 3FC8578CC818A9EB
7 changed files with 89 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
webserial/package-lock.json generated
View File

@ -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",

1
webserial/package.json
View File

@ -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",

9
webserial/src/app.scss Normal file
View File

@ -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";

1
webserial/src/editor/Monaco.svelte
View File

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

1
webserial/src/main.ts
View File

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

4
webserial/src/serial/SerialConnection.svelte
View File

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

57
webserial/src/serial/SerialManager.svelte
View File

@ -13,28 +13,71 @@
}
</script>
<div>
<section class="section bg-footer">
<div class="container">
{#if navigator.serial}
<p>Serial available &#x1f680;</p>
<div class="box parent">
<span class="left">Serial available &#x1f680;</span>
<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} />
<p><button on:click={disconnect}>disconnect</button></p>
{:else}
<p><button on:click={connect}>connect</button></p>
Not connected
{/if}
</span>
</div>
{:else}
<p>Looks like your browser does not support WebSerial &#x1f622;</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}
</div>
</section>
<style lang="scss">
div {
height: 15vh;
.parent {
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>