header tweaks

app/admin-tab/settings/template.hbs

@@ -2,9 +2,11 @@
   <h1 class="right-divider">Settings</h1>
 </section>
 
-<section>
+{{#if errors.length}}
-  {{top-errors errors=errors}}
+  <section>
-</section>
+   {{top-errors errors=errors}}
+  </section>
+{{/if}}
 
 <section class="well">
   {{host-settings host=model.host sendActiveValue=(action (mut model.host))}}

app/components/environment-header/template.hbs

@@ -50,4 +50,6 @@
       {{model.transitioningMessage}}
     </div>
   {{/if}}
+
+  {{header-state model=model}}
 </section>

app/components/header-state/component.js

@@ -0,0 +1,6 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  classNames: ['pull-right','section','r-mt5'],
+  classNameBindings: ['model.stateColor'],
+});

app/components/header-state/template.hbs

@@ -0,0 +1,7 @@
+<i class="icon {{model.stateIcon}}"></i>
+{{model.displayState~}}
+{{#if model.showTransitioningMessage}}
+  <span class="force-wrap">
+    ({{model.transitioningMessage}})
+  </span>
+{{/if}}

app/components/info-multi-stats/template.hbs

@@ -1,17 +1,5 @@
 <div class="container-fluid container-multi-stat">
-  <div class="row bg-lightgray">
+
-    <div class="col-sm-12 col-md-12 col-lg-12 ">
-      <label class="section r-mt5 badge {{model.stateBackground}}" style="color:white;">
-         {{model.displayState~}}
-        {{#if model.showTransitioningMessage}}
-          <span class="force-wrap">
-            ({{model.transitioningMessage}})
-          </span>
-        {{/if}}
-      </label>
-      {{model.name}}
-    </div>
-  </div>
   <div class="row">
     <div class="col-sm-12 col-md-12 col-lg-12">
       {{yield}}

app/components/stack-section/template.hbs

@@ -1,4 +1,4 @@
-<div class="clearfix {{if single model.stateBackground}} {{if single 'single'}}">
+<div class="clearfix {{if single 'single'}}">
   {{#unless single}}
     <div class="stack-state {{model.stateBackground}}"><i class="{{model.stateIcon}}"></i></div>
   {{/unless}}

app/container/template.hbs

@@ -1,18 +1,16 @@
 <section class="header">
-  <h1 class="right-divider">
+  {{#link-to "containers" tagName="h1" href=false}}<a>Container:</a>{{/link-to}}
+  {{#power-select options=model.primaryHost.instances selected=model onchange=(action "changeContainer") searchField="displayName" as |obj|}}
+    <div class="clip r-mr15">
+      <i class="{{obj.stateIcon}} {{obj.stateColor}}" tooltip="{{obj.displayState}}" data-placement="left"></i> {{obj.displayName}}
+    </div>
+  {{/power-select}}
 
-      {{#link-to "containers" href=false}}<a>Container:</a>{{/link-to}}
+  <strong>on {{#link-to "host" model.primaryHost.id href=false}}<a>{{model.primaryHost.displayName}}</a>{{/link-to}}</strong>
-    
-    
-      {{#power-select options=model.primaryHost.instances selected=model onchange=(action "changeContainer") searchField="displayName" as |obj|}}
-        <div class="clip r-mr15"><i class="{{obj.stateIcon}} {{obj.stateColor}}" tooltip="{{obj.displayState}}" data-placement="left"></i> {{obj.displayName}}</div>
-      {{/power-select}}
-
-      <strong>on {{#link-to "host" model.primaryHost.id href=false}}<a>{{model.primaryHost.displayName}}</a>{{/link-to}}</strong>
-    
-  </h1>
     
   {{action-menu model=model size="sm"}}
+
+  {{header-state model=model}}
 </section>
 
 <section>

app/host/template.hbs

@@ -1,16 +1,15 @@
 <section class="header">
+  {{#link-to "hosts" tagName="h1" href=false}}<a>Host:</a>{{/link-to}}
   
-    {{#link-to "hosts" tagName="h1" href=false}}<a>Host:</a>{{/link-to}}
+  {{#power-select options=model.all selected=host onchange=(action "changeHost") searchField="displayName" as |obj|}}
-    
+    <div class="clip"><i class="{{obj.stateIcon}} {{obj.stateColor}}" tooltip="{{obj.displayState}}" data-placement="left"></i> {{obj.displayName}}</div>
-      {{#power-select options=model.all selected=host onchange=(action "changeHost") searchField="displayName" as |obj|}}
+  {{/power-select}}
-        <div class="clip"><i class="{{obj.stateIcon}} {{obj.stateColor}}" tooltip="{{obj.displayState}}" data-placement="left"></i> {{obj.displayName}}</div>
-      {{/power-select}}
-    
-  
   
   {{#action-menu model=host size="sm" classNames="left-divider"}}
     {{#link-to "containers.new" (query-params hostId=host.id) classNames="btn btn-sm btn-primary"}}Add Container{{/link-to}}
   {{/action-menu}}
+
+  {{header-state model=host}}
 </section>
 
 <section>

app/service/template.hbs

@@ -1,31 +1,20 @@
 <section class="header">
-  <h1 class="right-divider">
+  <h1>
     Service:
-      {{#power-select options=model.stack.services selected=service onchange=(action "changeService") searchField="displayName" as |obj|}}
-        <div class="clip"><i class="{{obj.stateIcon}} {{obj.stateColor}}" tooltip="{{obj.displayState}}" data-placement="left"></i> {{obj.displayName}}</div>
-      {{/power-select}}
-    
   </h1>
   
-  {{action-menu model=service classNames="left-divider r-ml5" size="sm"}}
+  {{#power-select options=model.stack.services selected=service onchange=(action "changeService") searchField="displayName" as |obj|}}
+    <div class="clip"><i class="{{obj.stateIcon}} {{obj.stateColor}}" tooltip="{{obj.displayState}}" data-placement="left"></i> {{obj.displayName}}</div>
+  {{/power-select}}
+   
+  {{action-menu model=service classNames="r-ml5" size="sm"}}
+  {{header-state model=service}}
 </section>
 
 {{!todo copy pasta}}
 <section>
   <div class="container-fluid container-multi-stat">
-    <div class="row bg-lightgray">
+
-      <div class="col-sm-12 col-md-12 col-lg-12">
-      <label class="section r-mt5 r-mr5 r-p5 badge {{service.stateBackground}}" style="color:white;">
-          State: {{service.displayState~}}
-          {{#if service.showTransitioningMessage}}
-            <span class="force-wrap">
-              ({{service.transitioningMessage}})
-            </span>
-          {{/if}}
-        </label>
-        {{service.name}}
-      </div>
-    </div>
     <div class="row">
       <div class="col-sm-12 col-md-12 col-lg-12">
         <div class="row multi-stats">

app/styles/environment.scss

@@ -158,6 +158,7 @@ $singleCountWidth : 120px;
 
   .single {
     color: white;
+    background: $midGray;
 
     .count {
       width: $singleCountWidth;

app/styles/layout.scss

@@ -247,10 +247,6 @@ UL.list-lines {
   overflow: hidden;
   white-space: nowrap;
   word-wrap: break-word;
-
-  & i {
-    font-size: 10px;
-  }
 }
 
 .force-wrap {