mobile ui fix, stats fix, typeahead state fix

src/web/css/style.css

@@ -7,7 +7,7 @@ h1 {
 }
 
 input {
-  width: 80%;
+  width: 70%;
   border: 1px solid #ccc;
   padding: 8px;
   margin-bottom: 1em;
@@ -19,6 +19,22 @@ button {
   padding: 8px;
 }
 
+select {
+  background-color: #eee;
+  border: 1px solid #ccc;
+  padding: 7px;
+}
+
+#control_elements {
+  display: inline;
+}
+
+@media (max-width: 600px) {
+  #control_elements {
+    display: block;
+  }
+}
+
 #main {
   margin: auto;
   width: 90%;

src/web/js/events.js

@@ -27,9 +27,7 @@
     /** Handle changing voices. */
     handleVoiceSelect: function(ev) {
       var selectedVoice = $('select').val();
-      Ui.clearInput();
       Ui.setVoice(selectedVoice);
-      Ui.setStateFromInput();
     },
 
     /** Handle form submission. */

src/web/js/ui.js

@@ -11,17 +11,25 @@
     libraryLoadCallback: function(library) {
       var defaultSpeaker = library.getDefaultSpeaker(),
           vocabulary = library.getSpeakerVocabulary(defaultSpeaker);
+
+      // TODO: Iterate over.
+      $('#trump_wordcount').html(library.library['trump'].words.length);
+      $('#hillary_wordcount').html(library.library['hillary'].words.length);
+
       this.currentVocabulary = vocabulary;
-      $('#wordcount').html(vocabulary.words.length);
       this.setStateFromInput();
     },
 
     /** Set the voice. */
     setVoice: function(voice) {
       var vocabulary = Library.getSpeakerVocabulary(voice);
-      if (vocabulary) {
-        this.currentVocabulary = vocabulary;
+      if (!vocabulary) {
+        return;
       }
+      this.currentVocabulary = vocabulary;
+      this.clearInput();
+      this.clearSuggestedWords();
+      this.setStateFromInput();
     },
 
     /** Clear the input box. */
@@ -81,5 +89,10 @@
 
       $('#typeahead ul').html(html);
     },
+
+    /** Clear the suggested words. */
+    clearSuggestedWords: function() {
+      $('#typeahead ul').html('');
+    },
   }
 }());

web/index.html

@@ -14,16 +14,18 @@
       <div id="controls">
         <form id="form" action="#">
           <input id="text">
-          <select name="voice">
-            <option value="trump">trump</option>
-            <option value="hillary">hillary</option>
-          </select>
-          <button id="submit">Submit</button>
+          <div id="control_elements">
+            <select name="voice">
+              <option value="trump">trump</option>
+              <option value="hillary">hillary</option>
+            </select>
+            <button id="submit">Submit</button>
+          </div>
         </form>
       </div>
       <ul id="stats">
-        <li>Currently featuring <span id="wordcount">0</span> Trump words.</li>
-        <li>Next up: Hillary.</li>
+        <li>Currently featuring <span id="trump_wordcount">0</span> Trump words.</li>
+        <li>Now with <span id="hillary_wordcount">0</span> Hillary words.</li>
       </ul>
     </div>
     <audio id="sound"></audio>