Various minor changes

  - Add style class for critical icon
  - Minor tweaks to content styles
  - Reorder event log content for responsiveness

Change-Id: Ibbe769a9c23d288db6b8e9db1a41b25d7b060999
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>

11 files changed, 51 insertions, 23 deletions

diff --git a/app/common/directives/log-event.html b/app/common/directives/log-event.html
index 70d7dee..2f02315 100644
--- a/app/common/directives/log-event.html
+++ b/app/common/directives/log-event.html
@@ -11,22 +11,23 @@
                  <button class="btn-primary" ng-click="event.confirm=false;">No</button>
              </div>
          </div>
-         <div class="column small-1 large-2 event-log__col-check">
+         <div class="column small-1 large-1 event-log__col-check">
              <label class="control-check">
                  <input type="checkbox" name="events__check" ng-click="event.selected= ! event.selected"
                         ng-checked="event.selected"/>
                  <div class="control__indicator"></div>
              </label>
          </div>
-         <div class="column small-9 large-9 event-log__event-info"
+         <div class="column small-9 large-10 event-log__event-info"
               ng-click="event.meta = ! event.meta">
+             <p class="inline event__id">#{{event.Id}}</p>
              <p class="inline event__priority event-resolved" ng-hide="event.Resolved == 0">Resolved</p>
              <p class="inline event__priority med-priority" ng-class="{'low-priority': event.priority == 'Low', 'medium-priority': event.priority == 'Medium', 'high-priority': event.priority == 'High'}" ng-hide="event.Resolved == 1">{{event.priority}}</p>
              <p class="inline event__severity">{{event.severity_code}}</p>
-             <p class="inline event__description">{{event.Severity}}</p>
+             <p class="inline event__timestamp">{{event.Timestamp| date:'MM/dd/yyyy  HH:mm:ss '+tmz: tmz}}</p>
              <div>
-                 <p class="inline event__id">#{{event.Id}}</p>
-                 <p class="inline event__timestamp">{{event.Timestamp| date:'MM/dd/yyyy  HH:mm:ss '+tmz: tmz}}</p></div>
+                 <p class="inline event__description">{{event.Severity}}</p>
+             </div>
          </div>
          <div class="column small-1 large-1">
              <button class="accord-trigger" ng-class="{'active': event.meta}"
diff --git a/app/common/styles/base/colors.scss b/app/common/styles/base/colors.scss
index 7308cec..46e7b0a 100644
--- a/app/common/styles/base/colors.scss
+++ b/app/common/styles/base/colors.scss
@@ -52,6 +52,7 @@ $alert__message: rgb(203, 221, 235);
 
 // Severity
 $critical-lightbg: #e62325;
+$critical-bg: #fad3d3;
 $critical-darkbg: #ff5c49;
 $medium-lightbg: #dc267f;
 $medium-darkbg: #FF509E;
diff --git a/app/common/styles/base/foundation.scss b/app/common/styles/base/foundation.scss
index 9c31f8f..d621b13 100644
--- a/app/common/styles/base/foundation.scss
+++ b/app/common/styles/base/foundation.scss
@@ -814,7 +814,7 @@ select[multiple] {
     display: block !important; } }
 
 .row {
-  max-width: 60.38rem; //960px
+  max-width: 67.500rem; //960px
   margin-right: auto;
   margin-left: auto; }
 .row::before, .row::after {
diff --git a/app/common/styles/base/icons.scss b/app/common/styles/base/icons.scss
index e499095..9772ba4 100644
--- a/app/common/styles/base/icons.scss
+++ b/app/common/styles/base/icons.scss
@@ -44,7 +44,7 @@
   }
 }
 
