From 0025cb81db69fcc009aa9b8a30525525bb5f117c Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Thu, 11 Feb 2016 05:38:37 -0500
Subject: [PATCH] mobile ui fix, stats fix, typeahead state fix

---
 src/web/css/style.css | 18 +++++++++++++++++-
 src/web/js/events.js  |  2 --
 src/web/js/ui.js      | 19 ++++++++++++++++---
 web/index.html        | 16 +++++++++-------
 4 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/src/web/css/style.css b/src/web/css/style.css
index 5068f9b690..f64959629b 100644
--- a/src/web/css/style.css
+++ b/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%;
diff --git a/src/web/js/events.js b/src/web/js/events.js
index 1757c05fde..42138caf49 100644
--- a/src/web/js/events.js
+++ b/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. */
diff --git a/src/web/js/ui.js b/src/web/js/ui.js
index 6d98f9c105..a5d5929d5e 100644
--- a/src/web/js/ui.js
+++ b/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('');
+    },
   }
 }());
diff --git a/web/index.html b/web/index.html
index 0ac520e9f2..62cfd3b5e1 100644
--- a/web/index.html
+++ b/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>