use bootstrap 3 (navbar is somewhat broken)

4 files changed, 74 insertions, 50 deletions

diff --git a/www/index.html b/www/index.html
index d199f9b..aaa1c7c 100644
--- a/www/index.html
+++ b/www/index.html
@@ -8,7 +8,7 @@
   <meta name="author" content="Christian Pointner <equinox@helsinki.at>, Peter Grassberger <petertheone@gmail.com>">
 
   <link rel="shortcut icon" href="/img/favicon.ico" />
-  <link href="/javascript/twitter-bootstrap/css/bootstrap.css" rel="stylesheet">
+  <link href="/javascript/bootstrap/css/bootstrap.css" rel="stylesheet">
   <link href="/styles/main-style.css" rel="stylesheet">
   <link href="/styles/auth.css" rel="stylesheet">
   <link href="/styles/shows.css" rel="stylesheet">
@@ -45,23 +45,30 @@
         <input id="username" type="text" class="form-control" placeholder="Benutzername" required autofocus>
         <input id="password" type="password" class="form-control" placeholder="Passwort" required>
         <div class="alertbox"></div>
-        <button class="btn btn-primary btn-large" type="submit"><i class="icon-user icon-white"></i> Anmelden</button>
+        <button class="btn btn-primary btn-lg" type="submit"><i class="icon-user icon-white"></i> Anmelden</button>
       </form>
 
     </div>
 
     <div id="mainwindow">
 
-      <div class="navbar navbar-fixed-top">
-        <div class="navbar-inner">
-          <div class="container-fluid">
-            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+      <nav class="navbar navbar-inverse navbar-default navbar-fixed-top">
+        <div class="container-fluid">
+          <div class="navbar-header">
+            <!--<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
-            </a>
-            <span class="brand">Radio Helsinki - Import</span>
-            <div class="nav-collapse">
+            </a>-->
+            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
+              <span class="sr-only">Toggle navigation</span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+            </button>
+            <span class="navbar-brand">Radio Helsinki - Import</span>
+
+            <!--<div class="nav-collapse">
               <ul class="nav">
                 <li id="nav-btn-shows"><a href="/shows/" onclick="event.preventDefault(); apps_select('shows')">Sendungen</a></li>
                 <li id="nav-btn-jingles"><a href="/jingles/" onclick="event.preventDefault(); apps_select('jingles')">Jingles</a></li>
@@ -70,14 +77,31 @@
               </ul>
               <form id="logoutform" class="navbar-form pull-right">
                 <span class="navbar-text">angemeldet als <strong id="username-field">UNKNOWN</strong></span>&nbsp;&nbsp;
-                <button style="margin-top: 0;" type="button" class="btn btn-danger btn-small" onclick="auth_logout()">
+                <button style="margin-top: 0;" type="button" class="btn btn-danger btn-sm" onclick="auth_logout()">
                   <i class="icon-off icon-white"></i> Abmelden
                 </button>
               </form>
+            </div>-->
+
+            <div class="collapse navbar-collapse navbar-right" id="navbar-collapse-1">
+              <ul class="nav navbar-nav">
+                <li id="nav-btn-shows"><a href="/shows/" onclick="event.preventDefault(); apps_select('shows')">Sendungen</a></li>
+                <li id="nav-btn-jingles"><a href="/jingles/" onclick="event.preventDefault(); apps_select('jingles')">Jingles</a></li>
+                <li id="nav-btn-musicpools"><a href="/musicpools/" onclick="event.preventDefault(); apps_select('musicpools')">Musikpools</a></li>
+                <li id="nav-btn-musicgrid"><a href="/musicgrid/" onclick="event.preventDefault(); apps_select('musicgrid')">Musikgrid</a></li>
+              </ul>
+
+              <form id="logoutform" class="navbar-form pull-right">
+                <p class="navbar-text">angemeldet als <strong id="username-field">UNKNOWN</strong></p>
+                <button type="button" class="btn btn-danger btn-sm" onclick="auth_logout()">
+                  <span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Abmelden
+                </button>
+              </form>
             </div>
+
           </div>
         </div>
-      </div>
+      </nav>
 
       <div class="modal hide fade" id="uploadModal">
         <div class="modal-header">
@@ -111,14 +135,14 @@
           </table>
         </div>
         <div class="modal-footer">
-          <button class="btn" data-dismiss="modal">Abbrechen</button>
+          <button class="btn btn-default" data-dismiss="modal">Abbrechen</button>
         </div>
       </div>
 
       <div id="app-shows" class="container-fluid">
         <div class="alertbox"></div>
-        <div class="row-fluid">
-          <div class="span10">
+        <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">
@@ -128,7 +152,7 @@
               </select>
             </form>
           </div>
