Refactor/footer (#414)

src/fragments/footer/Footer.vue

@@ -1,27 +1,17 @@
 <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" :class="{'small': $vuetify.breakpoint.smAndDown}">
-      <p>
-        <strong>
-          <a target="_blank" href="https://github.com/GIScience/ors-map-client">v{{ appVersion }}</a>
-        </strong>
-        <span>&nbsp;© {{currentYear}} <strong>{{footerMainSiteName}}</strong></span>
-        <span > | {{ $t('global.developedByIntro') }}
-          <strong>
-            <a target="_blank" :title="$t('global.developedBy')" :href="footerLink">{{ $t('global.developedBy') }}</a>
-          </strong>
-        </span><br>
-        <span>
-          <strong>
-            <a class="link" :title="$t('about.privacyPolicy')" :href="constants.links.privacyPolicy" target="_blank">{{$t('about.privacyPolicy')}}</a>
-          </strong>
-          &nbsp; &nbsp;
-          <strong>
-            <a class="link" :title="$t('about.termsOfService')" :href="constants.links.termsOfService" target="_blank">{{$t('about.termsOfService')}}</a>
-          </strong>
-        </span>
-      </p>
+  :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') }}
+            <a :style="linkColor" target="_blank" :title="$t('global.developedBy')" :href="footerLink">{{ $t('global.developedBy') }}</a>
+        </div><br>
+        <a :style="linkColor" class="link" :title="$t('about.privacyPolicy')" :href="constants.links.privacyPolicy"
+           target="_blank">{{ $t('about.privacyPolicy') }}</a>
+        <v-spacer shrink></v-spacer>
+        <a :style="linkColor" class="link" :title="$t('about.termsOfService')" :href="constants.links.termsOfService" target="_blank">{{$t('about.termsOfService')}}</a>
+      </v-layout>
     </v-footer>
 </template>
 

src/fragments/footer/footer.css

@@ -1,14 +1,9 @@
 
 footer {
   text-align: center;
-  padding-top: 25px;
-  padding-bottom: 25px;
+  padding: 5px;
 }
 
-footer.small {
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
 footer p{
   color: #cbcbcb;
   margin: auto;

src/fragments/footer/footer.js

@@ -1,4 +1,5 @@
 import appConfig from '@/config/app-config'
+import theme from '@/config/theme'
 export default {
   data () {
     return {
@@ -10,6 +11,9 @@ export default {
     currentYear () {
       return (new Date()).getFullYear()
     },
+    linkColor () {
+      return 'color: ' + theme.primary + ';'
+    },
     appVersion () {
       let env = process.env
       let version = env.PACKAGE_JSON.version

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;">

src/i18n/translations/cs-cz/global.js

@@ -15,7 +15,7 @@ export default {
     ok: 'OK',
     polygon: 'polygon',
     developedByIntro: 'Služby vyvinuté',
-    developedBy: 'Heidelberským institutem pro geoinformační technologie',
+    developedBy: 'HeiGIT gGmbH',
     duration: 'Trvání',
     distance: 'Vzdálenost',
     elevation: 'Nadmořská výška',

src/i18n/translations/de-de/global.js

@@ -15,7 +15,7 @@ export default {
     ok: 'Ok',
     polygon: 'Polygon',
     developedByIntro: 'Services entwickelt von',
-    developedBy: 'Heidelberg Institute for Geoinformation Technology',
+    developedBy: 'HeiGIT gGmbH',
     duration: 'Dauer',
     distance: 'Entfernung',
     elevation: 'Höhe',

src/i18n/translations/en-us/global.js

@@ -15,7 +15,7 @@ export default {
     ok: 'OK',
     polygon: 'polygon',
     developedByIntro: 'Services developed by',
-    developedBy: 'Heidelberg Institute for Geoinformation Technology',
+    developedBy: 'HeiGIT gGmbH',
     duration: 'Duration',
     distance: 'Distance',
     elevation: 'Elevation',

src/i18n/translations/es-es/global.js

@@ -15,7 +15,7 @@ export default {
     ok: 'OK',
     polygon: 'polígono',
     developedByIntro: 'Servicios desarrollados por',
-    developedBy: 'Instituto de Tecnología de Geoinformación de Heidelberg',
+    developedBy: 'HeiGIT gGmbH',
     duration: 'Duración',
     distance: 'Distancia',
     elevation: 'Elevación',

src/i18n/translations/fr-fr/global.js

@@ -15,7 +15,7 @@ export default {
     'ok': 'OK',
     'polygon': 'polygone',
     'developedByIntro': 'Services développés par',
-    'developedBy': 'Heidelberg Institute for Geoinformation Technology (HeiGIT)',
+    'developedBy': 'HeiGIT gGmbH',
     'duration': 'Durée',
     'distance': 'Distance',
     'elevation': 'Élévation',

src/i18n/translations/hu-hu/global.js

@@ -15,7 +15,7 @@ export default {
     'ok': 'OK',
     'polygon': 'sokszög',
     'developedByIntro': 'A szolgáltatások fejlesztője',
-    'developedBy': 'a Heidelbergi Geoinformációs Technológiai Intézet',
+    'developedBy': 'HeiGIT gGmbH',
     'duration': 'Időtartam',
     'distance': 'Távolság',
     'elevation': 'Magasság',

src/i18n/translations/it-it/global.js

@@ -15,7 +15,7 @@ export default {
     'ok': 'OK',
     'polygon': 'poligono',
     'developedByIntro': 'Servizio sviluppato dall',
-    'developedBy': 'Heidelberg Institute for Geoinformation Technology',
+    'developedBy': 'HeiGIT gGmbH',
     'duration': 'Durata',
     'distance': 'Distanza',
     'elevation': 'Altitudine',

src/i18n/translations/pt-br/global.js

@@ -15,7 +15,7 @@ export default {
     ok: 'OK',
     polygon: 'polígono',
     developedByIntro: 'Serviços desenvolvidos por',
-    developedBy: 'Heidelberg Institute for Geoinformation Technology',
+    developedBy: 'HeiGIT gGmbH',
     duration: 'Duração',
     distance: 'Distância',
     elevation: 'Elevação',

src/i18n/translations/ro-ro/global.js

@@ -15,7 +15,7 @@ export default {
     'ok': 'OK',
     'polygon': 'poligon',
     'developedByIntro': 'Servicii dezvoltate de',
-    'developedBy': 'Institutul Heidelberg pentru tehnologia geoinformațiilor',
+    'developedBy': 'HeiGIT gGmbH',
     'duration': 'Durată',
     'distance': 'Distanță',
     'elevation': 'Elevație',

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