Update overview quicklinks with community approved design
Resubmitting after reverted–original commit here
https://gerrit.openbmc-project.xyz/c/openbmc/webui-vue/+/28762
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ib4b2cc8015b86a9f6de11ebcade57abe086c5990
diff --git a/src/views/Overview/Overview.vue b/src/views/Overview/Overview.vue
index 6ff9f4a..245fea6 100644
--- a/src/views/Overview/Overview.vue
+++ b/src/views/Overview/Overview.vue
@@ -1,8 +1,11 @@
<template>
<b-container fluid>
<page-title />
+ <div class="quicklinks-section">
+ <overview-quick-links />
+ </div>
<b-row>
- <b-col lg="8" sm="12">
+ <b-col>
<page-section section-title="Server information">
<b-row>
<b-col sm="6">
@@ -76,9 +79,6 @@
</b-row>
</page-section>
</b-col>
- <b-col lg="4" sm="12">
- <overview-quick-links />
- </b-col>
</b-row>
<page-section section-title="High priority events">
<overview-events />
@@ -127,3 +127,10 @@
}
};
</script>
+
+<style lang="scss" scoped>
+.quicklinks-section {
+ margin-bottom: $spacer * 2;
+ margin-left: -1rem;
+}
+</style>
diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue
index 8925397..0921cb9 100644
--- a/src/views/Overview/OverviewQuickLinks.vue
+++ b/src/views/Overview/OverviewQuickLinks.vue
@@ -1,45 +1,60 @@
<template>
- <b-list-group>
- <!-- TODO: add event log priority events count -->
- <b-list-group-item>
+ <div class="quicklinks">
+ <div>
<dl>
+ <!-- TODO: display timezone -->
<dt>BMC time</dt>
- <dd>{{ bmcTime | date('MMM, DD YYYY HH:MM:SS A ZZ') }}</dd>
+ <dd>{{ bmcTime | date('MMM DD, YYYY HH:MM:SS') }}</dd>
</dl>
- </b-list-group-item>
- <b-list-group-item>
+ </div>
+ <div>
<!-- TODO: add toggle LED on/off funtionality -->
- <b-form-checkbox v-model="serverLedChecked" name="check-button" switch>
- Turn
- <span v-if="!serverLedChecked">on</span>
- <span v-else>off</span> server LED
- </b-form-checkbox>
- </b-list-group-item>
- <b-list-group-item
- href="#"
- class="d-flex justify-content-between align-items-center"
- >
- <!-- TODO: link to SOL -->
- <span>Serial over LAN console</span>
- <chevron-right16 />
- </b-list-group-item>
- <b-list-group-item
- href="#"
- class="d-flex justify-content-between align-items-center"
- >
+ <dl>
+ <dt>Server LED</dt>
+ <dd>
+ <b-form-checkbox
+ v-model="serverLedChecked"
+ name="check-button"
+ switch
+ >
+ <span v-if="!serverLedChecked">On</span>
+ <span v-else>Off</span>
+ </b-form-checkbox>
+ </dd>
+ </dl>
+ </div>
+ <div>
<!-- TODO: link to network settings -->
- <span>Edit network settings</span>
- <chevron-right16 />
- </b-list-group-item>
- </b-list-group>
+ <b-button
+ href="#"
+ variant="secondary"
+ class="d-flex justify-content-between align-items-center"
+ >
+ <span>Edit network settings</span>
+ <icon-arrow-right />
+ </b-button>
+ </div>
+ <div>
+ <!-- TODO: link to SOL -->
+ <b-button
+ href="#"
+ variant="secondary"
+ class="d-flex justify-content-between align-items-center"
+ >
+ <span>Serial over LAN console</span>
+ <icon-arrow-right />
+ </b-button>
+ </div>
+ </div>
</template>
<script>
-import ChevronRight16 from '@carbon/icons-vue/es/chevron--right/16';
+import ArrowRight16 from '@carbon/icons-vue/es/arrow--right/16';
+
export default {
name: 'QuickLinks',
components: {
- ChevronRight16
+ IconArrowRight: ArrowRight16
},
data() {
return {
@@ -61,3 +76,31 @@
}
};
</script>
+
+<style lang="scss" scoped>
+dd,
+dl {
+ margin: 0;
+}
+
+.quicklinks {
+ background: $white;
+ display: grid;
+ grid-gap: 1rem;
+ padding: 1rem;
+ white-space: nowrap;
+ align-items: center;
+}
+
+@include media-breakpoint-up(sm) {
+ .quicklinks {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+@include media-breakpoint-up(lg) {
+ .quicklinks {
+ grid-template-columns: repeat(4, 1fr);
+ }
+}
+</style>