refactor(footer): use single footer height

looks fine that way in both small and large version
GIScience · Apr 9, 2024 · a8e3584 · a8e3584
1 parent 0cc55de
commit a8e3584
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 10 deletions.
diff --git a/src/fragments/footer/Footer.vue b/src/fragments/footer/Footer.vue
@@ -1,7 +1,7 @@
 <template>
   <v-footer dark
-  :style="{'margin-top': $vuetify.breakpoint.smAndDown ? '-' + $store.getters.footerMiniHeight + 'px': '-' + $store.getters.footerFullHeight + 'px'}"
-  :height="$vuetify.breakpoint.smAndDown? $store.getters.footerMiniHeight : $store.getters.footerFullHeight">
+  :style="{'margin-top':'-' + $store.getters.footerHeight + 'px'}"
+  :height="$store.getters.footerHeight">
       <v-layout justify-center column wrap >
         <span><a :style="linkColor" target="_blank" href="https://github.com/GIScience/ors-map-client">v{{ appVersion }}</a>&nbsp;|&nbsp;© {{currentYear}} <strong>{{footerMainSiteName}}</strong></span>
         <div>{{ $t('global.developedByIntro') }}

diff --git a/src/fragments/sidebar/Sidebar.vue b/src/fragments/sidebar/Sidebar.vue
@@ -30,7 +30,7 @@
 
       <!-- sidebar-content padding-bottom must be the same that is calculated in footer component height -->
       <div class="sidebar-content" :style="{height: sidebarContentHeightFormula}">
-        <div class="sidebar-content-form" :style="{'padding-bottom': $vuetify.breakpoint.smAndDown ? $store.getters.footerMiniHeight + 'px': $store.getters.footerFullHeight + 'px'}">
+        <div class="sidebar-content-form" :style="{'padding-bottom': $store.getters.footerHeight + 'px'}">
           <map-form v-if="$store.getters.mapReady" class="map-search"></map-form>
           <v-expansion-panel :value="null" v-if="!$highResolution">
             <v-expansion-panel-content style="background: transparent;">

diff --git a/src/store/modules/app-ui.js b/src/store/modules/app-ui.js
@@ -7,8 +7,7 @@ const state = {
   pickPlaceIndex: null,
   pickPlaceId: null,
   mainMenu: [],
-  footerFullHeight: 89,
-  footerMiniHeight: 140,
+  footerHeight: 89,
   sidebarFullWidth: 400,
   sidebarShrunkWidth: 290,
   sidebarHeaderHeight: 175,
@@ -28,11 +27,8 @@ const getters = {
   mainMenu: state => {
     return state.mainMenu
   },
-  footerFullHeight: state => {
-    return state.footerFullHeight
-  },
-  footerMiniHeight: state => {
-    return state.footerMiniHeight
+  footerHeight: state => {
+    return state.footerHeight
   },
   sidebarHeaderHeight: state => {
     return state.sidebarHeaderHeight