fixing alignments for the text in mobile

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

Hide file tree

Showing 8 changed files with 53 additions and 16 deletions.
diff --git a/src/components/Records/Record/GeneralInfo/Countries.vue b/src/components/Records/Record/GeneralInfo/Countries.vue
@@ -17,7 +17,10 @@
       </v-tooltip>
       <b>Countries developing this resource</b>
     </span>
-    <div class="d-flex full-width flex-wrap ml-md-12 ml-13">
+    <div
+      class="d-flex full-width flex-wrap ml-md-12 ml-13"
+      :class="{'justify-end' : $vuetify.breakpoint.smAndDown}"
+    >
       <NoneFound
         v-if="!getField('countries')"
         :data-field="getField('countries')"

diff --git a/src/components/Records/Record/GeneralInfo/Description.vue b/src/components/Records/Record/GeneralInfo/Description.vue
@@ -17,7 +17,10 @@
       </v-tooltip>
       <b>Description</b>
     </span>
-    <p class="ma-0 full-width ml-md-12 ml-8 text-justify">
+    <p
+      class="ma-0 full-width ml-md-12 ml-8"
+      :class="{'text-end' : $vuetify.breakpoint.smAndDown}"
+    >
       {{ getField('description') | capitalize }}
     </p>
   </div>

diff --git a/src/components/Records/Record/GeneralInfo/HomePage.vue b/src/components/Records/Record/GeneralInfo/HomePage.vue
@@ -20,7 +20,10 @@
       </v-tooltip>
       <b>Homepage</b>
     </span>
-    <div class="d-flex ma-0 full-width ml-md-12 ml-8 text-justify">
+    <div
+      class="d-flex ma-0 full-width ml-md-12 ml-8"
+      :class="{'justify-end' : $vuetify.breakpoint.smAndDown}"
+    >
       <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
@@ -19,7 +19,10 @@
         </v-tooltip>
         <b>Subjects</b>
       </span>
-      <div class="d-flex full-width flex-wrap ml-md-12 ml-13">
+      <div
+        class="d-flex full-width flex-wrap ml-md-12 ml-13"
+        :class="{'justify-end' : $vuetify.breakpoint.smAndDown}"
+      >
         <span v-if="!getField('subjects').length">
           N/A
         </span>
@@ -57,7 +60,10 @@
         </v-tooltip>
         <b>Domains</b>
       </span>
-      <div class="d-flex full-width flex-wrap ml-md-12 ml-13">
+      <div
+        class="d-flex full-width flex-wrap ml-md-12 ml-13"
+        :class="{'justify-end' : $vuetify.breakpoint.smAndDown}"
+      >
         <span v-if="!getField('domains').length">
           N/A
         </span>
@@ -95,7 +101,10 @@
         </v-tooltip>
         <b>Taxonomic Range</b>
       </span>
-      <div class="d-flex full-width flex-wrap ml-md-12 ml-13">
+      <div
+        class="d-flex full-width flex-wrap ml-md-12 ml-13"
+        :class="{'justify-end' : $vuetify.breakpoint.smAndDown}"
+      >
         <span v-if="!getField('taxonomies').length">
           N/A
         </span>
@@ -133,7 +142,10 @@
         </v-tooltip>
         <b>User Defined Tags</b>
       </span>
-      <div class="d-flex full-width flex-wrap ml-md-12 ml-13">
+      <div
+        class="d-flex full-width flex-wrap ml-md-12 ml-13"
+        :class="{'justify-end' : $vuetify.breakpoint.smAndDown}"
+      >
         <span v-if="!getField('userDefinedTags').length">
           N/A
         </span>

diff --git a/src/components/Records/Record/GeneralInfo/Maintainers.vue b/src/components/Records/Record/GeneralInfo/Maintainers.vue
@@ -21,13 +21,18 @@
       <div
         v-if="getField('maintainers').length === 0"
         class="d-flex flex-wrap"
+        :class="{'justify-end' : $vuetify.breakpoint.smAndDown}"
       >
-        <p class="ma-0 mr-1">
+        <p
+          class="ma-0 mr-1"
+          :class="{'text-end' : $vuetify.breakpoint.smAndDown}"
+        >
           This record is in need of a maintainer.
         </p>
         <p
           v-if="canClaim && user().isLoggedIn || !canClaim && !user().isLoggedIn"
           class="ma-0 mr-1"
+          :class="{'text-end' : $vuetify.breakpoint.smAndDown}"
         >
           If you are affiliated with this project,
         </p>
@@ -42,16 +47,18 @@
         <p
           v-if="!canClaim && !user().isLoggedIn"
           class="ma-0 mr-1"
+          :class="{'text-end' : $vuetify.breakpoint.smAndDown}"
         >
           and claim it now!
         </p>
-        <a
+        <p
           v-if="canClaim"
-          class="underline-effect"
+          class="underline-effect blue--text"
+          :class="{'text-end' : $vuetify.breakpoint.smAndDown}"
           @click="()=>{$emit('requestOwnership')}"
         >
           claim it now!
-        </a>
+        </p>
       </div>
       <!--<NoneFound :data-field="getField('maintainers')" />-->
       <!--Contact-->

diff --git a/src/components/Records/Record/GeneralInfo/Registry.vue b/src/components/Records/Record/GeneralInfo/Registry.vue
@@ -17,7 +17,10 @@
       </v-tooltip>
       <b>Registry</b>
     </span>
-    <p class="ma-0 full-width ml-md-12 ml-8 text-justify">
+    <p
+      class="ma-0 full-width ml-md-12 ml-8"
+      :class="{'text-end' : $vuetify.breakpoint.smAndDown}"
+    >
       {{ getField('registry') | capitalize }}
     </p>
   </div>

diff --git a/src/components/Records/Record/GeneralInfo/Type.vue b/src/components/Records/Record/GeneralInfo/Type.vue
@@ -1,8 +1,7 @@
 <template>
   <div class="d-flex flex-row mt-4 align-center">
     <span
-      class="width-15-percent-flex"
-      style="white-space: nowrap;"
+      class="d-flex align-baseline width-15-percent-flex"
     >
       <v-tooltip bottom>
         <template #activator="{ on }">
@@ -18,7 +17,10 @@
       </v-tooltip>
       <b>Type</b>
     </span>
-    <p class="ma-0 full-width ml-md-12 ml-8 text-justify">
+    <p
+      class="ma-0 full-width ml-md-12 ml-8"
+      :class="{'text-end' : $vuetify.breakpoint.smAndDown}"
+    >
       {{ cleanString(getField('type')) | capitalize }}
     </p>
   </div>

diff --git a/src/components/Records/Record/GeneralInfo/YearOfCreation.vue b/src/components/Records/Record/GeneralInfo/YearOfCreation.vue
@@ -17,10 +17,14 @@
       </v-tooltip>
       <b>Year of Creation</b>
     </span>
-    <div class="d-flex ma-0 full-width ml-md-12 ml-8 text-justify">
+    <div
+      class="d-flex ma-0 full-width ml-md-12 ml-8"
+      :class="{'justify-end' : $vuetify.breakpoint.smAndDown}"
+    >
       <p
         v-if="getField('metadata').year_creation"
         class="ma-0"
+        :class="{'text-end' : $vuetify.breakpoint.smAndDown}"
       >
         {{ getField('metadata').year_creation }}
       </p>