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

1 files changed, 28 insertions, 11 deletions

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>