#47 - Design makeover

- Redesign home page - Add imi copyright note - Adjust the path width in detail views - Change icons color - Change namespace icon
imi-frankfurt · May 31, 2022 · 097edc4 · 097edc4
1 parent 5360b7a
commit 097edc4
Show file tree

Hide file tree

Showing 14 changed files with 761 additions and 194 deletions.
diff --git a/assets/images/startpage/dots.png b/assets/images/startpage/dots.png
diff --git a/assets/images/startpage/symbol-bg1.png b/assets/images/startpage/symbol-bg1.png
diff --git a/assets/images/startpage/symbol-bg2.png b/assets/images/startpage/symbol-bg2.png
diff --git a/components/views/data-element-detail-view.vue b/components/views/data-element-detail-view.vue
@@ -7,11 +7,10 @@
           justify="center"
         >
           <v-progress-circular
-            :size="500"
+            :size="400"
             color="primary"
             indeterminate
-          >
-          </v-progress-circular>
+          />
         </v-col>
       </v-row>
     </v-container>
@@ -36,30 +35,30 @@
             <v-container class="text-center">
               <v-row no-gutters>
                 <v-col v-for="item in elementPath" :key="item.urn">
-                  <v-row no-gutters style="width: 100%;">
-                    <v-col v-if="!item.urn.includes('namespace')" cols="3">
-                      <v-icon>
-                        mdi-slash-forward
-                      </v-icon>
-                    </v-col>
-                    <v-col cols="9">
-                      <v-btn
-                        color="grey lighten-4"
-                        rounded
-                        :disabled="!activatePathNavigation"
-                        @click="showDetailViewDialog(item.urn)"
-                      >
-                        <div
-                          v-if="item.urn === urn"
-                        >
-                          {{ item.designation }}
-                        </div>
-                        <a v-if="item.urn !== urn">
-                          {{ item.designation }}
-                        </a>
-                      </v-btn>
-                    </v-col>
-                  </v-row>
+                  <v-icon v-if="!item.urn.includes('namespace')">
+                    mdi-slash-forward
+                  </v-icon>
+                  <v-btn
+                    width="130"
+                    class="designationButton"
+                    color="grey lighten-4"
+                    rounded
+                    :disabled="!activatePathNavigation"
+                    @click="showDetailViewDialog(item.urn)"
+                  >
+                    <div
+                      v-if="item.urn === urn"
+                      style="text-align: center; width: 100%; white-space: normal;"
+                    >
+                      {{ item.designation }}
+                    </div>
+                    <a
+                      v-if="item.urn !== urn"
+                      style="text-align: center; width: 100%; white-space: normal;"
+                    >
+                      {{ item.designation }}
+                    </a>
+                  </v-btn>
                 </v-col>
               </v-row>
             </v-container>
