Adapt thumbnailMaxHeight calculation

eclipse-basyx · Nov 12, 2024 · dfff397 · dfff397
1 parent 1eb69ca
commit dfff397
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 3 deletions.
diff --git a/aas-web-ui/src/components/AppNavigation/AASList.vue b/aas-web-ui/src/components/AppNavigation/AASList.vue
@@ -2,7 +2,7 @@
     <v-container class="pa-0" fluid>
         <v-card color="card" elevation="0">
             <!-- Title Bar in the AAS List -->
-            <v-card-title class="pl-1 pr-3">
+            <v-card-title id="titleAasList" class="pl-1 pr-3">
                 <v-row align="center">
                     <!-- Reload Button -->
                     <v-col cols="auto" class="pr-0">
@@ -131,7 +131,12 @@
                 :show-details-card="showDetailsCard"
                 @close-details="showDetailsCard = false" />
             <!-- Collapse/extend Sidebar Button -->
-            <v-list v-if="!isMobile" nav style="width: 100%; z-index: 9000" class="bg-detailsCard pa-0">
+            <v-list
+                v-if="!isMobile"
+                id="closeAasList"
+                nav
+                style="width: 100%; z-index: 9000"
+                class="bg-detailsCard pa-0">
                 <v-divider style="margin-left: -8px; margin-right: -8px"></v-divider>
                 <!-- Button to collapse the Sidebar -->
                 <v-list-item class="ma-0" @click="collapseSidebar()">

diff --git a/aas-web-ui/src/components/UIComponents/AssetInformation.vue b/aas-web-ui/src/components/UIComponents/AssetInformation.vue
@@ -2,6 +2,7 @@
     <v-container class="pa-0" fluid>
         <v-list lines="one" nav class="bg-detailsCard">
             <IdentificationElement
+                id="assetInformationIdentification"
                 class="mb-2"
                 :identification-object="assetInfo"
                 :model-type="assetObject.assetKind"
@@ -60,7 +61,30 @@
 
         methods: {
             handleResize() {
-                this.thumbnailMaxHeight = 0.3 * this.screenHeight;
+                const toolbarHeight = document.getElementsByClassName('v-toolbar')[0]?.clientHeight as number;
+                const footerHeight = document.getElementsByClassName('v-footer')[0]?.clientHeight as number;
+                const closeSidebarHeight = document.getElementById('closeAasList')?.clientHeight as number;
+                const titleAasListHeight = document.getElementById('titleAasList')?.clientHeight as number;
+                const assetInformationIdentificationHeight = document.getElementById('assetInformationIdentification')
+                    ?.clientHeight as number;
+
+                const availableHeight = (this.screenHeight -
+                    (toolbarHeight ? toolbarHeight : 0) -
+                    (titleAasListHeight ? titleAasListHeight : 0) -
+                    (assetInformationIdentificationHeight ? closeSidebarHeight : 0) -
+                    (closeSidebarHeight ? closeSidebarHeight : 0) -
+                    (footerHeight ? footerHeight : 0)) as number;
+
+                if (this.screenHeight < 600) {
+                    // xs display
+                    this.thumbnailMaxHeight = 1 * availableHeight;
+                } else if (this.screenHeight >= 600 && this.screenHeight < 1280) {
+                    // sm & md display
+                    this.thumbnailMaxHeight = 0.5 * availableHeight;
+                } else if (this.screenHeight >= 1280) {
+                    // lg & xl & xxl display
+                    this.thumbnailMaxHeight = 0.4 * availableHeight;
+                }
             },
         },
     });