breadcrumbs (epicmaxco#89)

* The component almost completed. Needs some code refactoring. * Disabled links. Root component name. * Breadcrumbs translations * Breadcrumbs prop. Alerts were removed from dashboard. * Widgets width. Breadcrumbs colors.
yevdyko · Jan 26, 2018 · d29a6aa · d29a6aa
1 parent 9ab2e79
commit d29a6aa
Show file tree

Hide file tree

Showing 18 changed files with 512 additions and 367 deletions.
diff --git a/src/components/dashboard/Dashboard.vue b/src/components/dashboard/Dashboard.vue
@@ -1,14 +1,5 @@
 <template>
   <div class="dashboard">
-    <div class="row">
-      <div class="col-md-12">
-        <vuestic-alert type="success" :withCloseBtn="true">
-          <span class="badge badge-pill badge-success">{{'dashboard.success' | translate}}</span>
-          {{'dashboard.successMessage' | translate}}
-          <i class="fa fa-close alert-close"></i>
-        </vuestic-alert>
-      </div>
-    </div>
 
     <dashboard-info-widgets></dashboard-info-widgets>
 

diff --git a/src/components/layout/Layout.vue b/src/components/layout/Layout.vue
@@ -4,6 +4,7 @@
     <sidebar></sidebar>
     <div class="content-wrap" id="content-wrap">
       <main id="content" class="content" role="main">
+        <vuestic-breadcrumbs :breadcrumbs="breadcrumbs"/>
         <vuestic-pre-loader v-show="isLoading" ref="preLoader" class="pre-loader"></vuestic-pre-loader>
         <router-view v-show="!isLoading"></router-view>
       </main>
@@ -39,6 +40,9 @@
           'sidebar-hidden': !this.toggleWithoutAnimation && !this.sidebarOpened,
           'sidebar-hidden sidebar-hidden_without-animation': this.toggleWithoutAnimation && !this.sidebarOpened
         }
+      },
+      breadcrumbs () {
+        return this.$store.getters.breadcrumbs(this.$route.name)
       }
     }
   }

diff --git a/src/components/maps/bubble-maps/BubbleMapsPage.vue b/src/components/maps/bubble-maps/BubbleMapsPage.vue
@@ -1,9 +1,11 @@
 <template>
   <div class="bubble-maps-page">
     <div class="row">
-      <vuestic-widget class="col-sm-12 widget-viewport-height" headerText="Bubble Maps">
-        <bubble-map v-bind:map-data="bubbleMapData"></bubble-map>
-      </vuestic-widget>
+      <div class="col-md-12">
+        <vuestic-widget class="widget-viewport-height" headerText="Bubble Maps">
+          <bubble-map v-bind:map-data="bubbleMapData"></bubble-map>
+        </vuestic-widget>
+      </div>
     </div>
   </div>
 </template>

diff --git a/src/components/maps/google-maps/GoogleMapsPage.vue b/src/components/maps/google-maps/GoogleMapsPage.vue
@@ -1,9 +1,11 @@
 <template>
   <div class="google-maps-page">
     <div class="row">
-      <vuestic-widget class="col-sm-12 widget-viewport-height" headerText="Google Maps">
-        <google-map></google-map>
-      </vuestic-widget>
+      <div class="col-md-12">
+        <vuestic-widget class="widget-viewport-height" headerText="Google Maps">
+          <google-map></google-map>
+        </vuestic-widget>
+      </div>
     </div>
   </div>
 </template>

diff --git a/src/components/maps/leaflet-maps/LeafletMapsPage.vue b/src/components/maps/leaflet-maps/LeafletMapsPage.vue
@@ -1,9 +1,11 @@
 <template>
   <div class="google-maps-page">
     <div class="row">
-      <vuestic-widget class="col-sm-12 widget-viewport-height" headerText="Leaflet Maps">
-        <leaflet-map></leaflet-map>
-      </vuestic-widget>
+      <div class="col-md-12">
+        <vuestic-widget class="widget-viewport-height" headerText="Leaflet Maps">
+          <leaflet-map></leaflet-map>
+        </vuestic-widget>
+      </div>
     </div>
   </div>
 </template>

