Change connection message by connection status bar

src/components/DataPage.vue

@@ -16,7 +16,7 @@
         item-navigator(v-if='!isTable' :next='next' :prev='prev' :total='total' :regKey='dataKey()(dataType)')
 
         .tabs
-          .tabs-titles
+          .tabs-titles(v-if='page.data')
             template(v-for='tab in mainContentTabs')
               button.btn.tab-title.link(v-if='tab.name' @click='setActiveContentTab(tab.name,$event)'
                :class='tabTitleCss(isActiveContentTab(tab))')
@@ -29,7 +29,8 @@
         data-section(v-if='!tabs && !activeContentTab' :module='module' :dataType='dataType'
           :reqKey='reqKey' :component='component' :action='action')
         .tabs(v-if='tabs && data && !hideTabs')
-          .tabs-titles
+          //- Tabs titles
+          .tabs-titles(v-if='page.data')
             template(v-for='tab in tabs')
               template(v-if='renderTab(tab)')
                 template(v-if='isRequesting()(tab.name)')
@@ -296,6 +297,8 @@ export default {
 }
 </script>
 <style lang="stylus">
+  .data-page
+    align-self flex-start
   .page-header
     width 100%
 

src/components/Home.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .home
+  .home(v-if='lastBlocks.length')
     .hero
       .col-a(ref='last-blocks-box')
         .box.row.last-blocks

src/components/LastBlocks.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .blocks-wrapper
+  .blocks-wrapper(v-show='blocks.length')
     h2.title
       router-link(:to='entity.listLink')
         icon(:name='entity.icon')

src/lib/styl/layout.styl

@@ -32,7 +32,8 @@ body, .wrapper
 
 .main
   margin 0 1rem
-
+  align-items flex-start
+  flex-flow column nowrap
 .hero
   display flex
   flex 1 1 100%