Eubopen: add site footer

LICENSE

+Copyright 2021 EMBL-EBI
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
\ No newline at end of file

components/Logo.vue

 <template>
-  <nuxt-link to="/">
+  <nuxt-link to="/" class="logo-link">
     <v-img
       :src="require('@/static/img/logo.png')"
       max-height="100%"
@@ -8,4 +8,8 @@
   </nuxt-link>
 </template>
 
-<style></style>
+<style scoped lang="scss">
+.logo-link {
+  width: 100%;
+}
+</style>

components/footer/DisclaimerText.vue

+<template>
+  <p class="text-caption text-justify">
+    The EUbOPEN project has received funding from the Innovative Medicines
+    Initiative 2 Joint Undertaking under grant agreement No 875510. This Joint
+    Undertaking receives support from the European Union's Horizon 2020 research
+    and innovation programme, EFPIA companies and Associated Partners: KTH,
+    OICR, Diamond and McGill. This communication reflects the views of the
+    authors and neither IMI nor the European Union, EFPIA or any Associated
+    Partners are liable for any use that may be made of the information
+    contained herein.
+  </p>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style></style>

components/footer/Footer.vue

 <template>
-  <div>Footer!</div>
+  <v-footer>
+    <v-container>
+      <v-row>
+        <v-col cols="12" md="4">
+          <Logos />
+        </v-col>
+        <v-col cols="12" md="8">
+          <DisclaimerText />
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col cols="12">
+          <LicenseAndPrivacy />
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-footer>
 </template>
 
 <script>
-export default {}
+import Logos from '~/components/footer/Logos.vue'
+import DisclaimerText from '~/components/footer/DisclaimerText.vue'
+import LicenseAndPrivacy from '~/components/footer/LicenseAndPrivacy.vue'
+
+export default {
+  components: { Logos, DisclaimerText, LicenseAndPrivacy },
+}
 </script>
 
 <style></style>

components/footer/LicenseAndPrivacy.vue

+<template>
+  <div>
+    <v-divider />
+    <div class="d-flex justify-center text-container">
+      <span class="text-body-2 text-justify">
+        Copyright © 2021 EMBL-EBI, Website licensed under the
+        <a target="_blank" href="https://www.apache.org/licenses/LICENSE-2.0"
+          >Apache License, Version 2.0.</a
+        >
+        |
+        <a> Privacy Notice </a>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style scoped lang="scss">
+.text-container {
+  margin-top: 5px;
+}
+</style>

components/footer/Logos.vue

+<template>
+  <v-row dense>
+    <v-col cols="6" sm="3" offset-sm="3" md="6" offset-md="0">
+      <div class="logo-container d-flex">
+        <Logo />
+      </div>
+    </v-col>
+    <v-col cols="6" sm="3" md="6">
+      <div class="logo-container d-flex">
+        <EBILogo />
+      </div>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+import Logo from '~/components/Logo.vue'
+import EBILogo from '~/web-components-submodule/components/common/EBILogo.vue'
+export default {
+  components: { Logo, EBILogo },
+}
+</script>
+
+<style scoped lang="scss">
+.logo-container {
+  width: 100%;
+  padding: 2px;
+}
+</style>

components/mainPage/visualisations/TargetsTree/TargetsSunburst.vue

@@ -16,8 +16,8 @@
         </div>
         <v-divider />
         <v-card-text class="text-caption text-justify">
-          Click on a section to expand it. Click on the links on top to see the
-          targets of the corresponding class.
+          Click on a section to expand it. Click on the links on top to explore
+          the targets of the corresponding class.
         </v-card-text>
       </v-card>
     </template>

components/mainPage/visualisations/VisualisationsCard.vue

@@ -42,7 +42,7 @@ export default {
 .visualisations-card {
   &.xs-screen-height,
   &.sm-screen-height {
-    height: 60vh;
+    height: 70vh;
     min-height: 350px;
   }
   &.md-screen-height {

web-components-submodule @ 05497763

-Subproject commit 0dd3b295318576412cd914d610093375cd057e3f
+Subproject commit 054977635bda9ab87ca6a77d45e1b098d08ce582