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>
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 @@
// 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 @@
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 @@
}
.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