#107 - Design improvements

- Reformulate the faq questions
- Use larger blocks for metadata in the detail view
- Change breadcrumbs in the detail view
- Add universal toolbar for all detail views

components/common/detail-view-toolbar.vue

@@ -0,0 +1,94 @@
+<script>
+export default {
+  props: {
+    elementPath: {
+      required: true,
+      type: Array
+    },
+    elementUrn: {
+      required: true,
+      type: String
+    },
+    elementIsDeletable: {
+      required: true,
+      type: Boolean
+    },
+    elementIsEditable: {
+      required: true,
+      type: Boolean
+    },
+    activateNavigation: {
+      required: true,
+      type: Boolean
+    }
+  },
+  methods: {
+    getRightButtonClass () {
+      return {
+        'right-button-marked': this.selectedElementPathType === 'URN',
+        'right-button': this.selectedElementPathType !== 'URN'
+      }
+    },
+    getBreadCrumbItemColor (disabled) {
+      return {
+        'breadcrumb-item-disabled': disabled,
+        'breadcrumb-item-activated': !disabled
+      }
+    }
+  }
+}
+</script>
+
+<template>
+  <v-toolbar>
+    <v-toolbar-title>
+      <v-container class="text-center">
+        <v-row no-gutters>
+          <v-col>
+            <v-breadcrumbs :items="elementPath">
+              <template #item="{ item }">
+                <v-breadcrumbs-item
+                  link
+                  :disabled="item.urn === elementUrn || !activateNavigation"
+                  @click="$emit('showDetailViewDialog', item.urn)"
+                >
+                  <span :class="getBreadCrumbItemColor(item.urn === elementUrn || !activateNavigation)">
+                    {{ item.designation.toUpperCase() }}
+                  </span>
+                </v-breadcrumbs-item>
+              </template>
+            </v-breadcrumbs>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-toolbar-title>
+    <v-spacer />
+    <v-btn
+      v-if="elementIsEditable"
+      icon
+      color="primary"
+      @click="$emit('editElement')"
+    >
+      <v-icon>mdi-pencil</v-icon>
+    </v-btn>
+    <v-btn
+      v-if="elementIsDeletable"
+      icon
+      @click="$emit('deleteElement')"
+    >
+      <v-icon>mdi-delete</v-icon>
+    </v-btn>
+  </v-toolbar>
+</template>
+
+<style scoped>
+.breadcrumb-item-disabled {
+  color: #3d3f3f;
+}
+
+.breadcrumb-item-activated {
+  color: #0080c8;
+  cursor: pointer;
+}
+
+</style>

components/item/meta-data-card.vue

@@ -9,7 +9,7 @@ export default {
 
 <template>
   <v-card
-    class="meta-data-card d-flex align-left justify-center"
+    class="meta-data-card d-flex align-left justify-center ma-0 pa-ß"
   >
     <card>
       <v-list-item two-line>
@@ -22,7 +22,7 @@ export default {
   </v-card>
 </template>
 
-<style>
+<style scoped>
 
 .meta-data-card {
   border-radius: 75px;

components/item/meta-data.vue

@@ -1,6 +1,6 @@
 <template>
-  <v-container>
-    <v-row dense>
+  <v-container class="meta-data-container" fluid>
+    <v-row class="meta-data-row" dense>
       <v-col>
         <MetaDataCard
           :title="data.elementType.toUpperCase()"
@@ -106,7 +106,12 @@ export default {
   }
 }
 </script>
-<style>
+<style scoped>
+
+.meta-data-container {
+  padding-inline: 0;
+}
+
 .meta-data-card {
   border-radius: 75px;
   elevation: level;