accessibility fixes and minor css changes.

- added aria-hidden = "true" to prevent icons to be read by screen readers
- moved code on pages into "page-header" for better consistency

Change-Id: I3f497b2707991f7f628892a05734eea183a0d01d
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>

1 files changed, 45 insertions, 43 deletions

diff --git a/app/overview/controllers/system-overview-controller.html b/app/overview/controllers/system-overview-controller.html
index 8d40745..9446a35 100644
--- a/app/overview/controllers/system-overview-controller.html
+++ b/app/overview/controllers/system-overview-controller.html
@@ -77,48 +77,6 @@
 				</div>
 			</div>
 			<!-- Power metadata -->
-			<div class="row column overview__event-log event-log__events" ng-show="logs.length">
-				<div class="page-header">
-					<h3 class="bold h4 inline">High priority events ({{logs.length}})</h3>
-					<a href="#/server-health/event-log/high" class="inline float-right">View all event logs</a>
-				</div>
-				<!-- show when there are no critical events from event log -->
-				<!-- <p class="disabled">No high priority events</p> -->
-
-				<!-- single event -->
-				<a href="#/server-health/event-log/high/{{event.Id}}" ng-repeat="event in logs|orderBy:'+Id'">
-					<div class="row column event-log__single-event">
-						<div class="row">
-							<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"/>
-									<span class="control__indicator"></span>
-								</label>
-							</div>
-							<div class="column small-9 large-10 event-log__event-info" ng-click=""><!-- click will go to specific event in event log page-->
-								<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| 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">
-								<span class="button accord-trigger"></span>
-							</div>
-						</div>
-					</div>
-				</a>
-			</div>
-
-			<div class="row column overview__event-log event-log__events" ng-show="!logs.length">
-				<div class="page-header">
-					<h3 class="bold h4">High priority events (0)</h3>
-				</div>
-				<p>There are no high priority events to display at this time.</p>
-			</div>
 		</div>
 		<div class="column large-4 no-padding">
 			<div class="quick-links">
@@ -143,7 +101,7 @@
 					</div>
 				</div>
 				<a href="#/server-control/remote-console" class="no-icon quick-links__item">
-					<p class="inline quick-links__label">Launch Serial Over Lan</p>
+					<p class="inline quick-links__label">Serial Over Lan</p>
 					<span class="btn-pop-out inline float-right"></span>
 				</a>
 				<a href="#/configuration/network" class="quick-links__item">
@@ -152,4 +110,48 @@
 			</div>
 		</div>
 	</section>
+	<section class="row">
+		<div class="column large-12 overview__event-log event-log__events" ng-show="logs.length">
+			<div class="page-header">
+				<h3 class="bold h4 inline">High priority events ({{logs.length}})</h3>
+				<a href="#/server-health/event-log/high" class="inline float-right">View all event logs</a>
+			</div>
+			<!-- show when there are no critical events from event log -->
+			<!-- <p class="disabled">No high priority events</p> -->
+
+			<!-- single event -->
+			<a href="#/server-health/event-log/high" ng-repeat="event in logs|orderBy:'+Id'">
+				<div class="row column event-log__single-event">
+					<div class="row">
+						<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"/>
+								<span class="control__indicator"></span>
+							</label>
+						</div>
+						<div class="column small-9 large-10 event-log__event-info" ng-click=""><!-- click will go to specific event in event log page-->
+							<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| 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" aria-hidden="true"></button>
+						</div>
+					</div>
+				</div>
+			</a>
+		</div>
+
+		<div class="row column overview__event-log event-log__events" ng-show="!logs.length">
+			<div class="page-header">
+				<h3 class="bold h4">High priority events (0)</h3>
+			</div>
+			<p>There are no high priority events to display at this time.</p>
+		</div>
+	</section>
 </div>