diff options
author | Dixsie Wolmers <dixsiew@gmail.com> | 2020-01-07 01:22:25 +0300 |
---|---|---|
committer | Gunnar Mills <gmills@us.ibm.com> | 2020-02-13 18:01:06 +0300 |
commit | 537c6cb6b293665826efc5b1ef9f9c9c2e6a0d39 (patch) | |
tree | 9c571502fdce0ad403bb3cf4d7621d8e5d8d28d3 /src | |
parent | cbcd2136cd80395eff898738747c52c4b301fd56 (diff) | |
download | webui-vue-537c6cb6b293665826efc5b1ef9f9c9c2e6a0d39.tar.xz |
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
Diffstat (limited to 'src')
-rw-r--r-- | src/views/Overview/Overview.vue | 15 | ||||
-rw-r--r-- | src/views/Overview/OverviewQuickLinks.vue | 103 |
2 files changed, 84 insertions, 34 deletions
diff --git a/src/views/Overview/Overview.vue b/src/views/Overview/Overview.vue index 6ff9f4a2..245fea6b 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 @@ 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 89253977..0921cb96 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 @@ export default { } }; </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> |