Shrink breadcrumbs and print primary name

src/components/projbreadcrumbs.vue

@@ -1,5 +1,5 @@
 <template>
-  <nav class="breadcrumb is-large" aria-label="breadcrumbs">
+  <nav class="breadcrumb" aria-label="breadcrumbs">
     <ul>
       <li>
         <a>{{ownertype}}</a>

src/views/Org.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <nav class="breadcrumb is-large" aria-label="breadcrumbs">
+    <nav class="breadcrumb" aria-label="breadcrumbs">
       <ul>
         <li>
           <a>org</a>
@@ -10,6 +10,11 @@
         </li>
       </ul>
     </nav>
+
+    <div class="name">
+      <span class="is-size-3">{{orgname}}</span>
+    </div>
+
     <div class="tabs">
       <ul>
         <li :class="[{ 'is-active': $route.name === 'org projects' || $route.name === 'org' }]">
@@ -46,16 +51,8 @@ export default {
 <style scoped lang="scss">
 @import "@/css/_variables.scss";
 
-.org-title {
+.name {
-  display: flex;
-  align-items: center;
   padding-left: 5px;
   margin-bottom: 25px;
-  .org-name {
-    color: $grey-dark;
-    padding-left: 5px;
-    font-size: 1.5rem;
-    padding-right: 1rem;
-  }
 }
 </style>

src/views/Project.vue

@@ -1,6 +1,11 @@
 <template>
   <div>
     <projbreadcrumbs :ownertype="ownertype" :ownername="ownername" :projectref="projectref"/>
+
+    <div class="name">
+      <span class="is-size-3">{{projectName()}}</span>
+    </div>
+
     <div class="tabs">
       <ul>
         <li>
@@ -141,7 +146,10 @@ export default {
     projectPRsRunsLink: projectPRsRunsLink,
     projectRunLink: projectRunLink,
     projectRunTaskLink: projectRunTaskLink,
-    projectSettingsLink: projectSettingsLink
+    projectSettingsLink: projectSettingsLink,
+    projectName() {
+      return this.projectref[this.projectref.length - 1];
+    }
   },
   created: async function() {
     if (this.$route.params.runid) {
@@ -154,15 +162,8 @@ export default {
 <style scoped lang="scss">
 @import "@/css/_variables.scss";
 
-.user-title {
+.name {
-  display: flex;
-  align-items: center;
   padding-left: 5px;
   margin-bottom: 25px;
-  .user-name {
-    padding-left: 5px;
-    font-size: 1.5rem;
-    padding-right: 1rem;
-  }
 }
 </style>

src/views/ProjectGroup.vue

@@ -6,6 +6,11 @@
       :ownername="ownername"
       :projectgroupref="projectgroupref"
     />
+
+    <div class="name">
+      <span class="is-size-3">{{projectgroupref[projectgroupref.length-1]}}</span>
+    </div>
+
     <div class="tabs">
       <ul>
         <li
@@ -80,15 +85,8 @@ export default {
 <style scoped lang="scss">
 @import "@/css/_variables.scss";
 
-.user-title {
+.name {
-  display: flex;
-  align-items: center;
   padding-left: 5px;
   margin-bottom: 25px;
-  .user-name {
-    padding-left: 5px;
-    font-size: 1.5rem;
-    padding-right: 1rem;
-  }
 }
 </style>

src/views/User.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <nav class="breadcrumb is-large" aria-label="breadcrumbs">
+    <nav class="breadcrumb" aria-label="breadcrumbs">
       <ul>
         <li>
           <a>user</a>
@@ -10,6 +10,11 @@
         </li>
       </ul>
     </nav>
+
+    <div class="name">
+      <span class="is-size-3">{{username}}</span>
+    </div>
+
     <div class="tabs">
       <ul>
         <li :class="[{ 'is-active': $route.name === 'user projects' || $route.name === 'user' }]">
@@ -124,16 +129,8 @@ export default {
 <style scoped lang="scss">
 @import "@/css/_variables.scss";
 
-.user-title {
+.name {
-  display: flex;
-  align-items: center;
   padding-left: 5px;
   margin-bottom: 25px;
-  .user-name {
-    color: $grey-dark;
-    padding-left: 5px;
-    font-size: 1.5rem;
-    padding-right: 1rem;
-  }
 }
 </style>