adding contain class, updating height property in v-app-bar

FAIRsharing · Feb 26, 2025 · 32a055b · 32a055b
1 parent e14e895
commit 32a055b
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 21 deletions.
diff --git a/src/components/Navigation/Header.vue b/src/components/Navigation/Header.vue
@@ -1,9 +1,7 @@
 <template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
   <v-app-bar
     id="mainHeader"
-    short
-    height="150"
-    max-height="150"
+    height="150px"
     class="header-container"
     :class="[{'largeScreen': $vuetify.display.xlOnly}, {'smallScreen': $vuetify.display.mdAndDown}]"
   >
@@ -113,7 +111,7 @@
               min-width="167px"
               max-width="184px"
             >
-              <span :class="['white--text',{'text-primary': !item.active}, {'accent3--text': item.primary && !item.active}]">{{ item.label }}</span>
+              <span :class="['text-white',{'text-primary': !item.active}, {'text-accent3': item.primary && !item.active}]">{{ item.label }}</span>
             </v-btn>
           </li>
         </ul>
@@ -251,6 +249,8 @@ header {
 
 .header-container {
   border-bottom: 3px dashed #253442;
+  position: relative !important;
+  max-height: 150px;
 }
 
 

diff --git a/src/components/Navigation/NavigationDrawer.vue b/src/components/Navigation/NavigationDrawer.vue
@@ -56,7 +56,7 @@
         <v-img
           src="/assets/fairsharing-logo.svg"
           height="70"
-          contain
+          class="contain"
         />
       </router-link>
     </div>

diff --git a/src/styles/_base.scss b/src/styles/_base.scss
@@ -1,6 +1,7 @@
 // base class
 a {
   text-decoration: none;
+  color: #27aae1;
 }
 
 ul {
@@ -15,6 +16,7 @@ ol {
 p {
   line-height: 1.6;
   text-align: justify;
+  margin-bottom: 16px;
 }
 
 pre {

diff --git a/src/views/Errors/404.vue b/src/views/Errors/404.vue
@@ -12,20 +12,20 @@
     >
       <v-img
         src="/assets/Errors/404.png"
-        contain
+        class="contain"
         width="500px"
       />
     </v-col>
   </v-row>
 </template>
 
 <script>
-    export default {
-        name: "Error404",
-        metaInfo() {
-          return {
-            title: "FAIRsharing | Not Found"
-          }
-        }
+export default {
+  name: "Error404",
+  metaInfo() {
+    return {
+      title: "FAIRsharing | Not Found"
     }
+  }
+}
 </script>
diff --git a/src/views/Static/Community/Community.vue b/src/views/Static/Community/Community.vue
@@ -226,7 +226,7 @@
             max-height="250px"
             :src="item.image"
             height="120"
-            contain
+            class="contain"
             style="filter: grayscale(1);"
           />
         </v-col>
@@ -258,7 +258,7 @@
             max-height="250px"
             :src="item.image"
             height="120"
-            contain
+            class="contain"
             style="filter: grayscale(1);"
           />
         </v-col>

diff --git a/src/views/Static/Educational/Educational.vue b/src/views/Static/Educational/Educational.vue
@@ -219,8 +219,7 @@
       >
         <v-img
           :src="`/assets/Educational/Infographic/${infographicPopup.data.logo}`"
-          class="align-end infographicPopup"
-          contain
+          class="align-end infographicPopup contain"
           position="top center"
         >
           <v-card-actions class="justify-end closeInfoPopup">

diff --git a/src/views/Static/Licence/Licence.vue b/src/views/Static/Licence/Licence.vue
@@ -26,8 +26,7 @@
     <v-img
       src="assets/fairsharing-logo.svg"
       height="70"
-      contain
-      class="text-left pa-0 d-inline-block"
+      class="text-left pa-0 d-inline-block contain"
     />
     <p
       :class="['mb-4 lato-font-medium lato-text-sm',{'lato-text-md':$vuetify.display.xlOnly }]"

diff --git a/src/views/Static/New/New.vue b/src/views/Static/New/New.vue
@@ -55,8 +55,7 @@
                   class="d-flex justify-center"
                 >
                   <v-img
-                    class="mt-5"
-                    contain
+                    class="mt-5 contain"
                     height="100px"
                     :src="$vuetify.icons.values[item.icon].icon"
                   />