-          <div class="span2">
+          <div class="col-md-2">
             <div id="clock">
               <span class="current-week"></span>
               <span class="clock-date"></span>
@@ -136,29 +160,29 @@
             </div>
           </div>
         </div>
-        <div class="row-fluid">
-          <div class="span12">
+        <div class="row">
+          <div class="col-md-12">
             <h2 id="show-title"></h2>
           </div>
         </div>
-        <div class="row-fluid" id="show-details">
-          <div class="span2">&nbsp;</div>
-          <div class="span2">
+        <div class="row" id="show-details">
+          <div class="col-md-2">&nbsp;</div>
+          <div class="col-md-2">
             <strong>Tag:</strong> <span id="show-dow"></span>
           </div>
-          <div class="span2">
+          <div class="col-md-2">
             <strong>Rythmus:</strong> <span id="show-rhythm"></span>
           </div>
-          <div class="span2">
+          <div class="col-md-2">
             <strong>Startzeit:</strong> <span id="show-starttime"></span>
           </div>
-          <div class="span2">
+          <div class="col-md-2">
             <strong>Dauer:</strong> <span id="show-length"></span>
           </div>
-          <div class="span2">&nbsp;</div>
+          <div class="col-md-2">&nbsp;</div>
         </div>
-        <div class="row-fluid">
-          <div class="span12">
+        <div class="row">
+          <div class="col-md-12">
             <table class="table table-striped" id="show-carts">
               <thead>
                 <tr>
@@ -189,7 +213,7 @@
 
       <div id="app-musicpools" class="container-fluid">
         <div class="alertbox"></div>
-        <div class="row-fluid">
+        <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">
@@ -291,8 +315,8 @@
 
     <div id="hiddenTemplates" class="hidden">
 
-      <div class="row-fluid group jingleGroupTemplate">
-        <div class="span12">
+      <div class="row group jingleGroupTemplate">
+        <div class="col-md-12">
           <h2></h2>
           <table class="table table-striped">
             <thead>
@@ -307,12 +331,12 @@
             <tfoot>
             </tfoot>
           </table>
-          <button class="uploadButton btn btn-success btn"><i class="icon-upload icon-white"></i> Importieren</button>
+          <button class="uploadButton btn btn-success"><i class="glyphicon glyphicon-upload glyphicon-white"></i> Importieren</button>
         </div>
       </div>
 
-      <div class="row-fluid musicpool musicpoolTemplate">
-        <div class="span12">
+      <div class="row musicpool musicpoolTemplate">
+        <div class="col-md-12">
           <h2></h2>
           <table class="table table-striped">
             <thead>
@@ -331,7 +355,7 @@
             <tfoot>
             </tfoot>
           </table>
-          <button class="uploadButton btn btn-success btn"><i class="icon-upload icon-white"></i> Importieren</button>
+          <button class="uploadButton btn btn-success"><i class="glyphicon glyphicon-upload glyphicon-white"></i> Importieren</button>
         </div>
       </div>
 
@@ -344,7 +368,7 @@
             <div class="progress"><div class="bar" style="width: 0%;"></div></div>
           </td>
           <td>
-            <button class="btn btn-danger btn-mini"><i class="icon-remove icon-white"></i> Abbrechen</button>
+            <button class="btn btn-danger btn-xs"><i class="glyphicon glyphicon-remove glyphicon-white"></i> Abbrechen</button>
           </td>
         </tr>
       </table>
@@ -364,7 +388,7 @@
             <div class="progress"><div class="bar" style="width: 0%;"></div></div>
           </td>
           <td>
-            <button class="btn btn-danger btn-mini"><i class="icon-remove icon-white"></i> Abbrechen</button>
+            <button class="btn btn-danger btn-xs"><i class="glyphicon glyphicon-remove glyphicon-white"></i> Abbrechen</button>
           </td>
         </tr>
       </table>
