summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--www/index.html14
-rw-r--r--www/js/jingles.js16
-rw-r--r--www/js/shows.js4
-rw-r--r--www/js/utils.js4
-rw-r--r--www/styles/jingles.css5
-rw-r--r--www/styles/main-style.css4
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>&nbsp;&nbsp;Importieren</button>
+ <button class="uploadButton btn btn-primary"><span class="glyphicon glyphicon-upload"></span>&nbsp;&nbsp;Importieren</button>
</div>
</div>
@@ -344,19 +347,20 @@
<tfoot>
</tfoot>
</table>
- <button class="uploadButton btn btn-success"><span class="glyphicon glyphicon-upload"></span>&nbsp;&nbsp;Importieren</button>
+ <button class="uploadButton btn btn-primary"><span class="glyphicon glyphicon-upload"></span>&nbsp;&nbsp;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>&nbsp;&nbsp;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>&nbsp;&nbsp;Verschieben</button>');
+ var status = $('<span class="label"></span>');
+ var moveButton = $('<button class="btn btn-info btn-xs"><span class="glyphicon glyphicon-transfer"></span>&nbsp;&nbsp;Verschieben</button>');
var activateButton;
if (this.model.active) {
- activateButton = $('<button class="btn btn-warning btn-xs"><span class="glyphicon glyphicon-minus"></span>&nbsp;&nbsp;Deactivieren</button>');
+ activateButton = $('<button class="btn btn-warning btn-xs"><span class="glyphicon glyphicon-ban-circle"></span>&nbsp;&nbsp;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>&nbsp;&nbsp;Aktivieren</button>');
+ activateButton = $('<button class="btn btn-success btn-xs"><span class="glyphicon glyphicon-ok"></span>&nbsp;&nbsp;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>&nbsp;&nbsp;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('&nbsp;')
.append(activateButton)
- .append('&nbsp;')
.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>&nbsp;&nbsp;Importieren</button>
+// <button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-upload"></span>&nbsp;&nbsp;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>&nbsp;&nbsp;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>&nbsp;&nbsp;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;
+}