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;