aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorFurkan Sahin <furkan-dev@proton.me>2022-06-01 08:40:20 -0500
committerFurkan Sahin <furkan-dev@proton.me>2022-06-01 08:40:20 -0500
commit61f581db09a364d3607975e423c1e5838454b52f (patch)
tree3dfe23bf99a9a8be2338ae59da0b16882adaccb3
parent40f68817b65de9dbb706342fcaad5697dab3100d (diff)
Play around with action bar CSS, make main background grey
-rw-r--r--public/index.html2
-rw-r--r--src/components/EditorActions.svelte20
2 files changed, 18 insertions, 4 deletions
diff --git a/public/index.html b/public/index.html
index 3e7c201..f7dbc53 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="background-color: grey;">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
diff --git a/src/components/EditorActions.svelte b/src/components/EditorActions.svelte
index fa2a041..aacbf0e 100644
--- a/src/components/EditorActions.svelte
+++ b/src/components/EditorActions.svelte
@@ -108,9 +108,15 @@
<FileUpload accept="application/json" bind:files={dbFile}>
<Label>Import DB</Label>
</FileUpload>
- <Button variant="raised" ripple={false} on:click={exportDB}>
+ <Button
+ variant="raised"
+ ripple={false}
+ on:click={exportDB}
+ style="overflow: hidden; margin-left: 0.1em; margin-right: 0.5em;"
+ >
<Label>Export DB</Label>
</Button>
+ <div id="info" />
</div>
<Snackbar bind:this={snackbar} labelText={snackbarText}>
<Label />
@@ -120,9 +126,17 @@
</Snackbar>
<style>
+
#action-bar {
+ display: flex;
+ justify-content: space-evenly;
+ align-content: center;
+ border-radius: 1em;
+ /* background-image: linear-gradient(to right, red, purple); */
+ background-size: 100vw;
+ max-height: 2em;
max-width: 100vw;
- overflow-x: auto;
- white-space: nowrap;
+ overflow: hidden;
+ padding: 0.6em;
}
</style>