changed <select> based show selector to bootstrap dropdown

4 files changed, 34 insertions, 24 deletions

diff --git a/www/index.html b/www/index.html
index ec7ba8b..1d891a8 100644
--- a/www/index.html
+++ b/www/index.html
@@ -118,14 +118,24 @@
         <div class="alertbox"></div>
         <div class="row">
           <div class="col-md-10">
-            <form class="well form-inline">
-              <!-- todo: fix html error: h3 is not allowed in label -->
-              <label class="control-label" for="show-selector">
-                <h3>Sendung auswählen</h3>
-              </label>&nbsp;&nbsp;
-              <select id="show-selector" class="main-selector">
-              </select>
-            </form>
+            <div class="row">
+              <div class="col-md-12" id="show-header-spacer">
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-md-3">
+                <div class="dropdown">
+                  <button type="button" class="btn btn-lg btn-primary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    Sendung auswählen <span class="caret"></span>
+                  </button>
+                  <ul class="dropdown-menu" id="show-selector">
+                  </ul>
+                </div>
+              </div>
+              <div class="col-md-9">
+                <h2 id="show-title"></h2>
+              </div>
+            </div>
           </div>
           <div class="col-md-2">
             <div id="clock">
@@ -135,11 +145,6 @@
             </div>
           </div>
         </div>
-        <div class="row">
-          <div class="col-md-12">
-            <h2 id="show-title"></h2>
-          </div>
-        </div>
         <div class="row" id="show-details">
           <div class="col-md-2">&nbsp;</div>
           <div class="col-md-2">
diff --git a/www/js/shows.js b/www/js/shows.js
index f125991..233a5c3 100644
--- a/www/js/shows.js
+++ b/www/js/shows.js
@@ -96,7 +96,7 @@ Rdxport.ShowListView.prototype.updateSelector = function() {
   var $showSelector = $('#show-selector');
 
   $showSelector.off();
-  $('option', $showSelector).remove();
+  $('li', $showSelector).remove();
 
   $(this.model.groups).sort(function(a, b) {
     if(a.title.toLowerCase() == b.title.toLowerCase()) {
@@ -104,9 +104,16 @@ Rdxport.ShowListView.prototype.updateSelector = function() {
     }
     return a.title.toLowerCase() >= b.title.toLowerCase()
   }).each(function(index, show) {
-    var name = show.id + ' | ' + show.title + ' (' + show.rhythm + ', ' + weekday[show.dayofweek] + ', ' + show.starttime + ', ' + show.length + ' Min.)';
-    $showSelector.append($('<option>').attr('value', show.id).text(name));
+    var name = show.id + ' | <strong>' + show.title + '</strong> (' + show.rhythm + ', ' + weekday[show.dayofweek] + ', ' + show.starttime + ', ' + show.length + ' Min.)';
+    var link = $('<a>').attr('href', '#').html(name).click(function() {
+      self.setCurrentShowId(show.id);
+      self.getCurrentShowView().model.fetchCarts();
+    });
+    $showSelector.append($('<li>').append(link));
   });
+  if($showSelector.children().length == 0) {
+    $showSelector.append($('<li>').append($('<a>').text('Keine Sendung gefunden!')));
+  }
 
   // todo: maybe integrate this into setCurrentShowId?
   if (!this.currentShowId) {
@@ -117,12 +124,6 @@ Rdxport.ShowListView.prototype.updateSelector = function() {
       this.setCurrentShowId(this.model.groups[0].id);
     }
   }
-  $('option[value="' + this.currentShowId + '"]', $showSelector).attr('selected', 'selected');
-
-  $showSelector.on('change', function() {
-    self.setCurrentShowId($('option:selected', $showSelector).attr('value'));
-    self.getCurrentShowView().model.fetchCarts();
-  });
 
   this.getCurrentShowView().model.fetchCarts();
 };
diff --git a/www/styles/main-style.css b/www/styles/main-style.css
index 969dcc6..a3e0c7a 100644
--- a/www/styles/main-style.css
+++ b/www/styles/main-style.css
@@ -76,9 +76,8 @@ body {
 }
 
 #clock span.clock-time {
-    padding: 0.2em;
     font-weight: bold;
-    font-size: 1.6em;
+    font-size: 1.8em;
 }
 
 #uploadModal div.modal-body {
diff --git a/www/styles/shows.css b/www/styles/shows.css
index c977334..045ae9c 100644
--- a/www/styles/shows.css
+++ b/www/styles/shows.css
@@ -22,6 +22,7 @@
 
 #show-title {
   text-align: center;
+  font-weight: bold;
 }
 
 #show-details {
@@ -33,3 +34,7 @@
   background-color: #EEE;
   color: #888;
 }
+
+#show-header-spacer {
+  margin-top: 1.3em;
+}