diff options
| -rw-r--r-- | www/index.html | 29 | ||||
| -rw-r--r-- | www/js/musicpools.js | 21 | ||||
| -rw-r--r-- | www/styles/jingles.css | 10 | ||||
| -rw-r--r-- | www/styles/musicgrid.css | 6 | ||||
| -rw-r--r-- | www/styles/musicpools.css | 8 |
5 files changed, 49 insertions, 25 deletions
diff --git a/www/index.html b/www/index.html index 1d891a8..56130cc 100644 --- a/www/index.html +++ b/www/index.html @@ -197,14 +197,22 @@ <div id="app-musicpools" class="container-fluid app-tab"> <div class="alertbox"></div> <div class="row"> - <form class="well form-inline"> - <!-- todo: fix html error: h3 is not allowed in label --> - <label class="control-label" for="musicpool-selector"> - <h3>Musikpool auswählen</h3> - </label> - <select id="musicpool-selector" class="main-selector"> - </select> - </form> + <div class="col-md-12" id="musicpool-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"> + Musikpool auswählen <span class="caret"></span> + </button> + <ul class="dropdown-menu" id="musicpool-selector"> + </ul> + </div> + </div> + <div class="col-md-9"> + <h2 id="musicpool-title"></h2> + </div> </div> <div class="musicpoolContainer"> @@ -213,7 +221,7 @@ <div id="app-musicgrid" class="container-fluid app-tab"> <div class="alertbox"></div> - <h1>Musikgrid</h1> + <h2 id="musicgrid-title">Musikgrid</h2> <table class="table table-striped"> <thead> <tr> @@ -300,7 +308,7 @@ <div class="row group jingleGroupTemplate"> <div class="col-md-12"> - <h2></h2> + <h2 class="jingle-title"></h2> <table class="table table-striped"> <thead> <tr> @@ -323,7 +331,6 @@ <div class="row musicpool musicpoolTemplate"> <div class="col-md-12"> - <h2></h2> <table class="table table-striped"> <thead> <tr> diff --git a/www/js/musicpools.js b/www/js/musicpools.js index 9d21427..5b3d491 100644 --- a/www/js/musicpools.js +++ b/www/js/musicpools.js @@ -96,14 +96,21 @@ Rdxport.MusicpoolsView.prototype.updateSelector = function() { var $musicpoolSelector = $('#musicpool-selector'); $musicpoolSelector.off(); - $('option', $musicpoolSelector).remove(); + $('li', $musicpoolSelector).remove(); $(this.model.groups).sort(function(a, b) { return a.title.toLowerCase() >= b.title.toLowerCase() }).each(function(index, musicpool) { - var name = musicpool.title + ' (' + musicpool.clock + ')'; - $musicpoolSelector.append($('<option>').attr('value', musicpool.clock).text(name)); + var name = '<strong>' + musicpool.title + '</strong> (' + musicpool.clock + ')'; + var link = $('<a>').attr('href', '#').html(name).click(function() { + self.setCurrentPoolId(musicpool.clock); + self.getCurrentPoolView().model.fetchCarts(); + }); + $musicpoolSelector.append($('<li>').append(link)); }); + if($musicpoolSelector.children().length == 0) { + $musicpoolSelector.append($('<li>').append($('<a>').text('Keinen Musikpool gefunden!'))); + } // todo: maybe integrate this into setCurrentShowId? if (!this.currentPoolId) { @@ -114,12 +121,6 @@ Rdxport.MusicpoolsView.prototype.updateSelector = function() { this.setCurrentPoolId(this.model.groups[0].id); } } - $('option[value="' + this.currentPoolId + '"]', $musicpoolSelector).attr('selected', 'selected'); - - $musicpoolSelector.on('change', function() { - self.setCurrentPoolId($('option:selected', $musicpoolSelector).attr('value')); - self.getCurrentPoolView().model.fetchCarts(); - }); this.getCurrentPoolView().model.fetchCarts(); }; @@ -156,7 +157,7 @@ Rdxport.MusicpoolView.prototype.render = function() { this.$el = $('#hiddenTemplates .musicpoolTemplate').clone().removeClass('musicpoolTemplate'); $('#app-musicpools .musicpoolContainer').html(this.$el); - $('h2', this.$el).text(this.model.title); + $('#musicpool-title').text(this.model.title); $('table tbody tr', this.$el).remove(); this.cartViews = []; diff --git a/www/styles/jingles.css b/www/styles/jingles.css index 1dc50c1..d8d5116 100644 --- a/www/styles/jingles.css +++ b/www/styles/jingles.css @@ -21,10 +21,14 @@ */ #app-jingles .group { - margin-bottom: 40px; + margin-bottom: 40px; } #app-jingles table .btn { - margin-top: 0.3em; - margin-left: 0.6em; + margin-top: 0.3em; + margin-left: 0.6em; +} + +h2.jingle-title { + font-weight: bold; } diff --git a/www/styles/musicgrid.css b/www/styles/musicgrid.css index 44e72c0..53e2c01 100644 --- a/www/styles/musicgrid.css +++ b/www/styles/musicgrid.css @@ -21,5 +21,9 @@ */ #app-musicgrid { - padding: 0; + padding: 0; +} + +#musicgrid-title { + font-weight: bold; } diff --git a/www/styles/musicpools.css b/www/styles/musicpools.css index beca7bc..c0652f1 100644 --- a/www/styles/musicpools.css +++ b/www/styles/musicpools.css @@ -19,3 +19,11 @@ * You should have received a copy of the GNU Affero General Public License * along with rhwebimport. If not, see <http://www.gnu.org/licenses/>. */ + +#musicpool-title { + font-weight: bold; +} + +#musicpool-header-spacer { + margin-top: 1.3em; +} |