From e65e4875e7504aaa801b03805b186ed181ee2326 Mon Sep 17 00:00:00 2001 From: lzzfnc Date: Tue, 5 Oct 2021 20:23:57 +0200 Subject: [PATCH] UI wip --- speech/index.html | 1 + speech/index.js | 2 ++ speech/style.css | 34 +++++++++++++++++++++++++++------- 3 files changed, 30 insertions(+), 7 deletions(-) diff --git a/speech/index.html b/speech/index.html index e28df1e..bc83635 100644 --- a/speech/index.html +++ b/speech/index.html @@ -10,6 +10,7 @@
+

Speech2Design

diff --git a/speech/index.js b/speech/index.js index 139a070..344b28c 100644 --- a/speech/index.js +++ b/speech/index.js @@ -116,11 +116,13 @@ function startConverting() { "> ${interimTranscripts} `; } } + process.innerHTML = allTheInterim; let final = finalTranscripts + '' + interimTranscripts + ""; speech.innerHTML = final; + window.scrollTo(0, document.body.scrollHeight); textStorage = final; cleanup = localStorage.setItem( diff --git a/speech/style.css b/speech/style.css index 7dc1782..8a602b2 100644 --- a/speech/style.css +++ b/speech/style.css @@ -1,6 +1,7 @@ html, body { margin: 0; + scroll-behavior: smooth; } .interim { @@ -9,31 +10,50 @@ body { #result { font-size: 2rem; + padding-right: 1em; + align-self: flex-end; } .speech { - display: flex; margin: 0 auto; - padding: 16px; + margin-top: 64px; + padding: 32px; + display: flex; + transition: height 0.3s ease-out; } .speech > * { - flex: 1 0 50%; + flex: 1 0 45%; } .ui { - padding: 16px; - text-align: right; + position: fixed; + background-color: white; + top: 0; + z-index: 100; + width: calc(100% - 64px); + display: flex; + + padding: 8px 0; + margin: 0 32px; +} + +.ui h1 { + margin: 0; + font-size: 2rem; + font-weight: normal; + margin-right: auto; } #save { border: 1px solid currentColor; - border-radius: 1rem; + border-radius: 2rem; font-size: 1rem; - padding: 0.25em 0.5em; + padding: 0.5em; font-family: Arial, Helvetica, sans-serif; background-color: transparent; cursor: pointer; + margin-right: 1rem; } #save:hover {