diff options
| -rw-r--r-- | www/index.html | 14 | ||||
| -rw-r--r-- | www/js/jingles.js | 16 | ||||
| -rw-r--r-- | www/js/shows.js | 4 | ||||
| -rw-r--r-- | www/js/utils.js | 4 | ||||
| -rw-r--r-- | www/styles/jingles.css | 5 | ||||
| -rw-r--r-- | www/styles/main-style.css | 4 |
6 files changed, 32 insertions, 15 deletions
diff --git a/www/index.html b/www/index.html index 835d928..57ed2f7 100644 --- a/www/index.html +++ b/www/index.html @@ -310,9 +310,12 @@ <table class="table table-striped"> <thead> <tr> + <th></th> <th>Cut #</th> <th>Titel</th> - <th>Aktionen</th> + <th>Länge</th> + <th>importiert</th> + <th class="text-center">Aktionen</th> </tr> </thead> <tbody> @@ -320,7 +323,7 @@ <tfoot> </tfoot> </table> - <button class="uploadButton btn btn-success"><span class="glyphicon glyphicon-upload"></span> Importieren</button> + <button class="uploadButton btn btn-primary"><span class="glyphicon glyphicon-upload"></span> Importieren</button> </div> </div> @@ -344,19 +347,20 @@ <tfoot> </tfoot> </table> - <button class="uploadButton btn btn-success"><span class="glyphicon glyphicon-upload"></span> Importieren</button> + <button class="uploadButton btn btn-primary"><span class="glyphicon glyphicon-upload"></span> Importieren</button> </div> </div> <table> <tr class="progressBar progressBarTemplate jingles"> + <td><span class="label label-default"><span class="glyphicon glyphicon-transfer"></span></span></td> <td class="file-bytes"> beginne... </td> - <td> + <td colspan="3"> <div class="progress"><div class="progress-bar" style="width: 0%;"></div></div> </td> - <td> + <td class="text-center"> <button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Abbrechen</button> </td> </tr> diff --git a/www/js/jingles.js b/www/js/jingles.js index 20b27c5..70d84f9 100644 --- a/www/js/jingles.js +++ b/www/js/jingles.js @@ -170,12 +170,15 @@ Rivendell.JingleCutView = function(model) { }; Rivendell.JingleCutView.prototype.render = function() { - var moveButton = $('<button class="btn btn-info btn-xs"><span class="glyphicon glyphicon-arrow-right"></span> Verschieben</button>'); + var status = $('<span class="label"></span>'); + var moveButton = $('<button class="btn btn-info btn-xs"><span class="glyphicon glyphicon-transfer"></span> Verschieben</button>'); var activateButton; if (this.model.active) { - activateButton = $('<button class="btn btn-warning btn-xs"><span class="glyphicon glyphicon-minus"></span> Deactivieren</button>'); + activateButton = $('<button class="btn btn-warning btn-xs"><span class="glyphicon glyphicon-ban-circle"></span> Deaktivieren</button>'); + status.addClass('label-success').html('<span class="glyphicon glyphicon-ok"></span>'); } else { - activateButton = $('<button class="btn btn-warning btn-xs"><span class="glyphicon glyphicon-plus"></span> Aktivieren</button>'); + activateButton = $('<button class="btn btn-success btn-xs"><span class="glyphicon glyphicon-ok"></span> Aktivieren</button>'); + status.addClass('label-danger').html('<span class="glyphicon glyphicon-ban-circle"></span>'); } var deleteButton = $('<button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash"></span> Löschen</button>'); @@ -192,14 +195,15 @@ Rivendell.JingleCutView.prototype.render = function() { this.$el = $('<tr>') .attr('id', 'jingle-' + this.model.cartNumber + '-' + this.model.number) + .append($('<td>').append(status)) .append($('<td>').text(this.model.name)) .append($('<td>').text(this.model.description)) + .append($('<td>').text(msToTimeString(this.model.length))) + .append($('<td>').text(format_datetime(new Date(this.model.originDatetime)))) .append( - $('<td>') + $('<td>').addClass('text-center') .append(moveButton) - .append(' ') .append(activateButton) - .append(' ') .append(deleteButton) ); }; diff --git a/www/js/shows.js b/www/js/shows.js index eb6fc20..84d49a5 100644 --- a/www/js/shows.js +++ b/www/js/shows.js @@ -153,7 +153,7 @@ function shows_importCart(cart) { // <td> // <button class="btn btn-info btn-xs"><span class="glyphicon glyphicon-arrow-up"></span></button> // <button class="btn btn-info btn-xs disabled"><span class="glyphicon glyphicon-arrow-down"></span></button> -// <button class="btn btn-success btn-xs"><span class="glyphicon glyphicon-upload"></span> Importieren</button> +// <button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-upload"></span> Importieren</button> // </td> function shows_newCartEntry(elem) { @@ -168,7 +168,7 @@ function shows_newCartEntry(elem) { var buttons = cart_exists ? '<button class="btn btn-danger btn-xs" onclick="shows_deleteCart(' + elem + ');">' + '<span class="glyphicon glyphicon-trash"></span> Löschen</button>' : - '<button class="btn btn-success btn-xs" onclick="shows_importCart(' + elem + ');">' + + '<button class="btn btn-primary btn-xs" onclick="shows_importCart(' + elem + ');">' + '<span class="glyphicon glyphicon-upload"></span> Importieren</button>'; return $('<tr>').append($('<td>').text(elem)) diff --git a/www/js/utils.js b/www/js/utils.js index 1359b39..fab6736 100644 --- a/www/js/utils.js +++ b/www/js/utils.js @@ -57,10 +57,10 @@ var weekday_short = new Array('So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'); function format_datetime(d) { if(Object.prototype.toString.call(d) !== '[object Date]') { - return d; + return '-'; } if (d.toString() === 'Invalid Date') { - return d; + return '-'; } var datetimestr = weekday_short[d.getDay()]; datetimestr += ' ' + Number(d.getDate()).pad(2); diff --git a/www/styles/jingles.css b/www/styles/jingles.css index 8fb1f55..1dc50c1 100644 --- a/www/styles/jingles.css +++ b/www/styles/jingles.css @@ -23,3 +23,8 @@ #app-jingles .group { margin-bottom: 40px; } + +#app-jingles table .btn { + margin-top: 0.3em; + margin-left: 0.6em; +} diff --git a/www/styles/main-style.css b/www/styles/main-style.css index 17925fb..8a4793f 100644 --- a/www/styles/main-style.css +++ b/www/styles/main-style.css @@ -93,3 +93,7 @@ body { #uploadModal div.modal-body form div.dz-preview { display: none; } + +.text-center { + text-align: center; +} |