Merge branch 'feat/add-footer' into 'develop'

feat: add first version footer + ay11 page

See merge request geovisio/website!92

src/App.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import Header from '@/components/Header.vue'
+import Footer from '@/components/Footer.vue'
 import { RouterView } from 'vue-router'
 import { useMeta } from 'vue-meta'
 import { useI18n } from 'vue-i18n'
@@ -41,5 +42,6 @@ useMeta({
     "
   />
   <RouterView />
+  <Footer />
 </template>
 <style scoped></style>

src/assets/images/linkedin.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.873 0.179993C5.35013 0.179993 0.873047 4.65708 0.873047 10.18C0.873047 15.7029 5.35013 20.18 10.873 20.18C16.396 20.18 20.873 15.7029 20.873 10.18C20.873 4.65708 16.396 0.179993 10.873 0.179993ZM8.42513 14.3248H6.40013V7.80812H8.42513V14.3248ZM7.40013 7.00812C6.76055 7.00812 6.347 6.55499 6.347 5.99458C6.347 5.4227 6.77305 4.98312 7.42617 4.98312C8.0793 4.98312 8.4793 5.4227 8.4918 5.99458C8.4918 6.55499 8.0793 7.00812 7.40013 7.00812ZM15.821 14.3248H13.796V10.7133C13.796 9.8727 13.5022 9.30187 12.7699 9.30187C12.2105 9.30187 11.8783 9.68833 11.7314 10.0602C11.6772 10.1925 11.6637 10.38 11.6637 10.5665V14.3237H9.63763V9.88624C9.63763 9.0727 9.61159 8.39249 9.58451 7.80708H11.3439L11.4366 8.71228H11.4772C11.7439 8.28728 12.397 7.6602 13.4897 7.6602C14.822 7.6602 15.821 8.55291 15.821 10.4717V14.3248Z" fill="#0A1F69"/>
+</svg>

src/assets/images/mastodon.svg

@@ -0,0 +1,3 @@
+<svg width="19" height="21" viewBox="0 0 19 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.4847 15.4241C16.0048 15.1241 18.1973 13.5803 18.4723 12.1703C18.9073 9.94774 18.8723 6.74641 18.8723 6.74641C18.8723 2.4088 16.0148 1.13627 16.0148 1.13627C14.5747 0.4775 12.1009 0.201243 9.53086 0.179993H9.46836C6.89705 0.201243 4.42448 0.4775 2.98445 1.13627C2.98445 1.13627 0.128126 2.40755 0.128126 6.74641L0.125626 7.57393C0.120626 8.37395 0.116876 9.26147 0.139377 10.1877C0.243129 14.4303 0.921896 18.613 4.86449 19.6505C6.68204 20.1292 8.24333 20.2292 9.50086 20.1605C11.7797 20.0355 13.0597 19.3517 13.0597 19.3517L12.9847 17.7054C12.9847 17.7054 11.3559 18.2179 9.52586 18.1554C7.71332 18.0929 5.80077 17.9604 5.50701 15.7454C5.47905 15.5399 5.46526 15.3327 5.46576 15.1254C5.46576 15.1254 7.2458 15.5579 9.50086 15.6604C10.8796 15.7229 12.1722 15.5804 13.486 15.4241H13.4847ZM15.501 12.3365H13.4097V7.23642C13.4097 6.16264 12.9547 5.61763 12.0459 5.61763C11.0409 5.61763 10.5371 6.26389 10.5371 7.54393V10.3352H8.45708V7.54268C8.45708 6.26264 7.95332 5.61638 6.9483 5.61638C6.03952 5.61638 5.58451 6.16139 5.58451 7.23642V12.3353H3.49321V7.08266C3.49321 6.00889 3.76822 5.15637 4.31823 4.5251C4.88825 3.89384 5.63326 3.57008 6.55954 3.57008C7.62956 3.57008 8.43958 3.98009 8.97585 4.79886L9.49711 5.66763L10.0184 4.79886C10.5546 3.98009 11.3647 3.57008 12.4359 3.57008C13.361 3.57008 14.106 3.89384 14.6747 4.5251C15.2273 5.15637 15.501 6.00889 15.501 7.08266V12.3365Z" fill="#0A1F69"/>
+</svg>

src/assets/images/x.svg

@@ -0,0 +1,3 @@
+<svg width="23" height="21" viewBox="0 0 23 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.2989 0.179993H21.6917L14.2792 8.65277L23 20.18H16.172L10.8246 13.1879L4.7047 20.18H1.31005L9.23888 11.1172L0.873047 0.180915H7.87438L12.7082 6.57192L18.2989 0.179993ZM17.1087 18.1498H18.9886L6.85286 2.10412H4.83562L17.1087 18.1498Z" fill="#0A1F69"/>
+</svg>

src/components/Footer.vue

@@ -0,0 +1,160 @@
+<template>
+  <footer class="footer">
+    <div class="wrapper-footer">
+      <div class="wrapper-section">
+        <h3 class="title">{{ $t('general.footer.panoramax_title') }}</h3>
+        <ul class="link-list">
+          <li class="link">
+            <Link
+              :text="$t('general.footer.panoramax_site')"
+              type="external"
+              path-external="https://panoramax.fr/"
+              look="link"
+            />
+          </li>
+          <li class="link">
+            <Link
+              :text="$t('general.footer.panoramax_faq')"
+              type="external"
+              path-external="https://panoramax.fr/foire-aux-questions"
+              look="link"
+            />
+          </li>
+        </ul>
+      </div>
+      <div class="wrapper-section">
+        <h3 class="title">{{ $t('general.footer.information_title') }}</h3>
+        <ul class="link-list">
+          <li class="link">
+            <Link
+              :text="$t('general.footer.information_forum')"
+              type="external"
+              path-external="https://forum.geocommuns.fr/c/panoramax/6"
+              look="link"
+            />
+          </li>
+          <li class="link">
+            <Link
+              :text="$t('general.footer.information_gitlab')"
+              type="external"
+              path-external="https://gitlab.com/geovisio"
+              look="link"
+            />
+          </li>
+          <li class="link">
+            <Link
+              :text="$t('general.footer.information_github')"
+              type="external"
+              path-external="https://github.com/panoramax-project/"
+              look="link"
+            />
+          </li>
+        </ul>
+      </div>
+      <div class="wrapper-section">
+        <h3 class="title">{{ $t('general.footer.rs_title') }}</h3>
+        <ul class="logo-list">
+          <li class="logo">
+            <Link
+              :image="{
+                url: 'mastodon.svg',
+                alt: $t('general.footer.mastodon_alt')
+              }"
+              type="external"
+              path-external="https://mapstodon.space/@panoramax"
+            />
+          </li>
+          <li class="logo">
+            <Link
+              :image="{
+                url: 'linkedin.svg',
+                alt: $t('general.footer.linkedin_alt')
+              }"
+              type="external"
+              path-external="https://github.com/panoramax-project/"
+            />
+          </li>
+          <li>
+            <Link
+              :image="{
+                url: 'x.svg',
+                alt: $t('general.footer.twitter_alt')
+              }"
+              type="external"
+              path-external="https://twitter.com/panoramax_"
+            />
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="ay11-text">
+      <Link
+        :text="$t('general.footer.ay11_text')"
+        :route="{ name: 'ay11' }"
+        look="link"
+      />
+    </div>
+  </footer>
+</template>
+
+<script setup lang="ts">
+import Link from './Link.vue'
+</script>
+
+<style scoped lang="scss">
+ul {
+  padding: 0;
+  margin: 0;
+}
+.footer {
+  padding: toRem(2);
+  border-top: toRem(0.1) solid var(--grey);
+}
+.wrapper-footer {
+  display: flex;
+}
+.wrapper-section {
+  width: 33%;
+  display: flex;
+  flex-direction: column;
+}
+.title {
+  @include text(m-regular);
+  color: var(--blue);
+  margin-bottom: toRem(1.5);
+}
+.link-list {
+  display: flex;
+  flex-direction: column;
+  align-items: initial;
+}
+.logo-list {
+  display: flex;
+  align-items: center;
+}
+.link {
+  margin-bottom: toRem(0.3);
+  width: fit-content;
+}
+.logo {
+  margin-right: toRem(2);
+  height: toRem(3);
+}
+.ay11-text {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+@media (max-width: toRem(50)) {
+  .footer {
+    padding: toRem(2);
+  }
+  .wrapper-footer {
+    flex-direction: column;
+  }
+  .ay11-text {
+    margin-top: toRem(2);
+    justify-content: initial;
+  }
+}
+</style>

src/components/Header.vue

@@ -164,6 +164,7 @@ const userName = computed((): string =>
 .wrapper-logo {
   display: flex;
   align-items: center;
+  height: toRem(4);
 }
 .wrapper-entries {
   display: flex;

src/components/Link.vue

@@ -63,6 +63,7 @@ const titleImg = computed<string>(() =>
   align-items: center;
   color: var(--black);
   text-decoration: none;
+  height: inherit;
   .icon {
     margin-right: toRem(1);
   }
@@ -75,9 +76,9 @@ const titleImg = computed<string>(() =>
   font-size: toRem(2.4);
 }
 .logo {
-  height: toRem(4);
   border-radius: toRem(0.5);
   margin-right: toRem(1);
+  height: inherit;
 }
 .button {
   height: toRem(4);

src/locales/fr.json

@@ -19,6 +19,20 @@
       "burger_menu_aria_label_open": "Afficher le menu",
       "burger_menu_aria_label_closed": "Masquer le menu"
     },
+    "footer": {
+      "panoramax_title": "Panoramax",
+      "panoramax_site": "Site vitrine",
+      "panoramax_faq": "FAQ",
+      "information_title": "Ressources",
+      "information_forum": "Forum",
+      "information_gitlab": "Gitlab",
+      "information_github": "Github",
+      "rs_title": "Suivez-nous",
+      "mastodon_alt": "Logo Mastodon",
+      "linkedin_alt": "Logo Linkedin",
+      "twitter_alt": "Logo Twitter",
+      "ay11_text": "Accessibilité : non conforme"
+    },
     "error_text": "Une erreur est survenue",
     "success_text": "Mise à jour réussie"
   },

src/router/index.ts

@@ -14,6 +14,7 @@ import MySequencesView from '../views/MySequencesView.vue'
 import MySequenceView from '../views/MySequenceView.vue'
 import SharePicturesView from '../views/SharePicturesView.vue'
 import UploadPicturesView from '../views/UploadPicturesView.vue'
+import Ay11View from '../views/Ay11View.vue'
 const { cookies } = useCookies()
 const routes: Array<RouteRecordRaw> = [
   {
@@ -36,6 +37,11 @@ const routes: Array<RouteRecordRaw> = [
     name: 'my-sequences',
     component: MySequencesView
   },
+  {
+    path: '/accessibilite',
+    name: 'ay11',
+    component: Ay11View
+  },
   { path: '/sequence/:id', name: 'sequence', component: MySequenceView },
   {
     path: '/partager-des-photos',

src/views/Ay11View.vue

@@ -0,0 +1,94 @@
+<template>
+  <main class="entry-page">
+    <h1>Déclaration d’accessibilité</h1>
+    <p>Établie le <span>18 septembre 2023</span>.</p>
+    <p>
+      <span>IGN</span> s’engage à rendre son service accessible, conformément à
+      l’article 47 de la loi n° 2005-102 du 11 février 2005.
+    </p>
+    <p>
+      Cette déclaration d’accessibilité s’applique à
+      <strong>Panoramax Instance IGN</strong
+      ><span> (<span>https://panoramax.ign.fr</span>)</span>.
+    </p>
+    <h2>État de conformité</h2>
+    <p>
+      <strong>Panoramax Instance IGN</strong> est
+      <strong><span data-printfilter="lowercase">non conforme</span></strong>
+      avec le
+      <abbr title="Référentiel général d’amélioration de l’accessibilité"
+        >RGAA</abbr
+      >. <span>Le site n’a encore pas été audité.</span>
+    </p>
+    <h2>Contenus non accessibles</h2>
+    <h2>Amélioration et contact</h2>
+    <p>
+      Si vous n’arrivez pas à accéder à un contenu ou à un service, vous pouvez
+      contacter le responsable de <span>Panoramax Instance IGN</span> pour être
+      orienté vers une alternative accessible ou obtenir le contenu sous une
+      autre forme.
+    </p>
+    <ul class="basic-information feedback h-card">
+      <li>Téléphone&nbsp;: <span>+33 14 398 84 61</span></li>
+      <li>
+        E-mail&nbsp;:
+        <a
+          href="mailto:camille.salou@ign.frpanoramax@panoramax.frsignalement.ign@panoramax.fr"
+          >signalement.ign@panoramax.fr</a
+        >
+      </li>
+
+      <li>Adresse&nbsp;: <span>IGN, Saint-Mandé</span></li>
+    </ul>
+    <p>Nous essayons de répondre dans les <span>5 jours ouvrés</span>.</p>
+    <h2>Voie de recours</h2>
+    <p>
+      Cette procédure est à utiliser dans le cas suivant&nbsp;: vous avez
+      signalé au responsable du site internet un défaut d’accessibilité qui vous
+      empêche d’accéder à un contenu ou à un des services du portail et vous
+      n’avez pas obtenu de réponse satisfaisante.
+    </p>
+    <p>Vous pouvez&nbsp;:</p>
+    <ul>
+      <li>
+        Écrire un message au
+        <a href="https://formulaire.defenseurdesdroits.fr/"
+          >Défenseur des droits</a
+        >
+      </li>
+      <li>
+        Contacter
+        <a href="https://www.defenseurdesdroits.fr/saisir/delegues"
+          >le délégué du Défenseur des droits dans votre région</a
+        >
+      </li>
+      <li>
+        Envoyer un courrier par la poste (gratuit, ne pas mettre de
+        timbre)&nbsp;:<br />
+        Défenseur des droits<br />
+        Libre réponse 71120 75342 Paris CEDEX 07
+      </li>
+    </ul>
+    <hr />
+    <p>
+      Cette déclaration d’accessibilité a été créé le
+      <span>18 septembre 2023</span> grâce au
+      <a href="https://betagouv.github.io/a11y-generateur-declaration/#create"
+        >Générateur de Déclaration d’Accessibilité de BetaGouv</a
+      >.
+    </p>
+  </main>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+.entry-page {
+  padding: toRem(5) toRem(2);
+}
+@media (max-width: toRem(50)) {
+  .entry-page {
+    padding-top: toRem(15);
+  }
+}
+</style>

src/views/HomeView.vue

@@ -102,7 +102,7 @@ onMounted(async () => {
   font-size: initial;
   width: 100vw;
   position: relative;
-  min-height: calc(100vh - #{toRem(8)});
+  min-height: calc(100vh - #{toRem(27.42)});
 }
 .gvs-focus-map .entry-report-button {
   display: none;

src/views/MySequenceView.vue

@@ -616,7 +616,6 @@ async function patchOrDeleteCollectionItems(
   width: 50vw;
   height: calc(100vh - #{toRem(8)});
   overflow: hidden;
-  box-shadow: 0px 4px 20px 0px #00000033;
 }
 .wrapper-loader {
   display: flex;

src/views/UploadPicturesView.vue

@@ -209,6 +209,7 @@ ul {
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  min-height: calc(100vh - #{toRem(27.42)});
 }
 .upload-section {
   width: 80%;