Fix tablet alignment issues for event logs
This will make sure our event log content is properly aligned
on tablet and desktop views. It will also make the date/time value
on the server overview page always display underneath the 'BMC time'
label in a destkop view–currently the date value will wrap to a
new line if the string is too long.
- Update markup to use Foundation grid layout classes on the
server overview event log table
Tested: Event log tables on server overview page and event
log page
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I7d765ebbe679f954e606d1d25e2182d983a7b3f3
diff --git a/app/common/styles/elements/quicklinks.scss b/app/common/styles/elements/quicklinks.scss
index aeb7f5f..9fec160 100644
--- a/app/common/styles/elements/quicklinks.scss
+++ b/app/common/styles/elements/quicklinks.scss
@@ -39,6 +39,13 @@
.bmc-time {
text-align: right;
max-width: 17em;
+ float: right;
+ @include mediaQuery(medium) {
+ display: block;
+ text-align: left;
+ float: none;
+ margin-top: 0.25em;
+ }
}
&:after {
display: none;
diff --git a/app/overview/controllers/system-overview-controller.html b/app/overview/controllers/system-overview-controller.html
index ca128bb..31e2917 100644
--- a/app/overview/controllers/system-overview-controller.html
+++ b/app/overview/controllers/system-overview-controller.html
@@ -107,7 +107,7 @@
</a>
<dl class="quick-links__item no-icon">
<dt class="inline quick-links__label">BMC time</dt>
- <dd class="inline courier-bold float-right bmc-time">{{ bmc_time | localeDate }}</dd>
+ <dd class="courier-bold bmc-time">{{ bmc_time | localeDate }}</dd>
</dl>
<div class="quick-links__item no-icon">
<p class="inline quick-links__label">Turn <span ng-if="dataService.LED_state == 'off'">on</span><span
@@ -133,8 +133,14 @@
<section class="row">
<div class="column large-12 overview__event-log event-log__events" ng-show="logs.length">
<div class="page-header">
- <h2 class="h3">High priority events ({{logs.length}})</h2>
- <a href="#/server-health/event-log/" class="inline float-right">View all event logs</a>
+ <div class="row">
+ <div class="column large-7 small-6">
+ <h2 class="h3">High priority events ({{logs.length}})</h2>
+ </div>
+ <div class="column large-5 small-6 no-padding">
+ <a href="#/server-health/event-log/" class="float-right">View all event logs</a>
+ </div>
+ </div>
</div>
<!-- single event -->
@@ -142,16 +148,27 @@
<div class="row column event-log__single-event">
<div class="row">
<!-- click will go to specific event in event log page-->
- <div class="column small-9 large-10 event-log__event-info" ng-click="">
- <p class="inline event__id">#{{event.Id}}</p>
- <p class="inline event__priority high-priority">High</p>
- <p class="inline event__severity high-priority">{{event.severity_code}}</p>
- <p class="inline event__timestamp">{{ event.Timestamp | localeDate }}</p>
- <div>
- <p class="inline event__description">{{getEventLogTitle(event)}}</p>
+ <div class="column small-10 large-11 event-log__event-info" ng-click="">
+ <div class="row">
+ <div class="column large-1 small-1">
+ <p class="inline event__id">#{{event.Id}}</p>
+ </div>
+ <div class="column large-4 small-11">
+ <p class="inline event__priority high-priority">High</p>
+ <p class="inline event__severity high-priority">{{event.severity_code}}</p>
+ </div>
+ <div class="column large-7 large-offset-0 small-12 small-offset-1">
+ <p class="inline event__timestamp">{{ event.Timestamp | localeDate }}</p>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="column large-12 small-12 small-offset-1">
+ <p class="inline event__description">{{getEventLogTitle(event)}}</p>
+ </div>
</div>
</div>
- <div class="column small-1 large-1">
+ <div class="column small-2 large-1">
<button class="accord-trigger" aria-hidden="true"></button>
</div>
</div>
diff --git a/app/overview/styles/system-overview.scss b/app/overview/styles/system-overview.scss
index 6bef6ed..3558873 100644
--- a/app/overview/styles/system-overview.scss
+++ b/app/overview/styles/system-overview.scss
@@ -25,7 +25,10 @@
}
.overview__event-log {
padding-top: 2em;
- .event__description {color: $black; text-decoration: none;}
+ .event__description {
+ color: $black;
+ text-decoration: none;
+ }
.control-check {display: none;}
.accord-trigger {
transform: rotate(0deg) translateY(-50%);
@@ -34,12 +37,8 @@
right: 0;
}
.event-log__event-info {
- width: 90%;
padding-left: 1.4em;
}
- .event-log__single-event .event__description {
- margin-left: 2.3em;
- }
}
input.modal__edit-server-name {
diff --git a/app/server-health/styles/log.scss b/app/server-health/styles/log.scss
index aa505e3..bf2d27f 100644
--- a/app/server-health/styles/log.scss
+++ b/app/server-health/styles/log.scss
@@ -255,9 +255,6 @@
text-transform: uppercase;
font-weight: 700;
min-width: 103px;
- @include mediaQuery(medium) {
- margin: 0 1em 0 1.5em;
- }
&.high-priority {
color: darken($highPriorityColor, 5%);
}
@@ -272,17 +269,6 @@
}
}
- //Event description
- .event__description {
- font-weight: 400;
- margin-left: 1em;
- @include mediaQuery(small) {
- margin-left: 1.5em;
- margin-right: 1em;
- }
- word-break: break-all;
- }
-
//Event ID
.event__id {
@include fontCourierBold;
@@ -292,12 +278,12 @@
}
.event__timestamp {
- text-align: right;
+ text-align: left;
@include fontCourierBold;
font-size: .9em;
color: $darkgrey;
max-width: 18em;
- @media (min-width: 1105px) {
+ @include mediaQuery(medium) {
float: right;
}
}
@@ -382,6 +368,14 @@
display: inline-block;
}
}
+
+/*p*/.event__description {
+ margin-bottom: 0;
+ line-height: 1.7;
+ font-weight: 400;
+ word-break: break-word;
+}
+
//end event-log__events
diff --git a/app/server-health/styles/syslog.scss b/app/server-health/styles/syslog.scss
index 52681e0..f887ae1 100644
--- a/app/server-health/styles/syslog.scss
+++ b/app/server-health/styles/syslog.scss
@@ -215,13 +215,8 @@
//Event description
.event__description {
font-weight: 400;
- margin-left: 1em;
flex:35%;
- @include mediaQuery(small) {
- margin-left: 4.5em;
- margin-right: 1em;
- }
- word-break: break-all;
+ word-break: break-word;
}
//Event ID