Add bulma / styling
This commit is contained in:
parent
7720005194
commit
2dba389d48
GPG Key ID:
3FC8578CC818A9EB
13
webserial/package-lock.json
generated
13
webserial/package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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
9
webserial/src/app.scss
Normal 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";
|
||||
@ -51,5 +51,6 @@
|
||||
|
||||
.editor {
|
||||
height: 100%;
|
||||
resize: both;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import App from './App.svelte'
|
||||
import "./app.scss";
|
||||
|
||||
const app = new App({
|
||||
target: document.getElementById('app'),
|
||||
|
||||
@ -124,10 +124,10 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<p>
|
||||
<span>
|
||||
{#if lastLoopTime !== null}
|
||||
{lastLoopTime.toFixed(2).padStart(5)}
|
||||
{:else}
|
||||
syncing
|
||||
{/if}
|
||||
</p>
|
||||
</span>
|
||||
|
||||
@ -13,28 +13,71 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
{#if navigator.serial}
|
||||
<p>Serial available 🚀</p>
|
||||
{#if port !== null}
|
||||
<SerialConnection {port} />
|
||||
<p><button on:click={disconnect}>disconnect</button></p>
|
||||
<section class="section bg-footer">
|
||||
<div class="container">
|
||||
{#if navigator.serial}
|
||||
<div class="box parent">
|
||||
<span class="left">Serial available 🚀</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} />
|
||||
{: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 😢
|
||||
</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}
|
||||
<p>Looks like your browser does not support WebSerial 😢</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>
|
||||
{/if}
|
||||
</div>
|
||||
</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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user