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/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>