From 256f5b967beb1505cab73ce59f534b6b9860e38f Mon Sep 17 00:00:00 2001
From: Dixsie Wolmers <dixsiew@gmail.com>
Date: Mon, 6 Jan 2020 17:22:25 -0500
Subject: Update overview quicklinks with community approved design

Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ia748182f6a6bf8d7dc87e2f367f02c0528ecf441
---
 src/views/Overview/Overview.vue           |  17 +++--
 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>
-- 
cgit v1.2.3