diff options
author | Derick Montague <derick.montague@ibm.com> | 2019-07-31 22:35:48 -0500 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2019-08-12 18:04:45 -0500 |
commit | 30d7c6377f70382088436c7a4830663eb522d588 (patch) | |
tree | 3a245b51116351b59fccf888d85ce0fa6b73d670 /app/common | |
parent | c652ed1889599da3ca2a0e0d36979e099f9b3b8c (diff) | |
download | phosphor-webui-30d7c6377f70382088436c7a4830663eb522d588.tar.gz phosphor-webui-30d7c6377f70382088436c7a4830663eb522d588.zip |
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>
Diffstat (limited to 'app/common')
-rw-r--r-- | app/common/directives/app-header.html | 51 | ||||
-rw-r--r-- | app/common/styles/elements/modals.scss | 25 | ||||
-rw-r--r-- | app/common/styles/elements/quicklinks.scss | 28 | ||||
-rw-r--r-- | app/common/styles/layout/content.scss | 4 | ||||
-rw-r--r-- | app/common/styles/layout/header.scss | 73 | ||||
-rw-r--r-- | app/common/styles/layout/list.scss | 6 | ||||
-rw-r--r-- | app/common/styles/layout/section.scss | 23 |
7 files changed, 122 insertions, 88 deletions
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 @@ label { @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 @@ $logoMaxWidth: 125px; } } - .header__server-power, - .header__page-refresh, - .header__server-health, - .header__info, - .header__multi-server { - background: $background-02; + .header__action { + @include fastTransition-all; @include round-corners; - margin: 0 0.3em; height: 100%; + background: $background-02; border: 1px solid $border-color-01; + margin: 0 0.3em; opacity: 1; - @include fastTransition-all; + + .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 @@ $logoMaxWidth: 125px; 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 @@ $logoMaxWidth: 125px; } } } - .header__page-refresh { + .header__action--refresh { padding-top: 1em; span { font-size: 0.875em; @@ -226,11 +208,12 @@ $logoMaxWidth: 125px; 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; + } } |