fix: adapt panel width calculation

eurodatacube · Oct 23, 2023 · 2178328 · 2178328
1 parent 9f1756a
commit 2178328
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 28 deletions.
diff --git a/app/src/components/UiPanel.vue b/app/src/components/UiPanel.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="$vuetify.breakpoint.smAndUp"
-    class="elevation-1 rounded ma-1"
+    class="ui-panel elevation-1 rounded ma-1"
     :style="`
       background: ${$vuetify.theme.currentTheme.background};
     `"

diff --git a/app/src/utils.js b/app/src/utils.js
@@ -926,20 +926,16 @@ export function calculatePadding() {
   // TODO: This will probably no longer be used as Robert will reimplement this with ol extent
   const dataPanelOpen = (document.querySelector('.data-panel') !== null)
     && document.querySelector('.data-panel').className.includes('v-navigation-drawer--open');
-  const dataPanelWidth = !dataPanelOpen ? 0 : document.querySelector('.data-panel').clientWidth;
-  const searchResultsClosed = store.state.features.featureFilters.indicators.length
-    || store.state.features.featureFilters.countries.length;
-  const searchPanelWidth = (document.querySelector('eox-itemfilter') !== null)
-    ? (document.querySelector('eox-itemfilter').clientWidth) : 0;
-  const searchResultWidth = !searchResultsClosed ? searchPanelWidth : 0;
+  const dataPanelWidth = document.querySelector('.ui-panel').clientWidth;
+  const searchPanelWidth = document.querySelector('.ui-panel').clientWidth;
   const demoItemsWidth = (document.querySelector('#demoItemsList') !== null)
     ? (document.querySelector('#demoItemsList').clientWidth) : 0;
   const percentageBasedOffsetWidth = Math.floor(window.innerWidth * 0.12);
   const padding = [
     70,
     percentageBasedOffsetWidth + dataPanelWidth,
     150,
-    percentageBasedOffsetWidth + searchResultWidth + demoItemsWidth,
+    percentageBasedOffsetWidth + searchPanelWidth + demoItemsWidth,
   ];
   return padding;
 }

diff --git a/app/src/views/Dashboard.vue b/app/src/views/Dashboard.vue
@@ -263,9 +263,9 @@ export default {
     ...mapState('config', [
       'appConfig',
     ]),
-    dataPanelWidth() {
-      return this.$vuetify.breakpoint.lgAndUp ? 600 : 400;
-    },
+    // dataPanelWidth() {
+    //   return this.$vuetify.breakpoint.lgAndUp ? 600 : 400;
+    // },
     indicatorSelected() {
       return this.indicatorObject
         || this.$store.state.features.featureFilters.indicators.length > 0;
@@ -311,7 +311,7 @@ export default {
     this.drawerLeft = this.$vuetify.breakpoint.mdAndUp;
   },
   mounted() {
-    document.documentElement.style.setProperty('--data-panel-width', `${this.dataPanelWidth}px`);
+    // document.documentElement.style.setProperty('--data-panel-width', `${this.dataPanelWidth}px`);
     // only show when nothing is selected
     const { poi, indicator, search } = this.$route.query;
     if (!poi && !indicator && !search && !this.$route.name === 'demo') {
@@ -330,16 +330,16 @@ export default {
     this.$store.commit('indicators/SET_SELECTED_INDICATOR', null);
   },
   methods: {
-    setDataPanelWidth(enable) {
-      if (enable) {
-        this.dataPanelTemporary = true;
-        this.dataPanelFullWidth = true;
-      } else {
-        this.dataPanelFullWidth = false;
-        // TO-DO find more reliable way of checking
-        setTimeout(() => { this.dataPanelTemporary = false; }, 500);
-      }
-    },
+    // setDataPanelWidth(enable) {
+    //   if (enable) {
+    //     this.dataPanelTemporary = true;
+    //     this.dataPanelFullWidth = true;
+    //   } else {
+    //     this.dataPanelFullWidth = false;
+    //     // TO-DO find more reliable way of checking
+    //     setTimeout(() => { this.dataPanelTemporary = false; }, 500);
+    //   }
+    // },
     clickMobileClose() {
       this.isDialogRetracted = true;
       this.drawerRight = false;
@@ -350,14 +350,14 @@ export default {
         this.$refs.indicatorFilters.comboboxClear();
       }
     },
-    close() {
-      this.setDataPanelWidth(false);
-    },
+    // close() {
+    //   this.setDataPanelWidth(false);
+    // },
   },
   watch: {
-    dataPanelWidth(val) {
-      document.documentElement.style.setProperty('--data-panel-width', `${val}px`);
-    },
+    // dataPanelWidth(val) {
+    //   document.documentElement.style.setProperty('--data-panel-width', `${val}px`);
+    // },
     indicatorSelected(selected) {
       if (selected) {
         this.drawerRight = true;