diff options
| -rw-r--r-- | www/index.html | 31 | ||||
| -rw-r--r-- | www/js/shows.js | 19 | ||||
| -rw-r--r-- | www/styles/main-style.css | 3 | ||||
| -rw-r--r-- | www/styles/shows.css | 5 |
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> - <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"> </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; +} |