Commit 3b89a3f5 authored by Leonardo Menezes's avatar Leonardo Menezes
Browse files

cleaned up css favoring pure bootstrap style

parent aeeea099

app/views/Index.scala.html

+1 −1
Original line number Diff line number Diff line
@@ -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>

public/alerts.html

+2 −2
Original line number Diff line number Diff line
@@ -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>

public/app.js

+5 −5
Original line number Diff line number Diff line
@@ -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);

  };

public/connect.html

+6 −9
Original line number Diff line number Diff line 
<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>
@@ -7,13 +7,10 @@ 
      <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 @@ 
        <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>

public/css/app.css

+67 −358
Original line number Diff line number Diff line 
body {

    padding-top: 50px;

}

body { padding-top: 50px; font-weight: normal; }



.content {

    padding-top: 20px;

    padding-bottom: 10px;

    height: 100%;

    min-height: 100%;

}

.content { padding-top: 20px; padding-bottom: 10px; height: 100%; min-height: 100%; }



/** Overview **/

table.shard-map {

    table-layout: fixed;

    -webkit-touch-callout: none; /* iOS Safari */

    -webkit-user-select: none; /* Chrome/Safari/Opera */

    -khtml-user-select: none; /* Konqueror */

    -moz-user-select: none; /* Firefox */

    -ms-user-select: none; /* IE/Edge */

    user-select: none; /* non-prefixed version, currently */

}

table.shard-map { table-layout: fixed; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }



@-moz-document url-prefix() {

    table.shard-map {
@@ -29,358 +14,79 @@ table.shard-map { 
    }

}



.table.shard-map td, .table th {

    padding: .4rem !important;

}



.disabled {

    opacity: 0.2;

}



.title {

    font-weight: 500;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    display: block;

}

.table.shard-map td, .table th { padding: .4rem !important; }



.subtitle {

    font-size: 11px;

    font-weight: 400;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    display: block;

}

.disabled { opacity: 0.2; }



.detail {

    font-size: 10px;

    font-weight: 300;

}

/** navbar **/

.navbar-red { border-bottom: 5px solid #E64759 !important; }

.navbar-yellow { border-bottom: 5px solid #E4D836 !important; }

.navbar-green { border-bottom: 5px solid #1AC98E !important; }

.navbar- { border-bottom: 5px solid #55595c !important; }



/** Navbar **/

.navbar-red {

    /*background-color: #222426 !important;*/

    border-bottom: 5px solid #E64759 !important;

}



.navbar-yellow {

    /*background-color: #222426 !important;*/

    border-bottom: 5px solid #E4D836 !important;

}



.navbar-green {

    /*background-color: #222426 !important;*/

    border-bottom: 5px solid #1AC98E !important;

}

.navbar- {

    border-bottom: 5px solid #55595c !important;

}



/** Shards **/

.shard {

    display: inline-block;

    width: 22px;

    height: 22px;

    vertical-align: middle;

    text-align: center;

    line-height: 17px;

    margin-top: 2px;

    margin-bottom: 2px;

}



.shard-started {

    border: 2px solid #1AC98E;

    color: #1AC98E;

}



.shard-initializing {

    border: 1px solid #1CA8DD;

    color: #1CA8DD;

}



.shard-relocated {

    border: 1px solid #9F85FF;

    color: #9F85FF;

}



.shard-recovering {

    border: 1px solid #E4D836;

    color: #E4D836;

}



.shard-unassigned {

    border: 1px solid #8B8F95;

    color: #8B8F95;

}



.shard-replica {

    border: 1px dashed;

    opacity: 0.7;

}



/** Cluster stats **/

.stats {

    padding-top: 0px;

    padding-bottom: 20px;

}



.stat {

    border: 1px solid #55595c;

    text-align: center;

    width: 100%;

    display: inline-block;

    min-height: 32px;

    margin-top: 5px;

    margin-bottom: 5px;

    height: auto;

    line-height: 28px;

}



.stat-value {

    font-size: 16px;

}



.stat-description {

    font-size: 12px;

    font-weight: 300;

}



/** Thin progress bars **/

.row-condensed {

    margin-right: -.1875rem !important;

    margin-left: -.1875rem !important;

}

.col-condensed {

    margin-left: 0px;

    margin-right: 0px;

    padding-left: 2px !important;

    padding-right: 2px !important;

}

.progress-thin {

    height: 2px !important;

    margin-bottom: 0em !important;

}



/** Colors **/



.label-details {

    background-color: #1CA8DD;

}



/** Nodes **/

.node-badges {

    width: 20px;

    display: inline-block;

    float: left;

}

.node-info {

    margin-left: 20px;

}



.normal-action {

    cursor: pointer;

}

/** table header **/

.title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; }

.subtitle { font-size: 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; }



.bordered {

    border: 1px solid #ccc;

}

.pgnt-info {

    text-align: center;

    width: 100%;

    display: block;

    line-height: 20px;

    vertical-align: middle;

    height: 20px;

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -khtml-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

}

/** shard map **/

.shard { display: inline-block; width: 22px; height: 22px; vertical-align: middle; text-align: center; line-height: 17px; margin-top: 2px; margin-bottom: 2px; }

.shard-started { border: 2px solid #1AC98E; color: #1AC98E; }

.shard-initializing { border: 1px solid #1CA8DD; color: #1CA8DD; }

.shard-relocated { border: 1px solid #9F85FF; color: #9F85FF; }

.shard-recovering { border: 1px solid #E4D836; color: #E4D836; }

.shard-unassigned { border: 1px solid #8B8F95; color: #8B8F95; }

.shard-replica { border: 1px dashed; opacity: 0.7; }

.row-condensed { margin-right: -.1875rem !important; margin-left: -.1875rem !important; }

.col-condensed { margin-left: 0px; margin-right: 0px; padding-left: 2px !important; padding-right: 2px !important; }

.progress-thin { height: 2px !important; margin-bottom: 0em !important; }



.pgnt-btn {

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -khtml-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    display: block;

    font-size: 12px;

    font-weight: 300;

    height: 20px;

    line-height: 18px;

    text-align: center;

    width: 29px;

}

.inactive-action {

    color: #8B8F95;

}

.form-element {

    margin-bottom: 10px;

}

.inline-checkbox {

    margin-top: 5px;

}

.page-ctrl {

    margin-top: 8px;

    margin-bottom: 5px;

}

.table-control {

    line-height: 50px !important;

}

.node-labels {

    padding-top: 5px;

}

/** cluster stats **/

.stats { padding-top: 0px; padding-bottom: 20px; }

.stat { border: 1px solid #55595c; text-align: center; width: 100%; display: inline-block; min-height: 32px; margin-top: 5px; margin-bottom: 5px; height: auto; line-height: 28px; }

.stat-value { font-size: 16px; }

.stat-description { font-size: 12px;  font-weight: 300; }



.red {

    color: #E64759 !important;

}



.yellow {

    color: #E4D836 !important;

}

/** node cells **/

.node-badges { width: 20px; display: inline-block; float: left; }

.node-info { margin-left: 20px; }

.node-labels { padding-top: 5px; }



.green {

    color: #1AC98E !important;

}

.blue {

    color: #1CA8DD !important;

}

.alerts {

    padding-top: 40px;

    position: fixed;

    padding-left: 50px;

    right: 25px;

    width: 50%;

    top: 30px;

    z-index: 1000000;

    min-width: 400px;

}

.alert-block {

    font-size: 12px;

    font-weight: 300;

    padding-top: 10px;

    padding-bottom: 0px;

    text-align: left;

    opacity: 0.90;

}

.normal-action { cursor: pointer; }

.form-element { margin-bottom: 10px; }

.inline-checkbox { margin-top: 6px; }

.table-control { line-height: 50px !important; }



.alert {

    margin-bottom: 0px;

    padding-top: 6px;

    padding-bottom: 6px;

    background: #434749;

    border: 1px solid #4d5154 !important;

}

.modal-dialog {

    margin-top: 120px !important;

}

.modal-content {

    background: #373a3c !important;

    border: 1px solid #434749 !important;

    color: #fff;

}

.modal-body {

    color: #fff;

    font-size: 13px !important;

}

.modal-footer {

    border: none !important;

}

.modal-header {

    border: none !important;

}

.btn {

    border: 2px solid !important;

    opacity: 0.7;

}

.btn:hover {

    opacity: 1 !important;

}

.nav-element {

    display: block;

    padding-top: .425rem;

    padding-bottom: .425rem;

}

.table-header {

    font-size: 15px;

    font-weight: 400;

}

.connect-page {

    display: table-cell;

    vertical-align: middle;

    float: none;

}

/* Bootstrap tweaking **/

.btn { border: 2px solid !important; opacity: 0.85; }

.btn:hover { opacity: 1 !important; }

.table-header { font-size: 15px; font-weight: 400; }

.pager { margin: 0px 0px !important; }

.alerts { padding-top: 40px; position: fixed; padding-left: 50px; right: 25px; width: 50%; top: 30px; z-index: 1000000; }

.alert-block { opacity: 0.90; }



/* JSON TREE CSS */

.jstValue {

    white-space: pre-wrap;

    font-size: 12px;

    font-weight: 400;

    font-family: Monaco, Menlo, Consolas, "Courier New", monospace;

    line-height: normal;

    display: block;

}

.jstComma {

    white-space: pre-wrap;

}

.jstProperty {

    color: #D0D0D0;

    word-wrap: break-word;

}

.jstBracket {

    white-space: pre-wrap;

}

.jstBool {

    color: #1CA8DD;

}

.jstNum {

    color: #9F85FF;

}

.jstNull {

    color: #8B8F95;

}

.jstStr {

    color: #1AC98E;

}

.jstFold:after {

    content: ' -';

    cursor: pointer;

}

.jstExpand {

    white-space: normal;

}

.jstExpand:after {

    content: ' +';

    cursor: pointer;

}

.jstFolded {

    white-space: normal !important;

}

.jstHiddenBlock {

    display: none;

}



.ace-cerebro {

    border: 1px solid #55595c;

}



.typeahead-demo .custom-popup-wrapper {

    top: 100%;

    left: 0;

    z-index: 1000;

    display: none;

}



.typeahead > li > a {

    border-bottom: 1px solid #55595c;



}



.jstValue { white-space: pre-wrap; font-size: 12px; font-weight: 400; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; line-height: normal; display: block; }

.jstComma { white-space: pre-wrap; }

.jstProperty { color: #D0D0D0; word-wrap: break-word; }

.jstBracket { white-space: pre-wrap; }

.jstBool { color: #1CA8DD; }

.jstNum { color: #9F85FF; }

.jstNull { color: #8B8F95; }

.jstStr { color: #1AC98E; }

.jstFold:after { content: ' -'; cursor: pointer; }

.jstExpand { white-space: normal; }

.jstExpand:after { content: ' +'; cursor: pointer; }

.jstFolded { white-space: normal !important; }

.jstHiddenBlock { display: none; }



/* ACE editor */

.ace-cerebro { border: 1px solid #55595c; }



/* Type ahead */

.typeahead-demo .custom-popup-wrapper { top: 100%; left: 0; z-index: 1000; display: none; }

.typeahead > li > a { border-bottom: 1px solid #55595c; }

.typeahead-demo .custom-popup-wrapper > .dropdown-menu {

    position: static;

    float: none;
@@ -395,3 +101,6 @@ table.shard-map { 
    padding-bottom: 0px !important;

    margin-top: 0px !important;

}



/** pagination **/

.pager-text { border: none !important; }