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