removes non necessary height calculation methods

eclipse-basyx · Nov 14, 2024 · e9aed74 · e9aed74
1 parent e98e041
commit e9aed74
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 49 deletions.
diff --git a/aas-web-ui/src/components/AppNavigation/AASList.vue b/aas-web-ui/src/components/AppNavigation/AASList.vue
@@ -131,12 +131,7 @@
                 :show-details-card="showDetailsCard"
                 @close-details="showDetailsCard = false" />
             <!-- Collapse/extend Sidebar Button -->
-            <v-list
-                v-if="!isMobile"
-                id="closeAasList"
-                nav
-                style="width: 100%; z-index: 9000"
-                class="bg-detailsCard pa-0">
+            <v-list v-if="!isMobile" 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/AppNavigation/AASListDetails.vue b/aas-web-ui/src/components/AppNavigation/AASListDetails.vue
@@ -7,7 +7,12 @@
                 flat
                 tile
                 color="detailsCard"
-                style="display: flex; flex-direction: column; max-height: 75vh"
+                :style="{
+                    display: 'flex',
+                    'flex-direction': 'column',
+                    height: isMobile ? 'calc(100vh - 104px)' : '',
+                    'max-height': isMobile ? '' : '50vh',
+                }"
                 :class="isMobile ? 'v-card--reveal-mobile' : 'v-card--reveal-desktop'">
                 <v-divider></v-divider>
                 <v-card-title class="bg-detailsHeader pl-3">
@@ -108,7 +113,6 @@
         data() {
             return {
                 assetInformation: null as any, // Asset Information Object
-                detailsCardHeight: 0,
             };
         },
 
@@ -117,31 +121,17 @@
             isMobile() {
                 return this.navigationStore.getIsMobile;
             },
-
-            screenHeight() {
-                return document.documentElement.clientHeight;
-            },
         },
 
         watch: {
             showDetailsCard() {
                 // If the AAS Details Card is opened, request asset-information
                 if (this.showDetailsCard) {
                     this.fetchAssetDetails();
-                    this.calcDetailsCardHeight();
                 }
             },
         },
 
-        mounted() {
-            window.addEventListener('resize', this.handleResize);
-            this.handleResize();
-        },
-
-        beforeUnmount() {
-            window.removeEventListener('resize', this.handleResize);
-        },
-
         methods: {
             // Function to close the AAS Details Card and emit the event to the parent component
             closeDetails() {
@@ -175,33 +165,6 @@
                     }
                 });
             },
-
-            handleResize() {
-                this.calcDetailsCardHeight();
-            },
-
-            calcDetailsCardHeight() {
-                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 availableHeight = (this.screenHeight -
-                    (toolbarHeight ? toolbarHeight : 0) -
-                    (closeSidebarHeight ? closeSidebarHeight : 0) -
-                    (footerHeight ? footerHeight : 0)) as number;
-
-                if (this.screenHeight < 600) {
-                    // xs display
-
-                    this.detailsCardHeight = 1 * availableHeight;
-                } else if (this.screenHeight >= 600 && this.screenHeight < 1280) {
-                    // sm & md display
-                    this.detailsCardHeight = 0.5 * availableHeight;
-                } else if (this.screenHeight >= 1280) {
-                    // lg & xl & xxl display
-                    this.detailsCardHeight = 0.4 * availableHeight;
-                }
-            },
         },
     });
 </script>