Upgraded to Bootstrap 3.3.2

css/download.css

@@ -1,26 +1,34 @@
 .download .label {
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
   -webkit-transition: all 2s;
   transition: all 2s;
 }
 
+.download .title {
+  padding: 5px;
+}
+
 .download .progress {
+  background-color: #fff;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
   width: 100%;
   margin: 0;
   padding: 0;
 }
 
+.download .progress-bar {
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+}
+
 .download-name {
   font-weight: bold;
   font-size: small;
   word-wrap: break-word;
 }
 .active-download, .waiting-download, .stopped-download, .download {
+  cursor: pointer;
   width: 100%;
-  margin-bottom: 0.9em;
+  padding: 4px 5px;
-  background-color: rgb(245, 245, 245);
-  border: 1px solid rgba(0, 0, 0, 0.05);
-  border-radius: 4px 4px 4px 4px;
-  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
 }
 
 /* fix table  layout to break words */
@@ -44,8 +52,10 @@
   margin-bottom: 0px;
   margin-left: auto;
   margin-right: auto;
+  padding: 0;
 }
 .stats li {
+  display: inline-block;
   margin-bottom: 2px;
   padding: 0.75ex;
   min-width: 20ex;
@@ -53,7 +63,6 @@
 }
 
 .download-item {
-  cursor: pointer;
   margin: 0;
   padding-left: 6px;
   padding-right: 6px;
@@ -61,21 +70,19 @@
   padding-bottom: 0.5ex;
 }
 
-.download-controls {
-  width: 65px;
-}
 .download-controls .btn-group {
-  height: 28px;
-  width: 100%;
   float: right;
+  height: 28px;
+}
+.download-controls > .btn-group {
+  margin-right: 5px;
+  margin-top: 5px;
 }
-
 .download-controls .btn-group .btn {
   height: 100%;
 }
