From b318110c7d67f4b22b5b110b3e0b1a39a13b86ae Mon Sep 17 00:00:00 2001
From: woothu <woothu@gmail.com>
Date: Mon, 8 Oct 2018 17:46:33 +0200
Subject: [PATCH] columns updated

---
 src/views/Widgets.vue                   | 160 ++++++++++++++++--------
 src/views/widgets/SocialMediaWidget.vue |  60 ---------
 src/views/widgets/Widget01.vue          |  16 ++-
 src/views/widgets/Widget02.vue          |  22 ++--
 src/views/widgets/Widget03.vue          |  16 ++-
 src/views/widgets/Widget04.vue          |  67 +++++-----
 src/views/widgets/Widget05.vue          |  51 ++++++++
 7 files changed, 220 insertions(+), 172 deletions(-)
 delete mode 100644 src/views/widgets/SocialMediaWidget.vue
 create mode 100644 src/views/widgets/Widget05.vue

diff --git a/src/views/Widgets.vue b/src/views/Widgets.vue
index 3334e2f4..a3840f9c 100644
--- a/src/views/Widgets.vue
+++ b/src/views/Widgets.vue
@@ -1,96 +1,152 @@
 <template>
   <div class="animated fadeIn">
     <b-row>
-      <widget01 header="89.9%" variant="success"/>
-      <widget01 header="12.124" variant="info"/>
-      <widget01 header="$98.111,00" variant="warning"/>
-      <widget01 header="2 TB" variant="danger"/>
+      <b-col sm="6" lg="3">
+        <widget01 header="89.9%" variant="success"/>
+      </b-col>
+      <b-col sm="6" lg="3">
+        <widget01 header="12.124" variant="info"/>
+      </b-col>
+      <b-col sm="6" lg="3">
+        <widget01 header="$98.111,00" variant="warning"/>
+      </b-col>
+      <b-col sm="6" lg="3">
+          <widget01 header="2 TB" variant="danger"/>
+      </b-col>
     </b-row><!--/.row-->
     <b-row>
-      <widget01 header="89.9%"  variant="background-success"/>
-      <widget01 header="12.124" variant="background-info"/>
-      <widget01 header="$98.111,00" variant="background-warning"/>
-      <widget01 header="2 TB" variant="background-danger"/>
+      <b-col sm="6" lg="3">
+        <widget01 header="89.9%"  variant="background-success"/>
+      </b-col>
+      <b-col sm="6" lg="3">
+        <widget01 header="12.124" variant="background-info"/>
+      </b-col>
+      <b-col sm="6" lg="3">
+        <widget01 header="$98.111,00" variant="background-warning"/>
+      </b-col>
+      <b-col sm="6" lg="3">
+        <widget01 header="2 TB" variant="background-danger"/>
+      </b-col>
     </b-row><!--/.row-->
     <b-row>
-      <widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary"/>
-      <widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info"/>
-      <widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
-      <widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger"/>
+      <b-col cols="12" sm="6" lg="3">
+        <widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary"/>
+      </b-col>
+      <b-col cols="12" sm="6" lg="3">
+        <widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info"/>
+      </b-col>
+      <b-col cols="12" sm="6" lg="3">
+        <widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
+      </b-col>
+      <b-col cols="12" sm="6" lg="3">
+        <widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger"/>
+      </b-col>
     </b-row><!--/.row-->
     <b-row>
-      <widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" :showLink="true"/>
-      <widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" :showLink="true"/>
-      <widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" :showLink="true"/>
-      <widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" :showLink="true"/>
+      <b-col cols="12" sm="6" lg="3">
+        <widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" :showLink="true"/>
+      </b-col>
+      <b-col cols="12" sm="6" lg="3">
+        <widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" :showLink="true"/>
+      </b-col>
+      <b-col cols="12" sm="6" lg="3">
+        <widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" :showLink="true"/>
+      </b-col>
+      <b-col cols="12" sm="6" lg="3">
+        <widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" :showLink="true"/>
+      </b-col>
     </b-row><!--/.row-->
     <b-row>
