[Datahub] : Footer

apps/datahub-e2e/src/e2e/dataset.cy.ts

@@ -72,6 +72,10 @@ describe('datasets', () => {
         .should('have.css', 'max-height')
         .and('satisfy', (maxHeight) => parseInt(maxHeight, 10) > 110)
     })
+
+    it('should display the footer', () => {
+      cy.get('mel-datahub-footer').should('be.visible')
+    })
   })
   describe('when logged in', () => {
     beforeEach(() => {

apps/datahub-e2e/src/e2e/home.cy.ts

@@ -28,4 +28,61 @@ describe('datahub-e2e', () => {
       cy.get('mel-datahub-dataset-page').should('be.visible')
     })
   })
+  describe.only('footer', () => {
+    beforeEach(() => {
+      cy.get('mel-datahub-footer').as('footer')
+    })
+    it('should display the footer', () => {
+      cy.get('@footer').should('be.visible')
+    })
+    it('should have links to the social medias', () => {
+      cy.get('@footer')
+        .find('ul')
+        .first()
+        .children('li')
+        .first()
+        .find('a')
+        .invoke('attr', 'href')
+        .as('url')
+      cy.get('@url').should('include', 'twitter')
+      cy.get('@url').should('include', 'MetropoleLille')
+    })
+    it('should display the partners icons', () => {
+      cy.get('@footer')
+        .children('footer')
+        .first()
+        .children('div')
+        .first()
+        .children('div')
+        .eq(1)
+        .children('img')
+        .should('have.length', 2)
+    })
+    it('should have a button to the newsletter subscription', () => {
+      cy.get('@footer')
+        .children('footer')
+        .first()
+        .children('div')
+        .first()
+        .children('div')
+        .eq(2)
+        .find('a')
+        .invoke('attr', 'href')
+        .as('url')
+      cy.get('@url').should('include', 'infolettre')
+    })
+    it('should have nav links to MEL website', () => {
+      cy.get('@footer')
+        .children('footer')
+        .first()
+        .children('div')
+        .eq(1)
+        .find('li')
+        .eq(3)
+        .find('a')
+        .invoke('attr', 'href')
+        .as('url')
+      cy.get('@url').should('include', 'recrutement')
+    })
+  })
 })

apps/datahub-e2e/src/e2e/search.cy.ts

