cleaned up css favoring pure bootstrap style

psypuff · May 7, 2016 · 3b89a3f · 3b89a3f
1 parent aeeea09
commit 3b89a3f
Show file tree

Hide file tree

Showing 15 changed files with 174 additions and 470 deletions.
diff --git a/app/views/Index.scala.html b/app/views/Index.scala.html
@@ -8,8 +8,8 @@
         <meta name="author" content="">
         <title>{{title}}</title>
         <link rel="icon" type="image/png" href='@routes.Assets.versioned("img/favicon.png")'>
-        <link rel="stylesheet" href='@routes.Assets.versioned("css/app.css")'>
         <link rel="stylesheet" href='@routes.Assets.versioned("css/bootstrap.min.css")'>
+        <link rel="stylesheet" href='@routes.Assets.versioned("css/app.css")'>
         <link rel='stylesheet' href='@routes.WebJarAssets.at(WebJarAssets.locate("css/font-awesome.min.css"))'>
         <script type='text/javascript' src='@routes.WebJarAssets.at(WebJarAssets.locate("tether.min.js"))'></script>
         <script type='text/javascript' src='@routes.WebJarAssets.at(WebJarAssets.locate("jquery.min.js"))'></script>

diff --git a/public/alerts.html b/public/alerts.html
@@ -5,11 +5,11 @@
 		</span>
     <i ng-class="a.icon">&nbsp;</i>
     <a ng-class="a.class" data-toggle="collapse" data-parent="#alert_box_{{a.id}}" target="_self" href="#alert_details_{{a.id}}" ng-show="a.hasResponse()">
-      {{a.message}}
+      <span ng-class="a.class">{{a.message}}</span>
     </a>
     <span ng-show="!a.hasResponse()">{{a.message}}</span>
     <div ng-show="a.hasResponse()" id="alert_details_{{a.id}}" class="panel-collapse collapse">
-      <pre ng-class="a.class" class="alert response-pre">{{a.getResponse()}}</pre>
+      <pre class="alert">{{a.getResponse()}}</pre>
     </div>
   </div>
 </div>
diff --git a/public/app.js b/public/app.js
@@ -888,7 +888,7 @@ angular.module('cerebro').directive('ngProgress',
           text: '=text'
         },
         template: function (elem, attrs) {
-          return '<span class="detail">{{text}}</span>' +
+          return '<span class="detail"><small>{{text}}</small></span>' +
                   '<div class="progress progress-thin">' +
               '<div class="progress-bar-info" style="width: {{value}}%"' +
               'ng-class="{\'progress-bar-danger\': {{(value / max) > 0.75}}}">' +
@@ -993,28 +993,28 @@ angular.module('cerebro').factory('AlertService', function() {
   // creates an error alert
   this.error = function(msg, resp, timeout) {
     timeout = timeout ? timeout : 7500;
-    var alert = new Alert(msg, resp, 'error', 'red', 'fa fa-warning');
+    var alert = new Alert(msg, resp, 'error', 'alert-danger', 'fa fa-warning');
     return this.addAlert(alert, timeout);
   };
 
   // creates an info alert
   this.info = function(msg, resp, timeout) {
     timeout = timeout ? timeout : 2500;
-    var alert = new Alert(msg, resp, 'info', 'blue', 'fa fa-info');
+    var alert = new Alert(msg, resp, 'info', 'alert-info', 'fa fa-info');
     return this.addAlert(alert, timeout);
   };
 
   // creates success alert
   this.success = function(msg, resp, timeout) {
     timeout = timeout ? timeout : 2500;
-    var alert = new Alert(msg, resp, 'success', 'green', 'fa fa-check');
+    var alert = new Alert(msg, resp, 'success', 'alert-success', 'fa fa-check');
     return this.addAlert(alert, timeout);
   };
 
   // creates a warn alert
   this.warn = function(msg, resp, timeout) {
     timeout = timeout ? timeout : 5000;
-    var alert = new Alert(msg, resp, 'warn', 'yellow', 'fa fa-info');
+    var alert = new Alert(msg, resp, 'warn', 'alert-warning', 'fa fa-info');
     return this.addAlert(alert, timeout);
   };
 

diff --git a/public/connect.html b/public/connect.html
@@ -1,19 +1,16 @@
-<div class="row connect-page">
-  <div class="col-lg-offset-3 col-lg-6">
+<div class="row">
+  <div class="col-lg-offset-4 col-lg-4">
     <div>
       <h2><i class="fa fa-cloud"></i> Welcome to Cerebro</h2>
     </div>
     <div class="content">
       <div>
         <label>Known hosts</label>
       </div>
-      <table class="table table-bordered table-condensed table-rounded table-inverse shard-map">
+      <table class="table table-bordered table-condensed table-rounded shard-map">
         <tr ng-repeat="host in hosts track by $index">
-          <td>
-          <span class="pull-right">
-            <i class="fa fa-fw fa-plug normal-action" ng-click="connect(host)"> </i>
-          </span>
-            <span class="normal-action" ng-click="connect(host)">{{host}}</span>
+          <td class="normal-action" ng-click="connect(host)">
+            <span>{{host}}</span>
           </td>
         </tr>
       </table>
@@ -28,7 +25,7 @@ <h2><i class="fa fa-cloud"></i> Welcome to Cerebro</h2>
         <span class="pull-left subtitle" ng-show="connecting">
           <i class="fa fa-fw fa-circle-o-notch fa-spin"> </i> Connecting
         </span>
-          <button type="button" class="btn btn-primary pull-right" ng-click="connect(host)">Connect</button>
+          <button type="button" class="btn btn-success pull-right" ng-click="connect(host)">Connect</button>
         </div>
       </div>
     </div>