-      <widget03 header="$1.999,50" iconClasses="fa fa-cogs bg-primary"/>
-      <widget03 header="$1.999,50" iconClasses="fa fa-laptop bg-info"/>
-      <widget03 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
-      <widget03 header="$1.999,50" iconClasses="fa fa-bell bg-danger"/>
+      <b-col cols="12" sm="6" lg="3">
+        <widget03 header="$1.999,50" iconClasses="fa fa-cogs bg-primary"/>
+      </b-col>
+      <b-col cols="12" sm="6" lg="3">
+        <widget03 header="$1.999,50" iconClasses="fa fa-laptop bg-info"/>
+      </b-col>
+      <b-col cols="12" sm="6" lg="3">
+        <widget03 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
+      </b-col>
+      <b-col cols="12" sm="6" lg="3">
+        <widget03 header="$1.999,50" iconClasses="fa fa-bell bg-danger"/>
+      </b-col>
     </b-row><!--/.row-->
     <b-row>
-      <widget03 header="$1.999,50" iconClasses="fa fa-cogs bg-primary px-5"/>
-      <widget03 header="$1.999,50" iconClasses="fa fa-laptop bg-info px-5"/>
-      <widget03 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary px-5"/>
-      <widget03 header="$1.999,50" iconClasses="fa fa-bell bg-danger px-5"/>
+      <b-col cols="12" sm="6" lg="3">
+        <widget03 header="$1.999,50" iconClasses="fa fa-cogs bg-primary px-5"/>
+      </b-col>
+      <b-col cols="12" sm="6" lg="3">
+        <widget03 header="$1.999,50" iconClasses="fa fa-laptop bg-info px-5"/>
+      </b-col>
+      <b-col cols="12" sm="6" lg="3">
+        <widget03 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary px-5"/>
+      </b-col>
+      <b-col cols="12" sm="6" lg="3">
+        <widget03 header="$1.999,50" iconClasses="fa fa-bell bg-danger px-5"/>
+      </b-col>
     </b-row><!--/.row-->
     <b-row>
-      <social-media-widget type="facebook" :dataPoints="[65, 59, 84, 84, 51, 55, 40]"
-                           rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds"/>
-      <social-media-widget type="twitter" :dataPoints="[1, 13, 9, 17, 34, 41, 38]"
-                           rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets"/>
-      <social-media-widget type="linkedin" :dataPoints="[78, 81, 80, 45, 34, 12, 40]"
-                           rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds"/>
-      <social-media-widget type="google-plus" :dataPoints="[35, 23, 56, 22, 97, 23, 64]"
-                           rightHeader="894" rightFooter="followers" leftHeader="92" leftFooter="circles"/>
+      <b-col md="3" sm="6">
+        <widget04 type="facebook" :dataPoints="[65, 59, 84, 84, 51, 55, 40]"
+                             rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds"/>
+       </b-col>
+       <b-col md="3" sm="6">
+        <widget04 type="twitter" :dataPoints="[1, 13, 9, 17, 34, 41, 38]"
+                             rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets"/>
+       </b-col>
+       <b-col md="3" sm="6">
+        <widget04 type="linkedin" :dataPoints="[78, 81, 80, 45, 34, 12, 40]"
+                             rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds"/>
+       </b-col>
+       <b-col md="3" sm="6">
+        <widget04 type="google-plus" :dataPoints="[35, 23, 56, 22, 97, 23, 64]"
+                             rightHeader="894" rightFooter="followers" leftHeader="92" leftFooter="circles"/>
+       </b-col>
     </b-row><!--/.row-->
     <b-card-group class="mb-4">
-      <widget04 iconClasses="icon-people" header="87.500" text="Visitors" variant="info"/>
-      <widget04 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
-      <widget04 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
-      <widget04 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
-      <widget04 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
+      <widget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info"/>
+      <widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
+      <widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
+      <widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
+      <widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
     </b-card-group>
     <b-row>
       <b-col sm="6" md="2">
