fixing text alignment

FAIRsharing · Aug 2, 2024 · 71aac2d · 71aac2d
1 parent 1e0e5c6
commit 71aac2d
Show file tree

Hide file tree

Showing 8 changed files with 89 additions and 72 deletions.
diff --git a/src/components/Records/Record/GeneralInfo/Countries.vue b/src/components/Records/Record/GeneralInfo/Countries.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="d-flex flex-row mt-4 min-height-40">
     <span
-      style="white-space: nowrap;"
+      class="d-flex align-baseline width-15-percent-flex"
     >
       <v-tooltip bottom>
         <template #activator="{ on }">
@@ -15,7 +15,7 @@
         </template>
         {{ recordTooltips['countries'] }}
       </v-tooltip>
-      <b class="width-15-percent-flex">Countries developing this resource</b>
+      <b>Countries developing this resource</b>
     </span>
     <div class="d-flex full-width flex-wrap ml-md-12 ml-13">
       <NoneFound

diff --git a/src/components/Records/Record/GeneralInfo/Description.vue b/src/components/Records/Record/GeneralInfo/Description.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="d-flex flex-row mt-4 min-height-40">
     <span
-      style="white-space: nowrap;"
+      class="d-flex align-baseline width-15-percent-flex"
     >
       <v-tooltip bottom>
         <template #activator="{ on }">
@@ -15,7 +15,7 @@
         </template>
         {{ recordTooltips['description'] }}
       </v-tooltip>
-      <b class="width-15-percent-flex">Description</b>
+      <b>Description</b>
     </span>
     <p class="ma-0 full-width ml-md-12 ml-8 text-justify">
       {{ getField('description') | capitalize }}

diff --git a/src/components/Records/Record/GeneralInfo/HomePage.vue b/src/components/Records/Record/GeneralInfo/HomePage.vue
@@ -3,20 +3,24 @@
     v-if="getField('homepage')"
     class="d-flex flex-row mt-4 align-center min-height-40"
   >
-    <v-tooltip bottom>
-      <template #activator="{ on }">
-        <v-icon
-          class="mr-2"
-          size="15"
-          v-on="on"
-        >
-          fa-question-circle
-        </v-icon>
-      </template>
-      {{ recordTooltips['homepage'] }}
-    </v-tooltip>
-    <b class="width-15-percent-flex">Homepage</b>
-    <div class="d-flex full-width ml-md-6 ml-2">
+    <span
+      class="d-flex align-baseline width-15-percent-flex"
+    >
+      <v-tooltip bottom>
+        <template #activator="{ on }">
+          <v-icon
+            class="mr-2"
+            size="15"
+            v-on="on"
+          >
+            fa-question-circle
+          </v-icon>
+        </template>
+        {{ recordTooltips['homepage'] }}
+      </v-tooltip>
+      <b>Homepage</b>
+    </span>
+    <div class="d-flex ma-0 full-width ml-md-12 ml-8 text-justify">
       <a
         v-if="getField('homepage')"
         :href="getField('homepage')"

diff --git a/src/components/Records/Record/GeneralInfo/Keywords.vue b/src/components/Records/Record/GeneralInfo/Keywords.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <!--Domains-->
+    <!--Subjects-->
     <div class="d-flex flex-row mt-4 min-height-40">
       <span
-        style="white-space: nowrap;"
+        class="d-flex align-baseline width-15-percent-flex"
       >
         <v-tooltip bottom>
           <template #activator="{ on }">
@@ -17,7 +17,7 @@
           </template>
           {{ recordTooltips['subjects'] }}
         </v-tooltip>
-        <b class="width-15-percent-flex">Subjects</b>
+        <b>Subjects</b>
       </span>
       <div class="d-flex full-width flex-wrap ml-md-12 ml-13">
         <span v-if="!getField('subjects').length">
@@ -38,10 +38,10 @@
         </v-chip>
       </div>
     </div>
-    <!--Subjects-->
+    <!--Domains-->
     <div class="d-flex flex-row mt-4 min-height-40">
       <span
-        style="white-space: nowrap;"
+        class="d-flex align-baseline width-15-percent-flex"
       >
         <v-tooltip bottom>
           <template #activator="{ on }">
@@ -55,7 +55,7 @@
           </template>
           {{ recordTooltips['domains'] }}
         </v-tooltip>
-        <b class="width-15-percent-flex">Domains</b>
+        <b>Domains</b>
       </span>
       <div class="d-flex full-width flex-wrap ml-md-12 ml-13">
         <span v-if="!getField('domains').length">
@@ -79,7 +79,7 @@
     <!--Taxonomic Range-->
     <div class="d-flex flex-row mt-4 min-height-40">
       <span
-        style="white-space: nowrap;"
+        class="d-flex align-baseline width-15-percent-flex"
       >
         <v-tooltip bottom>
           <template #activator="{ on }">
@@ -93,7 +93,7 @@
           </template>
           {{ recordTooltips['taxonomies'] }}
         </v-tooltip>
-        <b class="width-15-percent-flex">Taxonomic Range</b>
+        <b>Taxonomic Range</b>
       </span>
       <div class="d-flex full-width flex-wrap ml-md-12 ml-13">
         <span v-if="!getField('taxonomies').length">
