diff options
| -rw-r--r-- | src/views/Overview/Overview.vue | 17 | ||||
| -rw-r--r-- | src/views/Overview/OverviewQuickLinks.vue | 102 |
2 files changed, 84 insertions, 35 deletions
diff --git a/src/views/Overview/Overview.vue b/src/views/Overview/Overview.vue index 2672af7e..4412d19d 100644 --- a/src/views/Overview/Overview.vue +++ b/src/views/Overview/Overview.vue @@ -1,9 +1,12 @@ <template> <b-container fluid> <PageTitle /> + <div class="quicklinks-section"> + <OverviewQuickLinks /> + </div> <b-row> - <b-col lg="8" sm="12"> - <PageSection sectionTitle="Server information"> + <b-col> + <PageSection sectionTitle="Server Information"> <b-row> <b-col sm="6"> <dl> @@ -76,9 +79,6 @@ </b-row> </PageSection> </b-col> - <b-col lg="4" sm="12"> - <OverviewQuickLinks /> - </b-col> </b-row> <PageSection sectionTitle="High priority events"> <OverviewEvents /> @@ -127,3 +127,10 @@ export default { } }; </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 726eaf7d..e8ed4dda 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('DD MMM 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> - <ChevronRight16 /> - </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> - <ChevronRight16 /> - </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> + <IconArrowRight /> + </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> + <IconArrowRight /> + </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 }, created() { this.getBmcTime(); @@ -61,3 +76,30 @@ export default { } }; </script> + +<style lang="scss" scoped> +dd, +dl { + margin: 0; +} + +.quicklinks { + background: $white; + display: grid; + grid-gap: 1rem; + padding: 1rem; + white-space: nowrap; +} + +@media screen and (min-width: 600px) { + .quicklinks { + grid-template-columns: 1fr 1fr; + } +} + +@media screen and (min-width: 1095px) { + .quicklinks { + grid-template-columns: 1fr 1fr 1fr 1fr; + } +} +</style> |