-        <widget04 iconClasses="icon-people" header="87.500" text="visitors" variant="info"/>
+        <widget05 iconClasses="icon-people" header="87.500" text="visitors" variant="info"/>
       </b-col>
       <b-col sm="6" md="2">
-        <widget04 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
+        <widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
       </b-col>
       <b-col sm="6" md="2">
-        <widget04 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
+        <widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
       </b-col>
       <b-col sm="6" md="2">
-        <widget04 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
+        <widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
       </b-col>
       <b-col sm="6" md="2">
-        <widget04 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
+        <widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
       </b-col>
       <b-col sm="6" md="2">
-        <widget04 iconClasses="icon-speech" header="972" text="Comments" variant="info"/>
+        <widget05 iconClasses="icon-speech" header="972" text="Comments" variant="info"/>
       </b-col>
     </b-row>
     <b-row>
       <b-col sm="6" md="2">
-        <widget04 iconClasses="icon-people" header="87.500" text="visitors" variant="background-info"/>
+        <widget05 iconClasses="icon-people" header="87.500" text="visitors" variant="background-info"/>
       </b-col>
       <b-col sm="6" md="2">
-        <widget04 iconClasses="icon-user-follow" header="385" text="New Clients" variant="background-success"/>
+        <widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="background-success"/>
       </b-col>
       <b-col sm="6" md="2">
-        <widget04 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="background-warning"/>
+        <widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="background-warning"/>
       </b-col>
       <b-col sm="6" md="2">
-        <widget04 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors" variant="background-primary"/>
+        <widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors" variant="background-primary"/>
       </b-col>
       <b-col sm="6" md="2">
-        <widget04 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="background-danger"/>
+        <widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="background-danger"/>
       </b-col>
       <b-col sm="6" md="2">
-        <widget04 iconClasses="icon-speech" header="972" text="Comments" variant="background-info"/>
+        <widget05 iconClasses="icon-speech" header="972" text="Comments" variant="background-info"/>
       </b-col>
     </b-row>
   </div>
@@ -100,8 +156,8 @@
 import Widget01 from './widgets/Widget01'
 import Widget02 from './widgets/Widget02'
 import Widget03 from './widgets/Widget03'
-import SocialMediaWidget from './widgets/SocialMediaWidget'
 import Widget04 from './widgets/Widget04'