@@ -117,7 +117,7 @@
     <!--User Defined Tags-->
     <div class="d-flex flex-row mt-4 min-height-40">
       <span
-        style="white-space: nowrap;"
+        class="d-flex align-baseline width-15-percent-flex"
       >
         <v-tooltip bottom>
           <template #activator="{ on }">
@@ -131,7 +131,7 @@
           </template>
           {{ recordTooltips['user_defined_tags'] }}
         </v-tooltip>
-        <b class="width-15-percent-flex">User Defined Tags</b>
+        <b>User Defined Tags</b>
       </span>
       <div class="d-flex full-width flex-wrap ml-md-12 ml-13">
         <span v-if="!getField('userDefinedTags').length">

diff --git a/src/components/Records/Record/GeneralInfo/Maintainers.vue b/src/components/Records/Record/GeneralInfo/Maintainers.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="d-flex flex-row mt-4 min-height-40">
     <span
-      style="white-space: nowrap;"
+      class="d-flex align-baseline width-15-percent-flex"
     >
       <v-tooltip bottom>
         <template #activator="{ on }">
@@ -15,7 +15,7 @@
         </template>
         {{ recordTooltips['maintainers'] }}
       </v-tooltip>
-      <b class="width-15-percent-flex">Maintainers</b>
+      <b>Maintainers</b>
     </span>
     <div class="d-flex full-width flex-wrap ml-md-12 ml-8">
       <div

diff --git a/src/components/Records/Record/GeneralInfo/Registry.vue b/src/components/Records/Record/GeneralInfo/Registry.vue
@@ -1,19 +1,23 @@
 <template>
   <div class="d-flex flex-row mt-4 align-center min-height-40">
-    <v-tooltip bottom>
-      <template #activator="{ on }">
-        <v-icon
-          class="mr-2"
-          size="15"
-          v-on="on"
-        >
-          fa-question-circle
-        </v-icon>
-      </template>
-      {{ recordTooltips['fairsharing_registry'] }}
-    </v-tooltip>
-    <b class="width-15-percent-flex">Registry</b>
-    <p class="ma-0 full-width ml-md-6 ml-2">
+    <span
+      class="d-flex align-baseline width-15-percent-flex"
+    >
+      <v-tooltip bottom>
+        <template #activator="{ on }">
+          <v-icon
+            class="mr-2"
+            size="15"
+            v-on="on"
+          >
+            fa-question-circle
+          </v-icon>
+        </template>
+        {{ recordTooltips['fairsharing_registry'] }}
+      </v-tooltip>
+      <b>Registry</b>
+    </span>
+    <p class="ma-0 full-width ml-md-12 ml-8 text-justify">
       {{ getField('registry') | capitalize }}
     </p>
   </div>

diff --git a/src/components/Records/Record/GeneralInfo/Type.vue b/src/components/Records/Record/GeneralInfo/Type.vue
@@ -1,19 +1,24 @@
 <template>
   <div class="d-flex flex-row mt-4 align-center">
-    <v-tooltip bottom>
-      <template #activator="{ on }">
-        <v-icon
-          class="mr-2"
-          size="15"
-          v-on="on"
-        >
-          fa-question-circle
-        </v-icon>
-      </template>
-      {{ recordTooltips['record_type'] }}
-    </v-tooltip>
-    <b class="width-15-percent-flex">Type</b>
-    <p class="ma-0 full-width ml-md-6 ml-2">
+    <span
+      class="width-15-percent-flex"
+      style="white-space: nowrap;"
+    >
+      <v-tooltip bottom>
+        <template #activator="{ on }">
+          <v-icon
+            class="mr-2"
+            size="15"
+            v-on="on"
+          >
+            fa-question-circle
+          </v-icon>
+        </template>
+        {{ recordTooltips['record_type'] }}
+      </v-tooltip>
+      <b>Type</b>
+    </span>
+    <p class="ma-0 full-width ml-md-12 ml-8 text-justify">
       {{ cleanString(getField('type')) | capitalize }}
     </p>
   </div>

diff --git a/src/components/Records/Record/GeneralInfo/YearOfCreation.vue b/src/components/Records/Record/GeneralInfo/YearOfCreation.vue
@@ -1,19 +1,23 @@
 <template>
   <div class="d-flex flex-row mt-4 align-center min-height-40">
-    <v-tooltip bottom>
-      <template #activator="{ on }">
-        <v-icon
-          class="mr-2"
-          size="15"
-          v-on="on"
-        >
-          fa-question-circle
-        </v-icon>
-      </template>
-      {{ recordTooltips['year'] }}
-    </v-tooltip>
-    <b class="width-15-percent-flex">Year of Creation</b>
-    <div class="d-flex full-width ml-md-6 ml-2">
+    <span
+      class="d-flex align-baseline width-15-percent-flex"
+    >
+      <v-tooltip bottom>
+        <template #activator="{ on }">
+          <v-icon
+            class="mr-2"
+            size="15"
+            v-on="on"
+          >
+            fa-question-circle
+          </v-icon>
+        </template>
+        {{ recordTooltips['year'] }}
+      </v-tooltip>
+      <b>Year of Creation</b>
+    </span>
+    <div class="d-flex ma-0 full-width ml-md-12 ml-8 text-justify">
       <p
         v-if="getField('metadata').year_creation"
         class="ma-0"