-.icon__warning{
+.icon__warning {
   width: 30px;
   height: 30px;
   background-image: url(/assets/images/icon-warning.svg);
@@ -52,7 +52,23 @@
   vertical-align: middle;
 }
 
-.icon__info{
+.icon__critical {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  position: relative;
+  border-width: 2px;
+  border-style: solid;
+  color: $critical-lightbg;
+  background-color: rgba($critical-bg, 1);
+  background-image: url(/assets/images/crit-x.svg);
+  background-size: 120%;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  border-color: $critical-lightbg;
+}
+
+.icon__info {
   margin-top: -4px;
   margin-right: .5em;
   width: 25px;
@@ -75,6 +91,7 @@
     text-align: -9999px;
   }
 }
+
 .icon__down-arrow {
   margin-right: 1em;
   &:before {
diff --git a/app/common/styles/base/utility.scss b/app/common/styles/base/utility.scss
index 33cf61a..b82efc4 100644
--- a/app/common/styles/base/utility.scss
+++ b/app/common/styles/base/utility.scss
@@ -3,7 +3,7 @@
 }
 
 .disabled {
-  color: $lightbg__grey;
+  color: darken($lightbg__grey, 10%);
 }
 
 .float-right {
diff --git a/app/common/styles/elements/tags.scss b/app/common/styles/elements/tags.scss
index 8a480c9..238a772 100644
--- a/app/common/styles/elements/tags.scss
+++ b/app/common/styles/elements/tags.scss
@@ -103,8 +103,11 @@
   border-color: $normal;
   &.high-priority {
     color: $critical-lightbg;
-    background-color: rgba( $critical-lightbg, .4 );
+    background-color: rgba( $critical-bg, 1 );
     background-image: url(/assets/images/crit-x.svg);
+    background-size: 120%;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
     border-color: $critical-lightbg;
     &:before {
       content: '';
diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss
index 13dbe44..f91940c 100644
--- a/app/common/styles/layout/content.scss
+++ b/app/common/styles/layout/content.scss
@@ -37,7 +37,7 @@ section.row {
 }
 
 .content-label {
-  color: darken($lightgrey, 10%);
+  color: lighten($darkgrey, 15%);
   text-transform: uppercase;
   font-weight: 700;
   font-size: .75em;
diff --git a/app/server-health/controllers/inventory-controller.html b/app/server-health/controllers/inventory-controller.html
index 2941aaa..d674efb 100644
--- a/app/server-health/controllers/inventory-controller.html
+++ b/app/server-health/controllers/inventory-controller.html
@@ -58,8 +58,7 @@
 		        ng-class="{'active': inventory__metadatarow, 'selected': inventory__selected}">
             <div class="row column" ng-click="inventory__metadatarow = ! inventory__metadatarow">
                 <div class="column small-12 large-3 inventory__info">
-                    <p class="priority-tag-circ high-priority" aria-label="High Priority"></p>
-                    <p class="inventory__title">CPU core 5</p>
+                    <p class="overview__title">CPU core 5</p>
                 </div>
                 <div class="column small-12 large-3">
                     <p class="content-label">Part Number</p>
diff --git a/app/server-health/controllers/log-controller.html b/app/server-health/controllers/log-controller.html
index 6646845..f8c08da 100644
--- a/app/server-health/controllers/log-controller.html
+++ b/app/server-health/controllers/log-controller.html
@@ -28,11 +28,11 @@
         <log-filter></log-filter>
     </section> <!-- end filter -->
     <section id="event-log__events" class="row column">
-        <div id="event__actions-bar" class="row header__actions-bar ">
+        <div id="event__actions-bar" class="row header__actions-bar no-margin">
             <div class="column small-1 large-1 event-log__col-check">
                 <label class="control-check">
                     <input type="checkbox" name="events__check-all" ng-model="all" ng-checked="(logs|filter:{selected: true}).length == logs.length"/>
-                    <div class="control__indicator"></div>
+                    <span class="control__indicator"></span>
                 </label>
             </div>
             <div class="column small-11 large-11 end col-logged-events">
@@ -60,9 +60,9 @@
                 </div>
             </div>
         </div>
-        <log-event 
-        dir-paginate="event in (filteredLogs = (logs|filter:filterBySeverity|filter:filterByStatus|filter:filterByDate|filter:filterBySearchTerms))| itemsPerPage: itemsPerPage" 
-        event="event" 
+        <log-event
+        dir-paginate="event in (filteredLogs = (logs|filter:filterBySeverity|filter:filterByStatus|filter:filterByDate|filter:filterBySearchTerms))| itemsPerPage: itemsPerPage"
+        event="event"
         tmz="tmz">
         </log-event>
     </section>
diff --git a/app/server-health/controllers/sensors-controller.html b/app/server-health/controllers/sensors-controller.html
index 15cd997..5b1d872 100644
--- a/app/server-health/controllers/sensors-controller.html
+++ b/app/server-health/controllers/sensors-controller.html
@@ -81,6 +81,5 @@
                 </div>
             </div>
         </div>
-
     </section>
 </div> <!-- end event log -->
diff --git a/app/server-health/styles/log.scss b/app/server-health/styles/log.scss
index adecf92..3de7796 100644
--- a/app/server-health/styles/log.scss
+++ b/app/server-health/styles/log.scss
@@ -106,7 +106,8 @@
   padding-right: 0;
 }
 
-#event-log__events {
+#event-log__events,
+.event-log__events {
   display: block;
   margin-top: 1.6em;
   position: relative;
@@ -185,8 +186,10 @@
 
   // Single event log card
   .event-log__single-event {
-    border-top: 1px solid $medgrey;
+    border: 1px solid $medgrey;
     padding: 1em 1em 1em .7em;
+    margin: .5em 0 .5em 0;
+    position: relative;
   }
   .event-log__event-info {
     &:hover {
@@ -227,8 +230,10 @@
     text-transform: uppercase;
     color: $darkgrey;
     font-weight: 700;
-    margin: 0 1em;
     min-width: 103px;
+    @include mediaQuery(medium) {
+      margin: 0 1em;
+    }
   }
 
   //Event description
@@ -241,13 +246,16 @@
     @include fontCourierBold;
     font-size: .9em;
     color: $darkgrey;
+    margin-right: 1em;
   }
 
   .event__timestamp {
     @include fontCourierBold;
     font-size: .9em;
     color: #999999;
-    margin-left: 1.2em;
+    @media (min-width: 1105px ) {
+      float: right;
+    }
   }
 
   // Event metadata row