@@ -7,6 +7,9 @@ describe('datahub-e2e', () => {
   it('should display the number of result hits', () => {
     cy.get('gn-ui-results-hits-number').should('contain', 14)
   })
+  it('should display the footer', () => {
+    cy.get('mel-datahub-footer').should('be.visible')
+  })
 
   // If not logged in or no favorites exists
   it('should display record results in last created cards', () => {

apps/datahub/src/app/app.component.html

@@ -1,4 +1,5 @@
 <mel-datahub-header></mel-datahub-header>
-<div gnUiSearchRouterContainer="mainSearch">
+<div gnUiSearchRouterContainer="mainSearch" class="min-h-screen">
   <router-outlet></router-outlet>
 </div>
+<mel-datahub-footer></mel-datahub-footer>

apps/datahub/src/app/app.module.ts

@@ -53,6 +53,7 @@ import { DatasetDownloadsComponent } from './dataset/dataset-downloads/dataset-d
 import { FavoriteHeartComponent } from './common/favorites/favorite-heart/favorite-heart.component'
 import { HeartToggleComponent } from './common/favorites/heart-toggle/heart-toggle.component'
 import { TextExpandComponent } from './common/text-expand/text-expand.component'
+import { MelDatahubFooterComponent } from './common/footer/mel-datahub-footer.component'
 
 @NgModule({
   declarations: [
@@ -79,6 +80,7 @@ import { TextExpandComponent } from './common/text-expand/text-expand.component'
     FavoriteHeartComponent,
     HeartToggleComponent,
     TextExpandComponent,
+    MelDatahubFooterComponent,
   ],
   imports: [
     BrowserModule,

apps/datahub/src/app/common/footer/mel-datahub-footer.component.html

@@ -0,0 +1,221 @@
+<footer class="flex flex-col">
+  <div
+    class="flex flex-row flex-wrap min-h-32 p-4 md:px-16 text-white justify-between items-center"
+    style.background="url({{ iconsUrl }}bg-footer.png)"
+  >
+    <div class="flex flex-row items-center gap-6 flex-wrap">
+      <span class="text-sm leading-3" translate=""
+        >mel.common.footer.follow</span
+      >
+      <ul class="flex flex-row gap-4 items-center">
+        <li class="flex">
+          <a
+            href="https://twitter.com/MetropoleLille/"
+            target="_blank"
+            class="hover:outline-offset-4 hover:border-b-2 hover:border-red-600"
+          >
+            <svg
+              class="h-5 fill-white hover:fill-red-600"
+              viewBox="0 0 1200 1227"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"
+              />
+            </svg>
+          </a>
+        </li>
+        <li class="flex">
+          <a
+            href="https://www.facebook.com/metropoledelille/"
+            target="_blank"
+            class="hover:outline-offset-4 hover:border-b-2 hover:border-red-600"
+          >
+            <svg
+              viewBox="0 0 24 24"
+              class="h-6 fill-white hover:fill-red-600"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M21.8208 11.9181C21.8205 16.9329 18.0705 21.1554 13.0908 21.7481V15.0481H14.8508C15.0975 15.0494 15.3051 14.8635 15.3308 14.6181L15.5208 13.1681C15.534 13.0304 15.4907 12.8932 15.4008 12.7881C15.3088 12.6793 15.1733 12.617 15.0308 12.6181H13.0908V10.9181C13.0908 10.3658 13.5385 9.91809 14.0908 9.91809H15.0908C15.2198 9.92078 15.3445 9.87139 15.4367 9.78108C15.5289 9.69077 15.5808 9.56714 15.5808 9.43809V7.82809C15.5776 7.57759 15.3895 7.36813 15.1408 7.33809C15.1408 7.33809 14.4208 7.27809 13.5608 7.27809C11.4208 7.27809 10.2408 8.54809 10.2408 10.8581V12.6181H8.24081C7.97019 12.6181 7.75081 12.8375 7.75081 13.1081V14.5581C7.75081 14.8287 7.97019 15.0481 8.24081 15.0481H10.1808V21.6681C5.01228 20.7517 1.45482 15.9641 2.06884 10.751C2.68286 5.53794 7.25533 1.70791 12.4953 2.01751C17.7353 2.32712 21.825 6.66896 21.8208 11.9181Z"
+              />
+            </svg>
+          </a>
+        </li>
+        <li class="flex">
+          <a
+            href="https://fr.linkedin.com/company/metropoledelille/"
+            target="_blank"
+            class="hover:outline-offset-4 hover:border-b-2 hover:border-red-600"
+          >
+            <svg
+              class="h-6 fill-white hover:fill-red-600"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <mask
+                id="mask0_102_636"
+                style="mask-type: luminance"
+                maskUnits="userSpaceOnUse"
+                x="3"
+                y="3"
+                width="18"
+                height="18"
+              >
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M3 3.00012H20.9565V20.9559H3V3.00012Z"
+                  fill="white"
+                />
+              </mask>
+              <g mask="url(#mask0_102_636)">
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M17.9745 16.9771C17.9761 17.1752 17.9123 17.2321 17.7196 17.2276C17.1721 17.2171 16.6245 17.2089 16.0778 17.2306C15.8033 17.2419 15.7207 17.1706 15.7245 16.8849C15.7411 15.6541 15.7305 14.4226 15.7327 13.1912C15.7327 12.8537 15.7103 12.5192 15.5865 12.2011C15.3765 11.6641 15.0142 11.3004 14.4136 11.2479C13.7745 11.1916 13.3103 11.4826 12.9968 12.0219C12.7913 12.3752 12.7441 12.7696 12.7448 13.1731C12.7478 14.4174 12.7381 15.6609 12.7522 16.9044C12.7561 17.1722 12.6742 17.2389 12.4177 17.2299C11.871 17.2111 11.3235 17.2157 10.7761 17.2284C10.5661 17.2336 10.5022 17.1706 10.5022 16.9576C10.5091 14.3956 10.5082 11.8336 10.5038 9.27169C10.5038 9.08794 10.5413 9.00536 10.7482 9.00994C11.3325 9.02261 11.9175 9.02261 12.5017 9.00994C12.7042 9.00619 12.7575 9.07961 12.7492 9.26869C12.7365 9.57544 12.7462 9.88286 12.7462 10.2699C13.6126 9.19886 14.6557 8.84719 15.8948 9.09694C17.0948 9.33911 17.9205 10.4192 17.955 11.8659C17.9955 13.5684 17.9656 15.2731 17.9745 16.9771ZM7.89081 8.05669C7.16398 8.05511 6.59548 7.47911 6.59706 6.74719C6.59848 6.02411 7.18431 5.43469 7.89823 5.43611C8.61306 5.43836 9.19356 6.03011 9.19131 6.75386C9.18973 7.48744 8.61981 8.05811 7.89081 8.05669ZM8.69481 17.2306C8.14874 17.2089 7.60056 17.2171 7.05381 17.2276C6.85799 17.2314 6.76956 17.1954 6.77024 16.9674C6.77781 14.4069 6.77699 11.8472 6.77099 9.28661C6.77024 9.08119 6.81981 9.00386 7.03874 9.00994C7.59756 9.02411 8.15774 9.02794 8.71581 9.00836C8.97299 8.99936 9.02024 9.09461 9.01881 9.32711C9.00906 10.5946 9.01424 11.8621 9.01424 13.1304C9.01424 14.3851 9.00681 15.6407 9.01956 16.8961C9.02256 17.1511 8.96399 17.2412 8.69481 17.2306ZM20.9182 6.03769C20.8672 5.63036 20.8605 5.21111 20.6355 4.84669C19.9073 3.66544 18.9022 2.99261 17.4615 3.00019C13.8166 3.01894 10.1716 3.00019 6.52649 3.01294C5.97906 3.01436 5.41581 3.03236 4.91856 3.32636C3.70498 4.04486 2.99248 5.04911 3.00006 6.52136C3.01723 10.1784 3.00006 13.8354 3.01198 17.4931C3.01423 18.0084 3.02181 18.5476 3.29173 19.0119C3.92923 20.1099 4.76931 20.9252 6.14924 20.9199C6.18899 20.9199 6.21981 20.9386 6.25281 20.9559H17.7466C17.8103 20.8989 17.8883 20.9274 17.9603 20.9184C18.3735 20.8666 18.8003 20.8644 19.167 20.6274C20.1922 19.9644 20.946 19.1296 20.9228 17.8104C20.9228 17.7871 20.9392 17.7662 20.9566 17.7467V6.25294C20.9055 6.18769 20.9272 6.11036 20.9182 6.03769Z"
+                />
+              </g>
+            </svg>
+          </a>
+        </li>
+        <li class="flex">
+          <a
+            href="https://www.youtube.com/channel/UC8u2Ore30NYveCLHzj82DRA"
+            target="_blank"
+            class="hover:outline-offset-4 hover:border-b-2 hover:border-red-600"
+          >
+            <svg
+              class="h-5 fill-white hover:fill-red-600"
+              viewBox="0 0 20 14"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M4 0C1.79086 0 0 1.79086 0 4V10C0 12.2091 1.79086 14 4 14H16C18.2091 14 20 12.2091 20 10V4C20 1.79086 18.2091 0 16 0H4ZM8.42105 10V4L13.6842 6.82353L8.42105 10Z"
+              />
+            </svg>
+          </a>
+        </li>
+        <li class="flex">
+          <a
+            href="https://www.instagram.com/metropoledelille/"
+            target="_blank"
+            class="hover:outline-offset-4 hover:border-b-2 hover:border-red-600"
+          >
+            <svg
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-6 fill-white hover:fill-red-600"
+            >
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M8 2H15.7C19.0137 2 21.7 4.68629 21.7 8V15.7C21.7 19.0137 19.0137 21.7 15.7 21.7H8C4.68629 21.7 2 19.0137 2 15.7V8C2 4.68629 4.68629 2 8 2ZM20.2 8C20.1945 5.517 18.183 3.5055 15.7 3.5H8C5.517 3.5055 3.5055 5.517 3.5 8V15.7C3.5055 18.183 5.517 20.1945 8 20.2H15.7C18.183 20.1945 20.1945 18.183 20.2 15.7V8Z"
+              />
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M7.5498 11.85C7.5553 9.47751 9.47726 7.55555 11.8498 7.55005C14.2223 7.55555 16.1443 9.47751 16.1498 11.85C16.1498 14.2249 14.2246 16.15 11.8498 16.15C9.47498 16.15 7.5498 14.2249 7.5498 11.85ZM14.6498 11.85C14.6498 10.3037 13.3962 9.05005 11.8498 9.05005C10.3057 9.05553 9.05529 10.3059 9.0498 11.85C9.0498 13.3964 10.3034 14.65 11.8498 14.65C13.3962 14.65 14.6498 13.3964 14.6498 11.85Z"
+              />
+              <path
+                d="M15.5098 6.50504C15.5098 5.90582 15.9955 5.42004 16.5948 5.42004C17.194 5.42004 17.6798 5.90582 17.6798 6.50504C17.6798 7.10427 17.194 7.59004 16.5948 7.59004C15.9955 7.59004 15.5098 7.10427 15.5098 6.50504Z"
+              />
+            </svg>
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div class="flex flex-row items-center flex-wrap">
+      <img
+        class="h-20 mr-8"
+        src="{{ iconsUrl }}finance_ue.png"
+        [alt]="'mel.common.footer.logo.financeUE' | translate"
+      />
+      <img
+        class="h-24"
+        src="{{ iconsUrl }}france_relance.png"
+        [alt]="'mel.common.footer.logo.franceRelance' | translate"
+      />
+    </div>
+    <div class="flex flex-row items-center">
+      <span class="text-xs leading-3 mr-10" translate=""
+        >mel.common.footer.newsletter.inform</span
+      >
+      <a
+        class="bg-white min-w-[173px] inline-flex text-gray-1 font-semibold text-center py-2 px-6 rounded-md transition-all duration-200 cursor-pointer hover:bg-red-600 hover:text-white"
+        href="https://www.lillemetropole.fr/infolettre"
+        target="_blank"
+        translate=""
+        >mel.common.footer.newletter.signup</a
+      >
+    </div>
+  </div>
+  <div class="flex bg-gray-2 text-white min-h-24 justify-center grow">
+    <nav class="mt-4 pl-10">
+      <ul
+        class="flex flex-row divide-x leading-3 items-center flex-wrap justify-center"
+      >
+        <li class="mb-0 md:mb-3 lg:mb-5">
+          <a
+            class="text-xs leading-3 mx-5 hover:text-red-600 hover:underline"
+            href="https://www.lillemetropole.fr/plan-du-site"
+            translate=""
+            >mel.common.footer.plan</a
+          >
+        </li>
+        <li class="mb-0 md:mb-3 lg:mb-5">
+          <a
+            class="text-xs leading-3 mx-5 hover:text-red-600 hover:underline"
+            href="https://www.lillemetropole.fr/actualites"
+            translate=""
+            >mel.common.footer.news</a
+          >
+        </li>
+        <li class="mb-0 md:mb-3 lg:mb-5">
+          <a
+            class="text-xs leading-3 mx-5 hover:text-red-600 hover:underline"
+            href="https://www.lillemetropole.fr/les-reseaux-sociaux-de-la-mel"
+            translate=""
+            >mel.common.footer.social
+          </a>
+        </li>
+        <li class="mb-0 md:mb-3 lg:mb-5">
+          <a
+            class="text-xs leading-3 mx-5 hover:text-red-600 hover:underline"
+            href="https://www.lillemetropole.fr/recrutement"
+            translate=""
+            >mel.common.footer.recruitment</a
+          >
+        </li>
+        <li class="mb-0 md:mb-3 lg:mb-5">
+          <a
+            class="text-xs leading-3 mx-5 hover:text-red-600 hover:underline"
+            href="https://www.lillemetropole.fr/declaration-daccessibilite-du-site-internet-lillemetropolefr-rgaa"
+            translate=""
+            >mel.common.footer.accessibility</a
+          >
+        </li>
+        <li class="mb-0 md:mb-3 lg:mb-5">
+          <a
+            class="text-xs leading-3 mx-5 hover:text-red-600 hover:underline"
+            href="https://www.lillemetropole.fr/mentions-legales"
+            translate=""
+            >mel.common.footer.legal</a
+          >
+        </li>
+        <li class="mb-0 md:mb-3 lg:mb-5">
+          <a
+            class="text-xs leading-3 mx-5 hover:text-red-600 hover:underline"
+            href="mailto: [email protected]"
+            target="_blank"
+            translate=""
+            >mel.common.footer.contact</a
+          >
+        </li>
+      </ul>
+    </nav>
+  </div>
+</footer>

apps/datahub/src/app/common/footer/mel-datahub-footer.component.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+
+@Component({
+  selector: 'mel-datahub-footer',
+  templateUrl: './mel-datahub-footer.component.html',
+  styles: ``,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MelDatahubFooterComponent {
+  iconsUrl = 'assets/icons/'
+}

apps/datahub/src/assets/i18n/en_MEL.json

@@ -1,4 +1,16 @@
 {
+  "mel.common.footer.accessibility": "Accessibility : partially conform to 55%",
+  "mel.common.footer.contact": "Contact us",
+  "mel.common.footer.follow": "Follow us !",
+  "mel.common.footer.legal": "Legal mentions",
+  "mel.common.footer.logo.financeUE": "",
+  "mel.common.footer.logo.franceRelance": "",
+  "mel.common.footer.newletter.signup": "Sign up to the newsletter",
+  "mel.common.footer.news": "Last news",
+  "mel.common.footer.newsletter.inform": "Subscribe to the newsletter and stay informed of MEL's last news !",
+  "mel.common.footer.plan": "Sitemap",
+  "mel.common.footer.recruitment": "Recruitment",
+  "mel.common.footer.social": "Social medias",
   "mel.common.header.title": "",
   "mel.datahub.home.title": "",
   "mel.datahub.search.title": "",
@@ -16,5 +28,7 @@
   "mel.record.metadata.related": "",
   "mel.record.tab.chart": "",
   "mel.record.tab.data": "",
-  "mel.record.tab.map": ""
+  "mel.record.tab.map": "",
+  "record.metadata.quality": "",
+  "record.metadata.quality.details": ""
 }

apps/datahub/src/assets/i18n/fr_MEL.json

@@ -1,4 +1,16 @@
 {
+  "mel.common.footer.accessibility": "Accessibilité : partiellement conforme à 55%",
+  "mel.common.footer.contact": "Contactez-nous",
+  "mel.common.footer.follow": "Suivez-nous !",
+  "mel.common.footer.legal": "Mentions légales",
+  "mel.common.footer.logo.financeUE": "Financé par l'Union européenne",
+  "mel.common.footer.logo.franceRelance": "France Relance",
+  "mel.common.footer.newletter.signup": "S'inscrire à l'infolettre",
+  "mel.common.footer.news": "Actualités",
+  "mel.common.footer.newsletter.inform": "Restez informés de l'actualité de la MEL en vous inscrivant à l'infolettre !",
+  "mel.common.footer.plan": "Plan du site",
+  "mel.common.footer.recruitment": "Recrutement",
+  "mel.common.footer.social": "Réseaux sociaux",
   "mel.common.header.title": "Data platform",
   "mel.datahub.home.title": "Métropole Européenne Lille",
   "mel.datahub.search.title": "Catalogue de jeux de données",
@@ -16,5 +28,7 @@
   "mel.record.metadata.related": "Jeux de données similaires",
   "mel.record.tab.chart": "Analyse",
   "mel.record.tab.data": "Tableau",
-  "mel.record.tab.map": "Cartographie"
+  "mel.record.tab.map": "Cartographie",
+  "record.metadata.quality": "",
+  "record.metadata.quality.details": ""
 }