diff --git a/src/components/maps/line-maps/LineMapsPage.vue b/src/components/maps/line-maps/LineMapsPage.vue
@@ -1,9 +1,11 @@
 <template>
   <div class="bubble-maps-page">
     <div class="row">
-      <vuestic-widget class="col-sm-12 widget-viewport-height" headerText="Line Maps">
-        <line-map v-bind:map-data="lineMapData"></line-map>
-      </vuestic-widget>
+      <div class="col-md-12">
+        <vuestic-widget class="widget-viewport-height" headerText="Line Maps">
+          <line-map v-bind:map-data="lineMapData"></line-map>
+        </vuestic-widget>
+      </div>
     </div>
   </div>
 </template>

diff --git a/src/components/statistics/progress-bars/ProgressBars.vue b/src/components/statistics/progress-bars/ProgressBars.vue
@@ -1,98 +1,104 @@
 <template>
   <div class="progress-bars">
     <div class="row">
-      <vuestic-widget class="col-12" headerText="Progress Bars">
-        <div class="row">
-          <div class="col-sm-4 col-12">
-            {{'progressBars.basic' | translate}}
-            <div class="pb-container">
-              <vuestic-progress-bar ref="hBasic">
-              </vuestic-progress-bar>
+      <div class="col-md-12">
+        <vuestic-widget headerText="Progress Bars">
+          <div class="row">
+            <div class="col-sm-4 col-12">
+              {{'progressBars.basic' | translate}}
+              <div class="pb-container">
+                <vuestic-progress-bar ref="hBasic">
+                </vuestic-progress-bar>
+              </div>
             </div>
-          </div>
-          <div class="col-sm-4 col-12">
-            {{'progressBars.thin' | translate}}
-            <div class="pb-container">
-              <vuestic-progress-bar size="thin" ref="hThin">
-              </vuestic-progress-bar>
+            <div class="col-sm-4 col-12">
+              {{'progressBars.thin' | translate}}
+              <div class="pb-container">
+                <vuestic-progress-bar size="thin" ref="hThin">
+                </vuestic-progress-bar>
+              </div>
             </div>
-          </div>
-          <div class="col-sm-4 col-12">
-            {{'progressBars.thick' | translate}}
-            <div class="pb-container">
-              <vuestic-progress-bar size="thick" ref="hThick">
-              </vuestic-progress-bar>
+            <div class="col-sm-4 col-12">
+              {{'progressBars.thick' | translate}}
+              <div class="pb-container">
+                <vuestic-progress-bar size="thick" ref="hThick">
+                </vuestic-progress-bar>
+              </div>
             </div>
-          </div>
-          <div class="col-sm-4 col-12">
-            {{'progressBars.basicVertical' | translate}}
-            <div class="pb-container">
-              <div>
-                <vuestic-progress-bar type="vertical" ref="vBasic"></vuestic-progress-bar>
+            <div class="col-sm-4 col-12">
+              {{'progressBars.basicVertical' | translate}}
+              <div class="pb-container">
+                <div>
+                  <vuestic-progress-bar type="vertical" ref="vBasic"></vuestic-progress-bar>
+                </div>
               </div>
             </div>
-          </div>
-          <div class="col-sm-4 col-12">
-            {{'progressBars.thinVertical' | translate}}
-            <div>
-              <vuestic-progress-bar size="thin" type="vertical" ref="vThin">
-              </vuestic-progress-bar>
+            <div class="col-sm-4 col-12">
+              {{'progressBars.thinVertical' | translate}}
+              <div>
+                <vuestic-progress-bar size="thin" type="vertical" ref="vThin">
+                </vuestic-progress-bar>
+              </div>
             </div>
-          </div>
-          <div class="col-sm-4 col-12">
-            {{'progressBars.circle' | translate}}
-            <div>
-              <vuestic-progress-bar type="circle" ref="circle"></vuestic-progress-bar>
+            <div class="col-sm-4 col-12">
+              {{'progressBars.circle' | translate}}
+              <div>
+                <vuestic-progress-bar type="circle" ref="circle"></vuestic-progress-bar>
+              </div>
             </div>
           </div>
