feat: Enhance Company Logo proportions display in Topbar and sidebar - …

…MEED-7885 - Meeds-io/MIPs#159
Meeds-io · Dec 3, 2024 · 0ceeba4 · 0ceeba4
1 parent e31127e
commit 0ceeba4
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git a/webapp/src/main/webapp/vue-apps/sidebar/components/SidebarButton.vue b/webapp/src/main/webapp/vue-apps/sidebar/components/SidebarButton.vue
@@ -27,7 +27,7 @@
     width="69"
     text
     @click="$emit('open-drawer', $event)">
-    <v-icon v-show="$root.hidden" size="24">fa-bars</v-icon>
+    <v-icon v-show="$root.hidden" size="20">fa-bars</v-icon>
     <div
       v-show="showBadge"
       :class="$vuetify.rtl && 'l-0' || 'r-0'"

diff --git a/webapp/src/main/webapp/vue-apps/sidebar/components/list/SidebarListHeader.vue b/webapp/src/main/webapp/vue-apps/sidebar/components/list/SidebarListHeader.vue
@@ -29,13 +29,20 @@
       :href="defaultUserPath"
       :target="defaultUserPathTarget"
       class="fill-height">
-      <div class="my-auto me-2 logoContainer">
+      <v-list-item-avatar
+        height="36"
+        max-width="100"
+        min-width="auto"
+        width="auto"
+        class="my-auto ms-0 me-4"
+        tile>
         <img
           :src="companyLogo"
           :alt="companyName"
-          height="auto"
-          width="36px">
-      </div>
+          height="36"
+          width="auto"
+          class="object-fit-contain" />
+      </v-list-item-avatar>
       <v-list-item-content>
         <v-list-item-title v-if="$root.expand" class="font-weight-bold menu-text-color text-truncate">
           <v-card

diff --git a/webapp/src/main/webapp/vue-apps/top-bar-logo/components/CompanyName.vue b/webapp/src/main/webapp/vue-apps/top-bar-logo/components/CompanyName.vue
@@ -7,10 +7,18 @@
       <v-list-item-avatar 
         v-if="$root.logoPath"
         id="UserHomePortalLink"
-        size="36"
+        height="36"
+        max-width="100"
+        min-width="auto"
+        width="auto"
         class="ma-0"
         tile>
-        <v-img :src="$root.logoPath" :alt="$t('space.avatar.img.alt',{0: $root.logoTitle})" />
+        <img
+          :src="$root.logoPath"
+          :alt="$t('space.avatar.img.alt',{0: $root.logoTitle})"
+          height="36"
+          width="auto"
+          class="object-fit-contain" />
       </v-list-item-avatar>
     </a>
     <a