+import Widget05 from './widgets/Widget05'
 
 export default {
   name: 'widgets',
@@ -109,8 +165,8 @@ export default {
     Widget01,
     Widget02,
     Widget03,
-    SocialMediaWidget,
-    Widget04
+    Widget04,
+    Widget05
   },
   data () {
     return {
diff --git a/src/views/widgets/SocialMediaWidget.vue b/src/views/widgets/SocialMediaWidget.vue
deleted file mode 100644
index 1640014a..00000000
--- a/src/views/widgets/SocialMediaWidget.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-  <b-col md="3" sm="6">
-    <div class="brand-card">
-      <div :class="'bg-' + type" class="brand-card-header bg-facebook">
-        <i  class="fa" :class="'fa-'+ type"></i>
-        <div class="chart-wrapper">
-          <social-box-chart-example :data="dataPoints" />
-        </div>
-      </div>
-      <div class="brand-card-body">
-        <div>
-          <div class="text-value">{{rightHeader}}</div>
-          <div class="text-uppercase text-muted small">{{rightFooter}}</div>
-        </div>
-        <div>
-          <div class="text-value">{{leftHeader}}</div>
-          <div class="text-uppercase text-muted small">{{leftFooter}}</div>
-        </div>
-      </div>
-    </div>
-  </b-col>
-</template>
-
-<script>
-import SocialBoxChartExample from './../dashboard/SocialBoxChartExample'
-
-
-export default {
-  name: 'SocialMediaWidget',
-  components: {
-    SocialBoxChartExample
-  },
-  props: {
-    type: {
-      type: String,
-      default: 'facebook'
-    },
-    dataPoints: {
-      type: Array,
-      default: [65, 59, 84, 84, 51, 55, 40]
-    },
-    rightHeader: {
-      type: String,
-      default: '89k'
-    },
-    rightFooter: {
-      type: String,
-      default: 'friends'
-    },
-    leftHeader: {
-      type: String,
-      default: '459'
-    },
-    leftFooter: {
-      type: String,
-      default: 'feeds'
-    },
-  }
-}
-</script>
diff --git a/src/views/widgets/Widget01.vue b/src/views/widgets/Widget01.vue
index 5c40c4fd..8f571c14 100644
--- a/src/views/widgets/Widget01.vue
+++ b/src/views/widgets/Widget01.vue
@@ -1,13 +1,11 @@
 <template>
-  <b-col sm="6" lg="3">
-    <b-card :class="styleClasses">
-      <div class="h4 m-0">{{header}}</div>
-      <div>{{text}}</div>
-      <b-progress height={} :variant="variant" :value="value"
-                  :class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
-      <small class="text-muted">{{footer}}</small>
-    </b-card>
-  </b-col>
+  <b-card :class="styleClasses">
+    <div class="h4 m-0">{{header}}</div>
+    <div>{{text}}</div>
+    <b-progress height={} :variant="variant" :value="value"
+                :class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
+    <small class="text-muted">{{footer}}</small>
+  </b-card>
 </template>
 
 <script>
diff --git a/src/views/widgets/Widget02.vue b/src/views/widgets/Widget02.vue
index bc4f767c..07c6fb3d 100644
--- a/src/views/widgets/Widget02.vue
+++ b/src/views/widgets/Widget02.vue
@@ -1,16 +1,14 @@
 <template>
-  <b-col cols="12" sm="6" lg="3">
-    <b-card :no-body="true" footer-class="px-3 py-2">
-      <b-card-body class="p-3 clearfix">
-        <i :class="iconClasses" class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i>
-        <div class="h5 text-primary mb-0 mt-2">{{header}}</div>
-        <div class="text-muted text-uppercase font-weight-bold font-xs">{{text}}</div>
-      </b-card-body>
-      <div slot="footer" v-if="showLink">
-        <b-link class="font-weight-bold font-xs btn-block text-muted" :href="link">View More <i class="fa fa-angle-right float-right font-lg"></i></b-link>
-      </div>
-    </b-card>
-  </b-col>
+  <b-card :no-body="true" footer-class="px-3 py-2">
+    <b-card-body class="p-3 clearfix">
+      <i :class="iconClasses" class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i>
+      <div class="h5 text-primary mb-0 mt-2">{{header}}</div>
+      <div class="text-muted text-uppercase font-weight-bold font-xs">{{text}}</div>
+    </b-card-body>
+    <div slot="footer" v-if="showLink">
+      <b-link class="font-weight-bold font-xs btn-block text-muted" :href="link">View More <i class="fa fa-angle-right float-right font-lg"></i></b-link>
+    </div>
+  </b-card>
 </template>
 
 <script>
diff --git a/src/views/widgets/Widget03.vue b/src/views/widgets/Widget03.vue
index 083a1146..a11a1310 100644
--- a/src/views/widgets/Widget03.vue
+++ b/src/views/widgets/Widget03.vue
@@ -1,13 +1,11 @@
 <template>
-  <b-col cols="12" sm="6" lg="3">
-    <b-card :no-body="true">
-      <b-card-body class="p-0 clearfix">
-        <i :class="iconClasses" class="p-4 font-2xl mr-3 float-left"></i>
-        <div class="h5 text-primary mb-0 pt-3">{{header}}</div>
-        <div class="text-muted text-uppercase font-weight-bold font-xs">{{text}}</div>
-      </b-card-body>
-    </b-card>
-  </b-col>
+  <b-card :no-body="true">
+    <b-card-body class="p-0 clearfix">
+      <i :class="iconClasses" class="p-4 font-2xl mr-3 float-left"></i>
+      <div class="h5 text-primary mb-0 pt-3">{{header}}</div>
+      <div class="text-muted text-uppercase font-weight-bold font-xs">{{text}}</div>
+    </b-card-body>
+  </b-card>
 </template>
 
 <script>
diff --git a/src/views/widgets/Widget04.vue b/src/views/widgets/Widget04.vue
index 6cd63cfe..f884067f 100644
--- a/src/views/widgets/Widget04.vue
+++ b/src/views/widgets/Widget04.vue
@@ -1,50 +1,57 @@
 <template>
-    <b-card :class="styleClasses">
-      <div class="h1 text-muted text-right mb-4">
-        <i :class="iconClasses"></i>
+  <div class="brand-card">
+    <div :class="'bg-' + type" class="brand-card-header bg-facebook">
+      <i  class="fa" :class="'fa-'+ type"></i>
+      <div class="chart-wrapper">
+        <social-box-chart-example :data="dataPoints" />
       </div>
-      <div class="h4 mb-0">{{header}}</div>
-      <small class="text-muted text-uppercase font-weight-bold">{{text}}</small>
-      <b-progress height={} :variant="variant" :value="value"
-                  :class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
-    </b-card>
+    </div>
+    <div class="brand-card-body">
+      <div>
+        <div class="text-value">{{rightHeader}}</div>
+        <div class="text-uppercase text-muted small">{{rightFooter}}</div>
+      </div>
+      <div>
+        <div class="text-value">{{leftHeader}}</div>
+        <div class="text-uppercase text-muted small">{{leftFooter}}</div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import SocialBoxChartExample from './../dashboard/SocialBoxChartExample'
+
+
 export default {
   name: 'Widget04',
-  data () {
-    return{
-      backgroundColor: '',
-      styleClasses: '',
-    }
-  },
-  created ()  {
-    if(this.variant.includes('background')){
-      this.backgroundColor = this.variant.replace('background-','');
-      this.styleClasses = 'text-white bg-' + this.backgroundColor
-    }
+  components: {
+    SocialBoxChartExample
   },
   props: {
-    iconClasses: {
+    type: {
       type: String,
-      default: 'icon-people'
+      default: 'facebook'
     },
-    header: {
+    dataPoints: {
+      type: Array,
+      default: [65, 59, 84, 84, 51, 55, 40]
+    },
+    rightHeader: {
       type: String,
-      default: 'Lorem ipsum...'
+      default: '89k'
     },
-    text: {
+    rightFooter: {
       type: String,
-      default: 'Lorem ipsum...'
+      default: 'friends'
     },
-    variant: {
+    leftHeader: {
       type: String,
-      default: ''
+      default: '459'
     },
-    value: {
-      type: Number,
-      default: 25
+    leftFooter: {
+      type: String,
+      default: 'feeds'
     },
   }
 }
diff --git a/src/views/widgets/Widget05.vue b/src/views/widgets/Widget05.vue
new file mode 100644
index 00000000..79101794
--- /dev/null
+++ b/src/views/widgets/Widget05.vue
@@ -0,0 +1,51 @@
+<template>
+    <b-card :class="styleClasses">
+      <div class="h1 text-muted text-right mb-4">
+        <i :class="iconClasses"></i>
+      </div>
+      <div class="h4 mb-0">{{header}}</div>
+      <small class="text-muted text-uppercase font-weight-bold">{{text}}</small>
+      <b-progress height={} :variant="variant" :value="value"
+                  :class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
+    </b-card>
+</template>
+
+<script>
+export default {
+  name: 'Widget05',
+  data () {
+    return{
+      backgroundColor: '',
+      styleClasses: '',
+    }
+  },
+  created ()  {
+    if(this.variant.includes('background')){
+      this.backgroundColor = this.variant.replace('background-','');
+      this.styleClasses = 'text-white bg-' + this.backgroundColor
+    }
+  },
+  props: {
+    iconClasses: {
+      type: String,
+      default: 'icon-people'
+    },
+    header: {
+      type: String,
+      default: 'Lorem ipsum...'
+    },
+    text: {
+      type: String,
+      default: 'Lorem ipsum...'
+    },
+    variant: {
+      type: String,
+      default: ''
+    },
+    value: {
+      type: Number,
+      default: 25
+    },
+  }
+}
+</script>