Update overview page to use new UI patterns
- Use page, section, list-pair to establish
consistent layout
- Update header and overview page to use new
caret icon
- Reordered Server and BMC information to
accomodate small screen views
- Added chevron icons to create consistency
between header and server overview page
quick links
- Changed edit hostname text to use the
standard icon
- Added OR operator to short circuit the server
model, server serial number, and server manufacturer
to display N/A if the information is not available
Change-Id: I6619f5369ff290555142e85aa432e901c4f93d2d
Signed-off-by: Derick Montague <derick.montague@ibm.com>
diff --git a/app/server-health/styles/log.scss b/app/server-health/styles/log.scss
index 7b82549..60bbba9 100644
--- a/app/server-health/styles/log.scss
+++ b/app/server-health/styles/log.scss
@@ -10,13 +10,12 @@
// Event Log SCSS
#event-log {
-
.row {
width: 100%;
}
// Dropwdowns filter
.dropdown__date.row {
- padding: .5em;
+ padding: 0.5em;
}
//Timezone select
@@ -25,7 +24,7 @@
position: relative;
text-transform: uppercase;
color: $primary-accent;
- font-size: .9em;
+ font-size: 0.9em;
font-weight: 700;
border: 0;
}
@@ -42,7 +41,7 @@
color: $text-02;
text-transform: uppercase;
font-weight: 700;
- font-size: .75em;
+ font-size: 0.75em;
margin-bottom: 3px;
}
.event__severity-filter {
@@ -60,7 +59,7 @@
.event__date-filter {
margin-right: 1.5em;
color: $text-02;
- float:left;
+ float: left;
input {
width: 170px;
}
@@ -70,7 +69,7 @@
}
}
.event__status-filter {
- float:left;
+ float: left;
@include mediaQuery(medium) {
width: 25%;
}
@@ -84,8 +83,8 @@
.event-log__filters {
position: relative;
- padding-bottom: .5em;
- padding-top: .5em;
+ padding-bottom: 0.5em;
+ padding-top: 0.5em;
@media (min-width: 1333px) {
float: right;
@@ -94,7 +93,7 @@
}
.empty__logs {
border: 1px solid $border-color-02;
- margin-top: .5em;
+ margin-top: 0.5em;
text-align: center;
padding: 2em;
}
@@ -102,13 +101,11 @@
.accord-trigger {
position: absolute;
right: 1em;
- top: .3em;
+ top: 0.3em;
}
-#event-log__events,
.event-log__events {
display: block;
- margin-top: 1.6em;
position: relative;
overflow: hidden;
.header__actions-bar {
@@ -130,16 +127,16 @@
height: auto;
margin-left: 0;
left: 0;
- padding: 1em 2em 1em 2em
+ padding: 1em 2em 1em 2em;
}
.inline__confirm-message {
margin-top: 5px;
margin-bottom: -10px;
}
.inline__confirm-buttons .btn-primary {
- padding: .5em 2em;
+ padding: 0.5em 2em;
min-height: 25px;
- margin-top: .5em;
+ margin-top: 0.5em;
@include mediaQuery(medium) {
margin-top: 0;
}
@@ -152,15 +149,15 @@
span {
display: inline-block;
font-weight: 700;
- margin-right: .3em;
+ margin-right: 0.3em;
}
}
// Single event log card
.event-log__single-event {
border: 1px solid $border-color-01;
- padding: 1em 1em 1em .7em;
- margin: .5em 0 .5em 0;
+ padding: 1em 1em 1em 0.7em;
+ margin: 0.5em 0 0.5em 0;
position: relative;
overflow: hidden;
@include fastTransition-all;
@@ -178,7 +175,7 @@
//Event priorities
.event__priority {
color: $primary-light;
- font-size: .8em;
+ font-size: 0.8em;
text-transform: uppercase;
padding: 2px 2em;
font-weight: 700;
@@ -209,7 +206,7 @@
//Event Severity
.event__severity {
- font-size: .7em;
+ font-size: 0.7em;
text-transform: uppercase;
font-weight: 700;
min-width: 103px;
@@ -230,7 +227,7 @@
//Event ID
.event__id {
@include fontCourierBold;
- font-size: .9em;
+ font-size: 0.9em;
color: $text-02;
margin-right: 1em;
}
@@ -238,7 +235,7 @@
.event__timestamp {
text-align: left;
@include fontCourierBold;
- font-size: .9em;
+ font-size: 0.9em;
color: $text-02;
max-width: 18em;
@include mediaQuery(medium) {
@@ -267,7 +264,7 @@
height: 200px;
overflow-y: scroll;
border: 1px solid $border-color-01;
- padding: .5em .5em 0;
+ padding: 0.5em 0.5em 0;
background: $primary-light;
display: block;
margin-bottom: 1.5em;
@@ -277,7 +274,7 @@
}
&::-webkit-scrollbar-thumb {
border-radius: 4px;
- background-color: rgba(0, 0, 0, .5);
+ background-color: rgba(0, 0, 0, 0.5);
}
}
@@ -288,19 +285,19 @@
.event__related-label {
font-weight: 700;
margin-right: 1.2em;
- padding-top: .3em;
+ padding-top: 0.3em;
float: left;
}
.event__related-item {
margin-right: 1em;
- padding-top: .3em;
+ padding-top: 0.3em;
display: inline-block;
float: left;
clear: both;
}
.event__actions {
margin-left: -1em;
- margin-top: .5em;
+ margin-top: 0.5em;
@include mediaQuery(medium) {
float: right;
margin-top: -5px;
@@ -315,7 +312,8 @@
}
}
-/*p*/.event__description {
+/*p*/
+.event__description {
margin-bottom: 0;
line-height: 1.7;
font-weight: 400;