better meta title creation

zero.Web/App/Components/Tables/table.vue

@@ -188,7 +188,7 @@
   .ui-table-row:not(.ui-table-head):hover
   {
     box-shadow: 0 0 5px 4px var(--color-shadow);
-    z-index: 4;
+    z-index: 2;
     outline: 1px solid var(--color-line);
     border-bottom-color: transparent;
 
@@ -214,7 +214,7 @@
     border-bottom: 1px solid var(--color-line-light);
     z-index: 3;
     background: var(--color-box);
-    box-shadow: inset 0 -3px 3px rgba(0,0,0,0.02);
+    //box-shadow: inset 0 -3px 3px rgba(0,0,0,0.02);
 
     .ui-table-cell
     {

zero.Web/App/pages/settings/countries.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="lists">
+  <div class="countries">
     <ui-header-bar title="Countries" :on-back="goBack">
       <ui-button type="light" label="Add" icon="fth-plus" />
       <ui-table-filter :filter="false" />
@@ -29,7 +29,7 @@
             label: '',
             as: 'html',
             render: item => `<i class="flag flag-${item.code.toLowerCase()}"></i>`,
-            width: 60
+            width: 45
           },
           name: {
             as: 'text',
@@ -48,59 +48,21 @@
 
 
     methods: {
-
-      getItems(config)
-      {
-        return new Promise(resolve =>
-        {
-          resolve([
-            {
-              no: 1,
-              createdDate: '2020-03-05T10:17:25.229+01:00',
-              username: 'Tobias Klika',
-              price: 70.90,
-              status: 'Open',
-              isPublished: true
-            },
-            {
-              no: 2,
-              createdDate: '2020-03-05T10:17:25.229+01:00',
-              username: 'Fox Tales',
-              price: 12.95,
-              status: 'Processing',
-              isPublished: true
-            },
-            {
-              no: 3,
-              createdDate: '2020-03-07T17:17:25.229+01:00',
-              username: 'Christian Klika, das ist mein Name und der könnte noch viel länger sein',
-              price: 123.00,
-              status: 'Completed'
-            },
-            {
-              no: 1,
-              createdDate: '2020-03-05T10:17:25.229+01:00',
-              username: 'Tobias Klika',
-              price: 70.90,
-              status: 'Open',
-              isPublished: true
-            },
-            {
-              no: 2,
-              createdDate: '2020-03-05T10:17:25.229+01:00',
-              username: 'Fox Tales',
-              price: 12.95,
-              status: 'Processing'
-            },
-          ]);
-        });
-      },
-
       goBack()
       {
         this.$router.go(-1);
       }
-
     }
   }
-</script>
+</script>
+
+<style lang="scss">
+  .countries .ui-table-cell[table-field="flag"]
+  {
+    padding-right: 0;
+  }
+  .countries .ui-table-cell[table-field="name"]
+  {
+    border-left: none;
+  }
+</style>

zero.Web/App/pages/settings/routes.js

@@ -1,6 +1,7 @@
-import { map as _map } from 'underscore';
+import { map as _map, find as _find } from 'underscore';
 
 const alias = zero.alias.sections.settings;
+const section = _find(zero.sections, section => section.alias === alias);
 const areas = zero.settingsAreas;
 
 export default {
@@ -9,7 +10,10 @@ export default {
     return {
       path: area.url,
       name: alias + '-' + area.alias,
-      component: () => import(`zero/pages/${alias}/${area.alias}`)
+      component: () => import(`zero/pages/${alias}/${area.alias}`),
+      meta: {
+        name: [area.name, section.name ]
+      }
     };
   })
 };

zero.Web/App/router.config.js

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import Localization from 'zero/services/localization';
-import { isArray as _isArray, find as _find } from 'underscore';
+import { isArray as _isArray, find as _find, map as _map, filter as _filter } from 'underscore';
 import { warn } from 'zero/services/debug';
 
 Vue.use(VueRouter);
@@ -19,6 +19,7 @@ let addSection = (section, component, parent) =>
     component: component,
     name: (parent ? parent.alias + '-' : '') + section.alias,
     meta: {
+      name: [ section.name, (parent ? parent.name : null) ],
       alias: section.alias,
       section: section,
       parent: parent
@@ -114,19 +115,27 @@ const router = new VueRouter({
 
 router.beforeEach((to, from, next) =>
 {
-  if (to.meta.section)
+  let title = Localization.localize('@zero.name');
+
+  if (to.meta.name && to.meta.alias != zero.alias.sections.dashboard)
   {
-    document.title = Localization.localize(to.meta.section.name) + ' - zero';
-  }
-  else if (to.meta.name)
-  {
-    document.title = Localization.localize(to.meta.name) + ' - zero';
-  }
-  else
-  {
-    document.title = 'zero';
+    let name = to.meta.name;
+    let nameParts = _isArray(name) ? name : [name];
+    let translations = [];
+
+    nameParts.forEach(part =>
+    {
+      if (part)
+      {
+        translations.push(Localization.localize(part));
+      }
+    });
+
+    title += ': ' + translations.join(' - ');
   }
 
+  document.title = title;
+
   next();
 });