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/common/directives/app-header.html b/app/common/directives/app-header.html
index a9c41b4..651e56d 100644
--- a/app/common/directives/app-header.html
+++ b/app/common/directives/app-header.html
@@ -5,20 +5,51 @@
<a href="" class="header__logout" ng-click="logout()">Log out</a>
</div>
<div class="header__functions-section">
- <div class="logo__wrapper"><img src="../../assets/images/logo.svg" class="header__logo" alt="company logo"/></div>
+ <div class="logo__wrapper">
+ <img
+ src="../../assets/images/logo.svg"
+ class="header__logo"
+ alt="company logo"
+ />
+ </div>
<div class="inline header__server-name">
- <p class="header__hostname">{{dataService.hostname}}</p>
- <p class="header__server-ip courier-bold">{{dataService.server_id}}</p>
+ <p class="header__hostname">{{ dataService.hostname }}</p>
+ <p class="header__server-ip courier-bold">{{ dataService.server_id }}</p>
</div>
<div class="header__functions" ng-class="{'active' : toggle}">
- <button type="button" class="header__info" ng-click="toggle = !toggle"><i class="icon icon-angle" aria-hidden="true"></i></button>
- <a href="#/server-health/event-log" class="header__server-health">Server health
- <i class="icon icon-angle" aria-hidden="true"></i><span ng-class="{'status-light__error': dataService.server_health == 'Critical', 'status-light__warn': dataService.server_health == 'Warning', 'status-light__good': dataService.server_health == 'Good'}">{{dataService.server_health}}</span></a>
- <a href="#/server-control/power-operations" class="header__server-power" role="button">Server power
- <i class="icon icon-angle" aria-hidden="true"></i><span ng-class="{'status-light__off': dataService.server_state == 'Off', 'status-light__disabled': dataService.server_state == 'Unreachable', 'status-light__good': dataService.server_state == 'Running', 'status-light__error': dataService.server_state == 'Quiesced'}">{{dataService.server_state | quiescedToError}}</span></a>
- <p class="header__refresh">Data last refreshed<span>{{dataService.last_updated | localeDate}}</span>
+ <button
+ type="button"
+ class="header__action header__action--info"
+ ng-click="toggle = !toggle"
+ >
+ <icon aria-hidden="true" file="icon-chevron-right.svg"></icon>
+ </button>
+ <a href="#/server-health/event-log" class="header__action"
+ >Server health
+ <icon aria-hidden="true" file="icon-chevron-right.svg"></icon
+ ><span
+ ng-class="{'status-light__error': dataService.server_health == 'Critical', 'status-light__warn': dataService.server_health == 'Warning', 'status-light__good': dataService.server_health == 'Good'}"
+ >{{ dataService.server_health }}</span
+ ></a
+ >
+ <a href="#/server-control/power-operations" class="header__action"
+ >Server power
+ <icon aria-hidden="true" file="icon-chevron-right.svg"></icon
+ ><span
+ ng-class="{'status-light__off': dataService.server_state == 'Off', 'status-light__disabled': dataService.server_state == 'Unreachable', 'status-light__good': dataService.server_state == 'Running', 'status-light__error': dataService.server_state == 'Quiesced'}"
+ >{{ dataService.server_state | quiescedToError }}</span
+ ></a
+ >
+ <p class="header__refresh">
+ Data last refreshed<span>{{
+ dataService.last_updated | localeDate
+ }}</span>
</p>
- <button class="header__page-refresh" ng-click="refresh()" aria-label="refresh page data">
+ <button
+ class="header__action header__action--refresh"
+ ng-click="refresh()"
+ aria-label="refresh page data"
+ >
<span>Refresh</span>
<icon file="icon-restart.svg"></icon>
</button>
diff --git a/app/common/styles/elements/modals.scss b/app/common/styles/elements/modals.scss
index 87ad432..dc1c9d8 100644
--- a/app/common/styles/elements/modals.scss
+++ b/app/common/styles/elements/modals.scss
@@ -11,9 +11,9 @@
opacity: 0;
}
-.modal-overlay.active{
+.modal-overlay.active {
z-index: 100;
- opacity: .5;
+ opacity: 0.5;
display: block;
@include fastTransition-all;
}
@@ -23,12 +23,12 @@
height: auto;
left: 50%;
top: 50%;
- transform: translate(-50%,-50%);
+ transform: translate(-50%, -50%);
max-width: 850px;
min-width: 450px;
- padding: .8em 1.5em;
+ padding: 0.8em 1.5em;
border: thin $primary-dark solid;
- background-color :$background-01;
+ background-color: $background-01;
z-index: 101;
position: fixed;
overflow: hidden;
@@ -38,13 +38,13 @@
}
}
-.modal.active{
+.modal.active {
@include fastTransition-all;
display: block;
}
.modal .page-header {
- padding-bottom: .7em;
+ padding-bottom: 0.7em;
}
.screen-reader-offscreen {
@@ -61,20 +61,21 @@
}
.modal__link {
display: block;
- margin: .8em 0 1em;
+ margin: 0.8em 0 1em;
@include mediaQuery(medium) {
display: inline-block;
- margin: .6em 0;
+ margin: 0.6em 0;
}
}
+// TODO: Use the form__actions pattern / selector
.modal__button-wrapper {
float: right;
button {
- margin-bottom: .8em;
- margin-right: .8em;
+ margin-bottom: 0.8em;
+ margin-right: 0.8em;
display: inline-block;
@include mediaQuery(medium) {
- margin-left: .8em;
+ margin-left: 0.8em;
margin-right: 0;
}
}
diff --git a/app/common/styles/elements/quicklinks.scss b/app/common/styles/elements/quicklinks.scss
index c1bff93..e6f49a3 100644
--- a/app/common/styles/elements/quicklinks.scss
+++ b/app/common/styles/elements/quicklinks.scss
@@ -1,21 +1,26 @@
//Quick links block
.quick-links {
background-color: $background-02;
- padding: .5em 1em;
- font-size: .9em;
+ padding: 0.5em 1em;
+ font-size: 0.9em;
font-weight: 400;
margin: 1em 0;
@include mediaQuery(medium) {
margin: 0 0 0 1em;
}
+
a {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
color: $primary-dark;
text-decoration: none;
- display: block;
}
+
p {
margin-bottom: 0;
}
+
.event-log__events {
margin-top: 0;
}
@@ -25,21 +30,16 @@
padding: 1em 0 1em 0;
border-bottom: 1px solid $border-color-01;
position: relative;
- &:after {
- content: '\203A';
- position: absolute;
- top: 50%;
- right: 0;
- font-size: 3em;
- color: $text-02;
- transform: translateY(-50%);
- }
+
&.no-icon {
overflow: auto;
+
.bmc-time {
+ @include fontCourierBold;
text-align: right;
max-width: 17em;
float: right;
+
@include mediaQuery(medium) {
display: block;
text-align: left;
@@ -59,7 +59,7 @@
}
.float-right {
float: right;
- @media(min-width: 1024px) and (max-width: 1140px) {
+ @media (min-width: 1024px) and (max-width: 1140px) {
display: block;
float: none;
}
@@ -74,7 +74,7 @@
color: $status-error;
margin-bottom: 0;
font-weight: 700;
- font-size: .9em;
+ font-size: 0.9em;
a {
color: $status-error;
}
diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss
index 8c8b916..f5d2757 100644
--- a/app/common/styles/layout/content.scss
+++ b/app/common/styles/layout/content.scss
@@ -38,12 +38,12 @@
@include label;
}
-// TODO: Remove and replace with page and page-title pattern
+// TODO: Remove and replace with section and section-title pattern
// Page header
.page-header {
width: 100%;
position: relative;
- border-bottom: 1px solid $border-color-02;
+ border-bottom: 1px solid $border-color-01;
margin: 0.5em 0 2.2em;
padding-left: 0;
}
diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss
index 3e0f0da..084fe71 100644
--- a/app/common/styles/layout/header.scss
+++ b/app/common/styles/layout/header.scss
@@ -136,43 +136,26 @@
}
}
- .header__server-power,
- .header__page-refresh,
- .header__server-health,
- .header__info,
- .header__multi-server {
- background: $background-02;
- @include round-corners;
- margin: 0 0.3em;
- height: 100%;
- border: 1px solid $border-color-01;
- opacity: 1;
+ .header__action {
@include fastTransition-all;
+ @include round-corners;
+ height: 100%;
+ background: $background-02;
+ border: 1px solid $border-color-01;
+ margin: 0 0.3em;
+ opacity: 1;
+
+ .icon svg {
+ width: 1rem;
+ }
+
&:hover {
background: $background-01;
}
}
- .header__multi-server {
- padding: 0.5em;
- padding-top: 0.8em;
- float: left;
- margin-top: 10px;
- margin-right: -10px;
- .icon-angle::before {
- margin-left: 0;
- transform: rotate(90deg);
- @include fastTransition-all;
- }
- &.active {
- .icon-angle::before {
- transform: rotate(266deg);
- @include fastTransition-all;
- }
- }
- }
.header__functions {
- .header__info {
+ .header__action--info {
padding: 0.3em;
min-width: 40px;
text-align: center;
@@ -183,25 +166,24 @@
font-weight: 400;
color: $text-02;
}
- .icon-angle {
- margin: 0.2em 0 0 0;
- }
- .icon-angle::before {
- font-size: 1.625em;
- font-weight: 400;
- margin-left: 0;
- display: block;
- transform: rotate(180deg);
+
+ .icon {
@include fastTransition-all;
+ margin: 0.2em 0 0 0;
+
+ svg {
+ width: 2.6rem;
+ height: auto;
+ }
}
+
@media (min-width: 1025px) {
display: none;
}
}
- &.active > .header__info > .icon-angle::before {
- transform: rotate(-360deg);
- @include fastTransition-all;
+ &.active > .header__action--info > .icon {
+ transform: rotate(-180deg);
}
.header__refresh {
@@ -213,7 +195,7 @@
}
}
}
- .header__page-refresh {
+ .header__action--refresh {
padding-top: 1em;
span {
font-size: 0.875em;
@@ -226,11 +208,12 @@
display: block;
margin-left: auto;
margin-right: auto;
- }
- svg {
- width: 25px;
- height: auto;
- fill: $primary-accent;
+
+ svg {
+ width: 1.6rem;
+ height: auto;
+ fill: $primary-accent;
+ }
}
}
}
diff --git a/app/common/styles/layout/list.scss b/app/common/styles/layout/list.scss
index 9be7522..ac1e3a4 100644
--- a/app/common/styles/layout/list.scss
+++ b/app/common/styles/layout/list.scss
@@ -8,6 +8,8 @@
*/
.list-pair {
+ margin-bottom: 0;
+
dt {
@include label;
}
@@ -15,4 +17,8 @@
@include fontCourierBold;
margin-bottom: 0;
}
+
+ + .list-pair {
+ margin-top: 1.5rem;
+ }
}
diff --git a/app/common/styles/layout/section.scss b/app/common/styles/layout/section.scss
index e92b096..aeb7ff2 100644
--- a/app/common/styles/layout/section.scss
+++ b/app/common/styles/layout/section.scss
@@ -1,28 +1,41 @@
/**
* Used for section layout. This should be used for the page container
* Mark up
- <div class="section">
- <h2 class="section-title">Section Title</h2>
+ <section class="section">
+ <div class="section-header">
+ <h2 class="section-title">Section Title</h2>
+ ... any element added here will be right aligned
+ </div>
<div class="section-content">
...
</div>
<div class="section-content">
...
</div>
- </div>
+ </section>
*/
.section {
margin-bottom: 3rem;
}
-.section-title {
+.section-header {
+ display: flex;
+ justify-content: space-between;
border-bottom: 1px solid $border-color-01;
padding-bottom: 0.5rem;
margin-bottom: 1.5rem;
}
+.section-title {
+ margin-bottom: 0;
+}
+
.section-content {
- margin-bottom: 1.5rem;
margin-top: 0;
+ margin-bottom: 0;
+
+ + .section-content {
+ margin-top: 1.5rem;
+ }
}