Merge pull request #728 from Swayamsvk/spk

fixed speak text button and made it responsive.
llaske · Mar 23, 2020 · a2c5ab3 · a2c5ab3
2 parents bb6f593 + 4cd8bcb
commit a2c5ab3
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 15 deletions.
diff --git a/activities/Speak.activity/css/activity.css b/activities/Speak.activity/css/activity.css
@@ -35,25 +35,60 @@
 	width:50px;
 	margin:8px;
 	right:4px;
-	bottom: 15px;
+	bottom: -1.1vh;
 	z-index:1;
 	position:absolute;
 	background-image: url(../icons/go-right.svg);
 	background-size: 55px 50px;
 	background-position: 50% 50%;
 }
 
-#userText {
-	height:40px;
+.search-field-border {
+	position: relative;
+	border-radius: 22px;
 	margin:5px;
-	margin-left:8vh;
-	width:90vw;
-	font-size: 28pt;
-	font-weight: bold;
+	top: 2px;
+	margin-left: 8vh;
+	width: 89vw;
+	height: 47px;
+	display: inline-block;
+	vertical-align: top;
 	z-index:0;
 }
+
+.search-field-border-focus {
+	background-color: white;
+	border: 2px solid white;
+}
+
+.search-field-border-nofocus {
+	background-color: #e5e5e5;
+	border: 2px solid #e5e5e5;
+}
 
-
+#userText {
+	opacity: 1;
+	margin-left: 30px;
+	border: 0px;
+	display: inline-block;
+	background-color: #e5e5e5;
+	height:40px;
+	width: 80vw;
+	line-height: 22px;
+	outline: 0;
+	font-size: 25pt;
+	font-weight: bold;
+	position: relative;
+	top: 1px;
+  }
+
+@media screen and (max-width: 940px) {
+	#userText{
+		width: 68vw;
+	}
+
+}
+
 /** Custom dropdown arrow for select tag **/
 
 .dropdown {

diff --git a/activities/Speak.activity/index.html b/activities/Speak.activity/index.html
@@ -50,14 +50,16 @@
 
 	<!-- Created select tag so user can access history of talk -->
 	<div style="top:60px;position:absolute;z-index:2" id="speechBox">
-		<!-- The select tag acts like a drop down button, so it passes its value to the input box and not to itself -->
-		<select id = 'combo-box' title = "Saved Talk" onchange="document.getElementById('userText').value=this.options[this.selectedIndex].text; document.getElementById('idValue').value=this.options[this.selectedIndex].value;">
+	  <!-- The select tag acts like a drop down button, so it passes its value to the input box and not to itself -->
+	  <select id = 'combo-box' title = "Saved Talk" onchange="document.getElementById('userText').value=this.options[this.selectedIndex].text; document.getElementById('idValue').value=this.options[this.selectedIndex].value;">
 	  </select>
-		<span class = "dropdown" name = "Saved Talk"></span>
-		<input id ="userText" name="userText" type="text" onfocus="this.select()" ></input>
-		<input name="idValue" id="idValue" type="hidden">
-		<button id="speakText" class="toolbutton" title="Speak"></button>
-	  <hr>
+    <span class = "dropdown" name = "Saved Talk"></span>
+    <div class="search-field-border search-field-border-nofocus">
+      <input id ="userText" class="search-field-input" name="userText" type="text"></input>
+      <button id="speakText" class="toolbutton" title="Speak"></button>
+    </div>
+    <input name="idValue" id="idValue" type="hidden">
+		<hr>
 	</div>
 
   <div style="top:0px;">