-.download-controls .btn-group .btn i {
+.download-controls .btn-group .btn span {
-  height: 100%;
+  font-size: 14px;
-  font-size: 16px;
   color: gray;
 }
 
@@ -83,10 +90,13 @@
   margin-left: 10px;
 }
 .download-files {
-  max-width: 90%;
+  margin: 0;
-  margin: 6px;
 }
 .download-files li {
+  display: inline-block;
   padding: 0.8ex;
-  margin: 6px;
+  max-width: 100%;
+  margin: 0 6px 6px 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

css/font-awesome.css

@@ -1,24 +1,24 @@
 /*!
- *  Font Awesome 4.1.0 by @davegandy - http://fontawesome.io - @fontawesome
+ *  Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome
  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
  */
 /* FONT PATH
  * -------------------------- */
 @font-face {
   font-family: 'FontAwesome';
-  src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
+  src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
-  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
+  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
   font-weight: normal;
   font-style: normal;
 }
 .fa {
   display: inline-block;
-  font-family: FontAwesome;
+  font: normal normal normal 14px/1 FontAwesome;
-  font-style: normal;
+  font-size: inherit;
-  font-weight: normal;
+  text-rendering: auto;
-  line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  transform: translate(0, 0);
 }
 /* makes the font 33% larger relative to the icon container */
 .fa-lg {
@@ -78,36 +78,24 @@
   margin-left: .3em;
 }
 .fa-spin {
-  -webkit-animation: spin 2s infinite linear;
+  -webkit-animation: fa-spin 2s infinite linear;
-  -moz-animation: spin 2s infinite linear;
+  animation: fa-spin 2s infinite linear;
-  -o-animation: spin 2s infinite linear;
-  animation: spin 2s infinite linear;
 }
-@-moz-keyframes spin {
+.fa-pulse {
-  0% {
+  -webkit-animation: fa-spin 1s infinite steps(8);
-    -moz-transform: rotate(0deg);
+  animation: fa-spin 1s infinite steps(8);
-  }
-  100% {
-    -moz-transform: rotate(359deg);
-  }
 }
-@-webkit-keyframes spin {
+@-webkit-keyframes fa-spin {
   0% {
     -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
   }
   100% {
     -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
   }
 }
-@-o-keyframes spin {
+@keyframes fa-spin {
-  0% {
-    -o-transform: rotate(0deg);
-  }
-  100% {
-    -o-transform: rotate(359deg);
-  }
-}
-@keyframes spin {
   0% {
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
@@ -120,43 +108,40 @@
 .fa-rotate-90 {
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
   -webkit-transform: rotate(90deg);
-  -moz-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
-  -o-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 .fa-rotate-180 {
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
   -webkit-transform: rotate(180deg);
-  -moz-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
-  -o-transform: rotate(180deg);
   transform: rotate(180deg);
 }
 .fa-rotate-270 {
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
   -webkit-transform: rotate(270deg);
-  -moz-transform: rotate(270deg);
   -ms-transform: rotate(270deg);
-  -o-transform: rotate(270deg);
   transform: rotate(270deg);
 }
 .fa-flip-horizontal {
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
   -webkit-transform: scale(-1, 1);
-  -moz-transform: scale(-1, 1);
   -ms-transform: scale(-1, 1);
-  -o-transform: scale(-1, 1);
   transform: scale(-1, 1);
 }
 .fa-flip-vertical {
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
   -webkit-transform: scale(1, -1);
-  -moz-transform: scale(1, -1);
   -ms-transform: scale(1, -1);
-  -o-transform: scale(1, -1);
   transform: scale(1, -1);
 }
+:root .fa-rotate-90,
+:root .fa-rotate-180,
+:root .fa-rotate-270,
+:root .fa-flip-horizontal,
+:root .fa-flip-vertical {
+  filter: none;
+}
 .fa-stack {
   position: relative;
   display: inline-block;
@@ -222,6 +207,8 @@
 .fa-check:before {
   content: "\f00c";
 }
+.fa-remove:before,
+.fa-close:before,
 .fa-times:before {
   content: "\f00d";
 }
@@ -551,7 +538,8 @@
 .fa-arrows-h:before {
   content: "\f07e";
 }
-.fa-bar-chart-o:before {
+.fa-bar-chart-o:before,
+.fa-bar-chart:before {
   content: "\f080";
 }
 .fa-twitter-square:before {
@@ -627,6 +615,7 @@
 .fa-twitter:before {
   content: "\f099";
 }
+.fa-facebook-f:before,
 .fa-facebook:before {
   content: "\f09a";
 }
@@ -1276,7 +1265,8 @@
 .fa-male:before {
   content: "\f183";
 }
-.fa-gittip:before {
+.fa-gittip:before,
+.fa-gratipay:before {
   content: "\f184";
 }
 .fa-sun-o:before {
@@ -1380,7 +1370,6 @@
 .fa-digg:before {
   content: "\f1a6";
 }
-.fa-pied-piper-square:before,
 .fa-pied-piper:before {
   content: "\f1a7";
 }
@@ -1497,6 +1486,7 @@
   content: "\f1cc";
 }
 .fa-life-bouy:before,
+.fa-life-buoy:before,
 .fa-life-saver:before,
 .fa-support:before,
 .fa-life-ring:before {
@@ -1543,6 +1533,7 @@
 .fa-history:before {
   content: "\f1da";
 }
+.fa-genderless:before,
 .fa-circle-thin:before {
   content: "\f1db";
 }
@@ -1564,3 +1555,247 @@
 .fa-bomb:before {
   content: "\f1e2";
 }
+.fa-soccer-ball-o:before,
+.fa-futbol-o:before {
+  content: "\f1e3";
+}
+.fa-tty:before {
+  content: "\f1e4";
+}
+.fa-binoculars:before {
+  content: "\f1e5";
+}
+.fa-plug:before {
+  content: "\f1e6";
+}
+.fa-slideshare:before {
+  content: "\f1e7";
+}
+.fa-twitch:before {
+  content: "\f1e8";
+}
+.fa-yelp:before {
+  content: "\f1e9";
+}
+.fa-newspaper-o:before {
+  content: "\f1ea";
+}
+.fa-wifi:before {
+  content: "\f1eb";
+}
+.fa-calculator:before {
+  content: "\f1ec";
+}
+.fa-paypal:before {
+  content: "\f1ed";
+}
+.fa-google-wallet:before {
+  content: "\f1ee";
+}
+.fa-cc-visa:before {
+  content: "\f1f0";
+}
+.fa-cc-mastercard:before {
+  content: "\f1f1";
+}
+.fa-cc-discover:before {
+  content: "\f1f2";
+}
+.fa-cc-amex:before {
+  content: "\f1f3";
+}
+.fa-cc-paypal:before {
+  content: "\f1f4";
+}
+.fa-cc-stripe:before {
+  content: "\f1f5";
+}
+.fa-bell-slash:before {
+  content: "\f1f6";
+}
+.fa-bell-slash-o:before {
+  content: "\f1f7";
+}
+.fa-trash:before {
+  content: "\f1f8";
+}
+.fa-copyright:before {
+  content: "\f1f9";
+}
+.fa-at:before {
+  content: "\f1fa";
+}
+.fa-eyedropper:before {
+  content: "\f1fb";
+}
+.fa-paint-brush:before {
+  content: "\f1fc";
+}
+.fa-birthday-cake:before {
+  content: "\f1fd";
+}
+.fa-area-chart:before {
+  content: "\f1fe";
+}
+.fa-pie-chart:before {
+  content: "\f200";
+}
+.fa-line-chart:before {
+  content: "\f201";
+}
+.fa-lastfm:before {
+  content: "\f202";
+}
+.fa-lastfm-square:before {
+  content: "\f203";
+}
+.fa-toggle-off:before {
+  content: "\f204";
+}
+.fa-toggle-on:before {
+  content: "\f205";
+}
+.fa-bicycle:before {
+  content: "\f206";
+}
+.fa-bus:before {
+  content: "\f207";
+}
+.fa-ioxhost:before {
+  content: "\f208";
+}
+.fa-angellist:before {
+  content: "\f209";
+}
+.fa-cc:before {
+  content: "\f20a";
+}
+.fa-shekel:before,
+.fa-sheqel:before,
+.fa-ils:before {
+  content: "\f20b";
+}
+.fa-meanpath:before {
+  content: "\f20c";
+}
+.fa-buysellads:before {
+  content: "\f20d";
+}
+.fa-connectdevelop:before {
+  content: "\f20e";
+}
+.fa-dashcube:before {
+  content: "\f210";
+}
+.fa-forumbee:before {
+  content: "\f211";
+}
+.fa-leanpub:before {
+  content: "\f212";
+}
+.fa-sellsy:before {
+  content: "\f213";
+}
+.fa-shirtsinbulk:before {
+  content: "\f214";
+}
+.fa-simplybuilt:before {
+  content: "\f215";
+}
+.fa-skyatlas:before {
+  content: "\f216";
+}
+.fa-cart-plus:before {
+  content: "\f217";
+}
+.fa-cart-arrow-down:before {
+  content: "\f218";
+}
+.fa-diamond:before {
+  content: "\f219";
+}
+.fa-ship:before {
+  content: "\f21a";
+}
+.fa-user-secret:before {
+  content: "\f21b";
+}
+.fa-motorcycle:before {
+  content: "\f21c";
+}
+.fa-street-view:before {
+  content: "\f21d";
+}
+.fa-heartbeat:before {
+  content: "\f21e";
+}
+.fa-venus:before {
+  content: "\f221";
+}
+.fa-mars:before {
+  content: "\f222";
+}
+.fa-mercury:before {
+  content: "\f223";
+}
+.fa-transgender:before {
+  content: "\f224";
+}
+.fa-transgender-alt:before {
+  content: "\f225";
+}
+.fa-venus-double:before {
+  content: "\f226";
+}
+.fa-mars-double:before {
+  content: "\f227";
+}
+.fa-venus-mars:before {
+  content: "\f228";
+}
+.fa-mars-stroke:before {
+  content: "\f229";
+}
+.fa-mars-stroke-v:before {
+  content: "\f22a";
+}
+.fa-mars-stroke-h:before {
+  content: "\f22b";
+}
+.fa-neuter:before {
+  content: "\f22c";
+}
+.fa-facebook-official:before {
+  content: "\f230";
+}
+.fa-pinterest-p:before {
+  content: "\f231";
+}
+.fa-whatsapp:before {
+  content: "\f232";
+}
+.fa-server:before {
+  content: "\f233";
+}
+.fa-user-plus:before {
+  content: "\f234";
+}
+.fa-user-times:before {
+  content: "\f235";
+}
+.fa-hotel:before,
+.fa-bed:before {
+  content: "\f236";
+}
+.fa-viacoin:before {
+  content: "\f237";
+}
+.fa-train:before {
+  content: "\f238";
+}
+.fa-subway:before {
+  content: "\f239";
+}
+.fa-medium:before {
+  content: "\f23a";
+}

css/modals.css

@@ -1,19 +1,5 @@
-@media (min-width: 768px) {
+.modal-backdrop {
-  .modal-large {
+  bottom: 0; /* for some reason this is missing from bootstrap.css */
-    width: 80%; /* responsive width */
-    margin-left:-40%; /* width/2) */
-  }
-}
-
-.modal-header {
-    /*padding-bottom: 0px;*/
-    margin-bottom: 0px;
-}
-
-.modal-body {
-    padding-top: 5px;
-    padding-bottom: 0px;
-    margin-bottom: 5px;
 }
 
 .modal-body textarea {
@@ -29,6 +15,7 @@
     border-radius: 4px 4px 0px 0px;
     box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
     cursor: pointer;
+    padding: 5px 15px;
 }
 
 .modal-advanced-options {

css/style.css

@@ -1,3 +1,5 @@
+
+
 input[type=checkbox], input[type=radio] {
   vertical-align: middle;
   position: relative;
@@ -67,3 +69,14 @@ input[type=checkbox], input[type=radio] {
   display: inline-block;
   white-space: nowrap;
 }
+
+.nav-header {
+  display: block;
+  padding: 3px 0;
+  font-size: 11px;
+  font-weight: bold;
+  line-height: 20px;
+  color: #999;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  text-transform: uppercase;
+}

js/ctrls/main.js

@@ -487,15 +487,15 @@ function(
 	scope.getProgressClass = function(d) {
 		switch (d.status) {
 			case "paused":
-				return "progress-info";
+				return "progress-bar-info";
 			case "error":
-				return "progress-danger";
+				return "progress-bar-danger";
 			case "removed":
-				return "progress-warning";
+				return "progress-bar-warning";
 			case "active":
-				return "progress-active";
+				return "active";
 			case "complete":
-				return "progress-success";
+				return "progress-bar-success";
 			default:
 				return "";
 		}

js/init.js

@@ -8,8 +8,7 @@ var webui = angular.module('webui', [
   'webui.ctrls.download', 'webui.ctrls.nav', 'webui.ctrls.modal', 'webui.ctrls.alert',
   'webui.ctrls.props',
   // external deps
-  'ui.bootstrap.collapse', 'ui.bootstrap.dropdownToggle',
+  'ui.bootstrap'
-  'ui.bootstrap.modal', 'ui.bootstrap.alert'
 ]);
 
 $(function() {