UI wip

3 years ago · e65e4875e7
parent 5969005015
commit e65e4875e7
3 changed files with 30 additions and 7 deletions
--- a/speech/index.html
+++ b/speech/index.html
@ -10,6 +10,7 @@
 </head>
 <body>
    <div class="ui">
+        <h1>Speech2Design</h1>
        <button id="save">Save</button>
        <button id="reset">Reset</button>
    </div>
--- a/speech/index.js
+++ b/speech/index.js
@ -116,11 +116,13 @@ function startConverting() {
 					"> ${interimTranscripts} </span> `;
 				}
 			}
+
 			process.innerHTML = allTheInterim;
 			let final =
 				finalTranscripts + '<span class="interim">' + interimTranscripts + "</span>";

 			speech.innerHTML = final;
+			window.scrollTo(0, document.body.scrollHeight);

 			textStorage = final;
 			cleanup = localStorage.setItem(
--- 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 {