-        </div>
-      </vuestic-widget>
-      <vuestic-widget class="col-12" headerText="Colorful Bars">
-        <div class="row">
-          <div class="col-sm-4 col-12">
-            {{'progressBars.basic' | translate}}
-            <div class="pb-container">
-              <vuestic-progress-bar ref="chBasic" colorName="danger">
-              </vuestic-progress-bar>
+        </vuestic-widget>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-12">
+        <vuestic-widget headerText="Colorful Bars">
+          <div class="row">
+            <div class="col-sm-4 col-12">
+              {{'progressBars.basic' | translate}}
+              <div class="pb-container">
+                <vuestic-progress-bar ref="chBasic" colorName="danger">
+                </vuestic-progress-bar>
+              </div>
             </div>
-          </div>
-          <div class="col-sm-4 col-12">
-            {{'progressBars.thin' | translate}}
-            <div class="pb-container">
-              <vuestic-progress-bar size="thin" ref="chThin" colorName="info">
-              </vuestic-progress-bar>
+            <div class="col-sm-4 col-12">
+              {{'progressBars.thin' | translate}}
+              <div class="pb-container">
+                <vuestic-progress-bar size="thin" ref="chThin" colorName="info">
+                </vuestic-progress-bar>
+              </div>
             </div>
-          </div>
-          <div class="col-sm-4 col-12">
-            {{'progressBars.thick' | translate}}
-            <div class="pb-container">
-              <vuestic-progress-bar size="thick" ref="chThick" colorName="warning">
-              </vuestic-progress-bar>
+            <div class="col-sm-4 col-12">
+              {{'progressBars.thick' | translate}}
+              <div class="pb-container">
+                <vuestic-progress-bar size="thick" ref="chThick" colorName="warning">
+                </vuestic-progress-bar>
+              </div>
             </div>
-          </div>
-          <div class="col-sm-4 col-12">
-            {{'progressBars.basicVertical' | translate}}
-            <div class="pb-container">
-              <div>
-                <vuestic-progress-bar type="vertical" ref="cvBasic" colorName="success"></vuestic-progress-bar>
+            <div class="col-sm-4 col-12">
+              {{'progressBars.basicVertical' | translate}}
+              <div class="pb-container">
+                <div>
+                  <vuestic-progress-bar type="vertical" ref="cvBasic" colorName="success"></vuestic-progress-bar>
+                </div>
               </div>
             </div>
-          </div>
-          <div class="col-sm-4 col-12">
-            {{'progressBars.thinVertical' | translate}}
-            <div class="pb-container">
-              <vuestic-progress-bar size="thin" type="vertical" ref="cvThin" colorName="black">
-              </vuestic-progress-bar>
+            <div class="col-sm-4 col-12">
+              {{'progressBars.thinVertical' | translate}}
+              <div class="pb-container">
+                <vuestic-progress-bar size="thin" type="vertical" ref="cvThin" colorName="black">
+                </vuestic-progress-bar>
+              </div>
             </div>
-          </div>
-          <div class="col-sm-4 col-12">
-            {{'progressBars.circle' | translate}}
-            <div class="pb-container">
-              <vuestic-progress-bar type="circle" ref="ccircle"></vuestic-progress-bar>
+            <div class="col-sm-4 col-12">
+              {{'progressBars.circle' | translate}}
+              <div class="pb-container">
+                <vuestic-progress-bar type="circle" ref="ccircle"></vuestic-progress-bar>
+              </div>
             </div>
           </div>
-        </div>
-      </vuestic-widget>
+        </vuestic-widget>
+      </div>
     </div>
   </div>
 </template>
@@ -137,7 +143,7 @@
 
     .vuestic-progress-bar {
       .progress.thick {
-        margin-top: calc(#{$progress-bar-width-thick}/2 - .125rem);
+        margin-top: calc(#{$progress-bar-width-thick} / 2 - .125rem);
       }
       .progress.thin {
         margin-top: .125rem;