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