@@ -320,4 +319,12 @@ export default {
 .detailViewCard {
   margin-bottom: 30px;
 }
+
+.designationButton {
+  min-width: 150px;
+  max-width: 150px;
+  width: 150px;
+  overflow: hidden;
+  text-overflow: fade;
+}
 </style>
diff --git a/components/views/groups-records-detail-view.vue b/components/views/groups-records-detail-view.vue
@@ -7,7 +7,7 @@
           justify="center"
         >
           <v-progress-circular
-            :size="500"
+            :size="400"
             color="primary"
             indeterminate
           >
@@ -37,26 +37,30 @@
           <v-container class="text-center">
             <v-row no-gutters>
               <v-col v-for="item in elementPath" :key="item.urn">
-                <v-row no-gutters style="width: 100%;">
-                  <v-col v-if="!item.urn.includes('namespace')" cols="3">
-                    <v-icon>
-                      mdi-slash-forward
-                    </v-icon>
-                  </v-col>
-                  <v-col cols="9">
-                    <v-btn
-                      color="grey lighten-4"
-                      rounded
-                      :disabled="!activatePathNavigation"
-                      @click="showDetailViewDialog(item.urn)"
-                    >
-                      <div v-if="item.urn === urn">
-                        {{ item.designation }}
-                      </div>
-                      <a v-if="item.urn !== urn">{{ item.designation }}</a>
-                    </v-btn>
-                  </v-col>
-                </v-row>
+                <v-icon v-if="!item.urn.includes('namespace')">
+                  mdi-slash-forward
+                </v-icon>
+                <v-btn
+                  width="130"
+                  class="designationButton"
+                  color="grey lighten-4"
+                  rounded
+                  :disabled="!activatePathNavigation"
+                  @click="showDetailViewDialog(item.urn)"
+                >
+                  <div
+                    v-if="item.urn === urn"
+                    style="text-align: center; width: 100%; white-space: normal;"
+                  >
+                    {{ item.designation }}
+                  </div>
+                  <a
+                    v-if="item.urn !== urn"
+                    style="text-align: center; width: 100%; white-space: normal;"
+                  >
+                    {{ item.designation }}
+                  </a>
+                </v-btn>
               </v-col>
             </v-row>
           </v-container>
@@ -297,4 +301,13 @@ export default {
 .detailViewCard {
   margin-bottom: 30px;
 }
+
+.designationButton {
+  min-width: 50px;
+  width: 40px;
+  display: inline-block;
+  overflow-wrap: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 </style>
diff --git a/components/views/namespace-detail-view.vue b/components/views/namespace-detail-view.vue
@@ -7,7 +7,7 @@
           justify="center"
         >
           <v-progress-circular
-            :size="500"
+            :size="400"
             color="primary"
             indeterminate
           >
@@ -31,10 +31,16 @@
       <!-- Namespace Toolbar TODO: Check of this could be outsourced ...-->
       <v-toolbar>
         <v-btn
+          width="140"
+          class="designationButton"
           color="grey lighten-4"
           rounded
         >
-          {{ namespace.definitions[0].designation }}
+          <div
+            style="text-align: center; width: 100%; white-space: normal;"
+          >
+            {{ namespace.definitions[0].designation }}
+          </div>
         </v-btn>
         <v-spacer />
         <v-btn
@@ -184,3 +190,13 @@ export default {
   }
 }
 </script>
+<style>
+.designationButton {
+  min-width: 50px;
+  width: 40px;
+  display: inline-block;
+  overflow-wrap: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
diff --git a/components/views/permitted-value-detail-view.vue b/components/views/permitted-value-detail-view.vue
@@ -5,9 +5,14 @@
         color="grey lighten-4"
         flat
       >
-        <!-- Namespace Toolbar TODO: Check of this could be outsourced ...-->
         <v-toolbar>
-          <v-toolbar-title>{{ $t('global.properties') }} {{ $t('global.of') }} <b>{{ urn }}</b></v-toolbar-title>
+          <v-btn
+            class="designationButton"
+            color="grey lighten-4"
+            rounded
+          >
+            {{ permittedValue.definitions[0].designation }}
+          </v-btn>
           <v-spacer />
           <v-btn
             v-if="editable"
@@ -124,3 +129,13 @@ export default {
   }
 }
 </script>
+<style>
+.designationButton {
+  min-width: 50px;
+  width: 40px;
+  display: inline-block;
+  overflow-wrap: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -9,19 +9,23 @@
       app
     >
       <div class="text-center">
-        <img src="@/assets/images/logo/1.png" height="60"/>
+        <img src="@/assets/images/logo/1.png" height="60">
       </div>
       <v-list>
         <v-list-item-group>
           <v-list-item to="/">
             <v-list-item-icon>
-              <v-icon color="white">mdi-view-dashboard</v-icon>
+              <v-icon color="white">
+                mdi-view-dashboard
+              </v-icon>
             </v-list-item-icon>
             <v-list-item-title><v-list-item-title v-text="$t('global.mainMenu.home')" /></v-list-item-title>
           </v-list-item>
           <v-list-item to="/all-elements">
             <v-list-item-icon>
-              <v-icon color="white">mdi-home</v-icon>
+              <v-icon color="white">
+                mdi-home
+              </v-icon>
             </v-list-item-icon>
             <v-list-item-title><v-list-item-title v-text="$t('global.mainMenu.mainView')" /></v-list-item-title>
           </v-list-item>
@@ -32,7 +36,9 @@
             <v-list-item-group>
               <v-list-item to="/tools/search">
                 <v-list-item-icon>
-                  <v-icon color="white">mdi-magnify</v-icon>
+                  <v-icon color="white">
+                    mdi-magnify
+                  </v-icon>
                 </v-list-item-icon>
                 <v-list-item-title><v-list-item-title v-text="$t('global.mainMenu.tools.search')" /></v-list-item-title>
               </v-list-item>
@@ -43,16 +49,33 @@
           <v-divider />
           <v-list-item to="/about">
             <v-list-item-icon>
-              <v-icon color="white">mdi-information</v-icon>
+              <v-icon color="white">
+                mdi-information
+              </v-icon>
             </v-list-item-icon>
             <v-list-item-title><v-list-item-title v-text="$t('global.mainMenu.about')" /></v-list-item-title>
           </v-list-item>
           <v-list-item to="/help">
             <v-list-item-icon>
-              <v-icon color="white">mdi-help-circle</v-icon>
+              <v-icon color="white">
+                mdi-help-circle
+              </v-icon>
             </v-list-item-icon>
             <v-list-item-title><v-list-item-title v-text="$t('global.mainMenu.help')" /></v-list-item-title>
           </v-list-item>
+          <v-list-item inactive>
+            <v-list-item-icon>
+              <v-icon color="white">
+                &copy;
+              </v-icon>
+            </v-list-item-icon>
+            <v-list-item-content>
+              <span>&copy; 2022 {{ $t('global.imi') }}</span>
+            </v-list-item-content>
+<!--            <v-footer inset color="navigation_drawer">-->
+<!--              -->
+<!--            </v-footer>-->
+          </v-list-item>
         </v-list-item-group>
       </v-list>
     </v-navigation-drawer>
@@ -62,14 +85,8 @@
       fixed
       app
     >
-<!--      <v-btn-->
-<!--        icon-->
-<!--        @click.stop="miniVariant = !miniVariant"-->
-<!--      >-->
-<!--        <v-icon>mdi-{{ `chevron-${miniVariant ? 'right' : 'left'}` }}</v-icon>-->
-<!--      </v-btn>-->
       <div class="dehubText">
-        <img src="@/assets/images/logo/3.png" height="60"/>
+        <img src="@/assets/images/logo/3.png" height="60">
       </div>
       <v-spacer />
       <v-btn
@@ -126,6 +143,13 @@ export default {
       title: 'global.appName'
     }
   },
+  watch: {
+    '$auth.loggedIn' () {
+      if (!this.$auth.loggedIn) {
+        this.logout()
+      }
+    }
+  },
   methods: {
     async logout () {
       try {

diff --git a/locales/de-DE.js b/locales/de-DE.js
@@ -186,15 +186,12 @@ export default {
   },
   pages: {
     home: {
-      title: 'Home',
-      subtitle: '',
-      content: {
-        howdy: 'Willkommen beim Data Element Hub (DEHub)!',
-        preAlpha: 'Was Sie hier sehen, ist eine Alpha-Version der neuen Data Element Hub GUI. Erwarten Sie also keine voll funktionsfähige fehlerfreie Version. Wir arbeiten kontinuierlich an der Verbesserung der Software.',
-        bugReport: 'Wenn Sie auf einen Fehler stoßen, können Sie gerne ein Issue im Projekt-Repository erstellen, das Sie hier finden (<a href="https://github.com/mig-frankfurt/dataelementhub.gui" target="_blank">https://github.com/mig-frankfurt/dataelementhub.gui</a>) .',
-        dockerImage: 'Von Zeit zu Zeit wird es ein neues Release des entsprechenden Docker-Images geben. Überprüfen Sie das also unbedingt auch.',
-        thanks: 'Weitere Informationen finden Sie unter <a href="https://dataelementhub.de" target="_blank">https://dataelementhub.de</a><br><br><b>Danke!</b>'
-      }
+      introduction: 'Das DataElementHub',
+      dehub: 'Der zentrale Einstiegspunkt für menschliche Benutzer und Maschinen zum Speichern, Verwalten und Abrufen von Datenelement-Spezifikationen.',
+      1: 'Syntaktische und semantische Interoperabilität zwischen Datenquellen mit unterschiedlicher Struktur und Formalisierung.',
+      2: 'Teilweise Implementierung von ISO 11179-3 und ISO 21526 mit Schwerpunkt auf Anwendungsfällen im Gesundheitswesen und in der medizinischen Forschung.',
+      3: 'Die in DEHub gespeicherten Metadaten tragen dazu bei, dass die Spezifikationen der Datenelemente und damit die jeweiligen Datensammlungen auch für Dritte langfristig zugänglich sind.',
+      4: 'Das DEHub soll eine zentrale Komponente sein, die flexibel für unterschiedliche Anwendungsszenarien eingesetzt werden kann, aber dennoch die Anforderungen an eine strukturierte und qualitätsgesicherte Sammlung von Metadaten erfüllt.'
     },
     namespaces: {
       title: 'Namespaces',
@@ -346,7 +343,12 @@ export default {
     },
     login: {
       title: 'Anmeldung',
-      subtitle: '',
+      introduction: 'Das DataElementHub',
+      dehub: 'Der zentrale Einstiegspunkt für menschliche Benutzer und Maschinen zum Speichern, Verwalten und Abrufen von Datenelement-Spezifikationen.',
+      1: 'Syntaktische und semantische Interoperabilität zwischen Datenquellen mit unterschiedlicher Struktur und Formalisierung.',
+      2: 'Teilweise Implementierung von ISO 11179-3 und ISO 21526 mit Schwerpunkt auf Anwendungsfällen im Gesundheitswesen und in der medizinischen Forschung.',
+      3: 'Die in DEHub gespeicherten Metadaten tragen dazu bei, dass die Spezifikationen der Datenelemente und damit die jeweiligen Datensammlungen auch für Dritte langfristig zugänglich sind.',
+      4: 'Das DEHub soll eine zentrale Komponente sein, die flexibel für unterschiedliche Anwendungsszenarien eingesetzt werden kann, aber dennoch die Anforderungen an eine strukturierte und qualitätsgesicherte Sammlung von Metadaten erfüllt.',
       infoAlert: {
         text: 'Um das DEHub nutzen zu können, müssen Sie sich gegen eine <abbr title="Single Sign On">SSO Server</abbr> authentifizieren. Die aktuelle <abbr title="Single Sign On">SSO Server</abbr> wird von der Medical Informatics Group (MIG) betrieben.'
       },