diff --git a/www/js/jingles.js b/www/js/jingles.js
index 3b3b176..8767095 100644
--- a/www/js/jingles.js
+++ b/www/js/jingles.js
@@ -170,14 +170,14 @@ Rivendell.JingleCutView = function(model) {
 };
 
 Rivendell.JingleCutView.prototype.render = function() {
-  var moveButton = $('<button class="btn btn-info btn-mini"><i class="icon-arrow-right icon-white"></i> Verschieben</button>');
+  var moveButton = $('<button class="btn btn-info btn-xs"><i class="icon-arrow-right icon-white"></i> Verschieben</button>');
   var activateButton;
   if (this.model.active) {
-    activateButton = $('<button class="btn btn-warning btn-mini"><i class="icon-minus icon-white"></i> Deactivieren</button>');
+    activateButton = $('<button class="btn btn-warning btn-xs"><i class="icon-minus icon-white"></i> Deactivieren</button>');
   } else {
-    activateButton = $('<button class="btn btn-warning btn-mini"><i class="icon-plus icon-white"></i> Aktivieren</button>');
+    activateButton = $('<button class="btn btn-warning btn-xs"><i class="icon-plus icon-white"></i> Aktivieren</button>');
   }
-  var deleteButton = $('<button class="btn btn-danger btn-mini"><i class="icon-trash icon-white"></i> Löschen</button>');
+  var deleteButton = $('<button class="btn btn-danger btn-xs"><i class="icon-trash icon-white"></i> Löschen</button>');
 
   var self = this;
   moveButton.on('click', function() {
diff --git a/www/js/musicpools.js b/www/js/musicpools.js
index 8fd59f4..c63c5ae 100644
--- a/www/js/musicpools.js
+++ b/www/js/musicpools.js
@@ -209,7 +209,7 @@ Rivendell.MusicpoolCartView.prototype.render = function() {
     }
   }
 
-  var deleteButton = $('<button class="btn btn-danger btn-mini"><i class="icon-trash icon-white"></i> Löschen</button>');
+  var deleteButton = $('<button class="btn btn-danger btn-xs"><i class="icon-trash icon-white"></i> Löschen</button>');
 
   var self = this;
   deleteButton.on('click', function() {
diff --git a/www/js/shows.js b/www/js/shows.js
index c325e01..d18cd1b 100644
--- a/www/js/shows.js
+++ b/www/js/shows.js
@@ -146,14 +146,14 @@ function shows_importCart(cart) {
 }
 
 // <td>
-//   <button class="btn btn-info btn-mini disabled"><i class="icon-arrow-up icon-white"></i></button>
-//   <button class="btn btn-info btn-mini disabled"><i class="icon-arrow-down icon-white"></i></button>
-//   <button class="btn btn-danger btn-mini"><i class="icon-trash icon-white"></i> Löschen</button>
+//   <button class="btn btn-info btn-xs disabled"><i class="icon-arrow-up icon-white"></i></button>
+//   <button class="btn btn-info btn-xs disabled"><i class="icon-arrow-down icon-white"></i></button>
+//   <button class="btn btn-danger btn-xs"><i class="icon-trash icon-white"></i> Löschen</button>
 // </td>
 // <td>
-//   <button class="btn btn-info btn-mini"><i class="icon-arrow-up icon-white"></i></button>
-//   <button class="btn btn-info btn-mini disabled"><i class="icon-arrow-down icon-white"></i></button>
-//   <button class="btn btn-success btn-mini"><i class="icon-upload icon-white"></i> Importieren</button>
+//   <button class="btn btn-info btn-xs"><i class="icon-arrow-up icon-white"></i></button>
+//   <button class="btn btn-info btn-xs disabled"><i class="icon-arrow-down icon-white"></i></button>
+//   <button class="btn btn-success btn-xs"><i class="icon-upload icon-white"></i> Importieren</button>
 // </td>
 
 function shows_newCartEntry(elem) {
@@ -166,9 +166,9 @@ function shows_newCartEntry(elem) {
   cart.lastplayed = cart_exists ? format_datetime(shows_group_carts[elem].lastplayed) : '-';
 
   var buttons = cart_exists ?
-        '<button class="btn btn-danger btn-mini" onclick="shows_deleteCart(' + elem + ');">' +
+        '<button class="btn btn-danger btn-xs" onclick="shows_deleteCart(' + elem + ');">' +
            '<i class="icon-trash icon-white"></i> Löschen</button>' :
-        '<button class="btn btn-success btn-mini" onclick="shows_importCart(' + elem + ');">' +
+        '<button class="btn btn-success btn-xs" onclick="shows_importCart(' + elem + ');">' +
            '<i class="icon-upload icon-white"></i> Importieren</button>';
 
   return $('<tr>').append($('<td>').text(elem))
@@ -183,7 +183,7 @@ function shows_newCartEntry(elem) {
 
 function shows_newImportingEntry(cart) {
   var progress_bar = '<div class="progress"><div class="bar" style="width: 0%;"></div></div>';
-  var cancel_button = '<button class="btn btn-danger btn-mini">' +
+  var cancel_button = '<button class="btn btn-danger btn-xs">' +
                       '<i class="icon-remove icon-white"></i> Abbrechen</button>';
 
   return $('<tr>').append($('<td>').text(cart))
@@ -195,7 +195,7 @@ function shows_newImportingEntry(cart) {
 }
 
 function shows_newImportErrorEntry(cart, msg) {
-  var dismiss_button = '<button class="btn btn-info btn-mini">' +
+  var dismiss_button = '<button class="btn btn-info btn-xs">' +
                        '<i class="icon-remove icon-white"></i> Ok</button>';
 
   var xmlDoc = $.parseXML(msg);