Feat/change wordings

2023-10-11 11:29:24 +00:00
parent 1b9b5adf56
commit 2bed3ccbbc
8 changed files with 81 additions and 45 deletions
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -31,7 +31,7 @@
          />
        </div>
      </li>
-      <li class="link-item">
+      <li v-if="isInstanceIGN" class="link-item link-ay11">
        <div class="link">
          <Link
            :text="$t('general.footer.ay11_text')"
@@ -46,6 +46,11 @@

 <script setup lang="ts">
 import Link from './Link.vue'
+import { computed } from 'vue'
+
+const isInstanceIGN = computed((): boolean =>
+  window.location.href.includes('.ign.')
+)
 </script>

 <style scoped lang="scss">
@@ -68,12 +73,12 @@ ul {

 .link-item {
  width: 100%;
-  &:last-child {
-    font-style: italic;
-    text-align: end;
-    .link {
-      width: 100%;
-    }
+}
+.link-ay11 {
+  font-style: italic;
+  text-align: end;
+  .link {
+    width: 100%;
  }
 }
 .link {
--- a/src/components/InformationCard.vue
+++ b/src/components/InformationCard.vue
@@ -14,9 +14,7 @@
          {{ title }}
        </h3>
      </div>
-      <p v-if="text" class="information-text">
-        {{ text }}
-      </p>
+      <p v-if="text" v-html="text" class="information-text"></p>
    </div>
    <slot name="button"></slot>
  </div>
@@ -70,6 +68,7 @@ h3 {
 .information-text {
  margin-top: toRem(1);
  @include text(m-r-regular);
+  white-space: pre-wrap;
 }
@media (max-width: toRem(50)) {
  .information-block {
--- a/src/components/License.vue
+++ b/src/components/License.vue
@@ -32,5 +32,6 @@ defineProps({
 }
 .license-text {
  margin-right: toRem(0.5);
+  margin-bottom: 0;
 }
 </style>
--- a/src/components/Terminal.vue
+++ b/src/components/Terminal.vue
@@ -8,6 +8,8 @@
    <div class="editor">
      <code class="code">
        <div class="screen">
+          <span>## </span
+          ><span>{{ $t('pages.share_pictures.comment_install') }}</span>
          <div class="upload-command">
            <span class="tilde">~</span><span>{{ textInstall }}</span>
          </div>
@@ -22,6 +24,8 @@
          </div>
        </div>
        <div class="screen">
+          <span>## </span
+          ><span>{{ $t('pages.share_pictures.comment_upload') }}</span>
          <div class="upload-command">
            <span class="tilde">~</span><span>{{ textUpload }}</span>
          </div>
@@ -76,12 +80,11 @@ async function copyText(text: string): Promise<void> {
  border-bottom-right-radius: toRem(1.5);
  border-bottom-left-radius: toRem(1.5);
  background-color: var(--black-pale);
-  height: toRem(32);
  width: 100%;
  position: relative;
 }
 .screen {
-  padding: toRem(3) toRem(2) toRem(2);
+  padding: toRem(2.5) toRem(2) toRem(1.5);
  height: 100%;
 }
 .screen:nth-child(2n) {
@@ -90,7 +93,7 @@ async function copyText(text: string): Promise<void> {
 .upload-command {
  display: flex;
  align-items: center;
-  margin-top: toRem(2);
+  margin-top: toRem(1);
 }
 .entry-button-terminal {
  margin-top: toRem(2);
@@ -127,8 +130,5 @@ async function copyText(text: string): Promise<void> {
  .editor {
    min-height: toRem(27);
  }
-  .upload-command {
-    margin-top: 0;
-  }
 }
 </style>
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -89,26 +89,28 @@
    },
    "share_pictures": {
      "title": "Pourquoi contribuer à la base de photographies de Panoramax ?",
-      "description": "Panoramax a pour ambition de devenir le Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+      "description": "Contribuer à Panoramax, c'est participer au développement d'un géo-commun, une ressource numérique souveraine, libre et réutilisable.Chaque photo géolocalisée publiée sur Panoramax est utilisable par tous et pour des usages variés, par exemple par une collectivité territoriale qui a besoin d'observer l’état de la voirie ou par un opérateur de télécommunications pour préparer une intervention.\n\nChaque contributeur peut envoyer ses séquences, les modifier et les consulter tous comme l'ensemble des vues - 360° ou non - versées par la communauté. Le floutage obligatoire des visages et plaques d'immatriculation est automatisé sur la plateforme.",
      "alt_img_map": "Illustration d'une femme qui regarde une carte avec son smartphone geolocalisé",
      "card_photo1": "Des lieux visibles depuis la voie publique",
      "card_photo2": "Des photos publiées au format 360° ou non",
-      "card_photo3": "Une fonctionnalité de visualisation vue du sol",
-      "card_photo4": "Des photos géolocalisées en temps réel",
+      "card_photo3": "Des photos facilement réutilisables",
+      "card_photo4": "Une contribution en images facile et rapide",
      "card_alt_photo1": "Image qui représente un immeuble",
      "card_alt_photo2": "Image qui représente des photos 360 degrés",
      "card_alt_photo3": "Image qui représente une carte avec un pointeur",
      "card_alt_photo4": "Image qui représente un pointeur",
-      "card_description1": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-      "card_description2": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-      "card_description3": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-      "card_description4": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      "card_description1": "Toutes les photos prises depuis la voie publique sont concernées, dès lors qu'elles sont géolocalisées et vues du sol.",
+      "card_description2": "Le format 360° n'est pas obligatoire : des photos prises via un smartphone suffisent, dates, lieux et format jpg sont les seuls pre-requis",
+      "card_description3": "Toutes les photos facilement accessible et réutilisables sans compte : via le site web ou une API standard (format STAC)",
+      "card_description4": "Plusieurs outils sont mis à disposition pour faciliter les contributions dont une ligne de commande et une interface web.",
      "upload_subtitle": "Chargez vos images simplement en ligne",
      "upload_illustration_alt": "Illustration qui représente l'envoie de photo en ligne",
-      "upload_description": "Panoramax a pour ambition de devenir le Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+      "upload_description": "L'application web de Panoramax vous permet de déposer toutes vos photos de terrain au format jpg d'un simple clic. Aucune notion de programmation n'est nécessaire. Pour les envois en grand nombre, il est toutefois conseillé de faire appel à l'outil en ligne de commande",
      "upload_button": "+  Partager des images",
      "command_line_subtitle": "L'outil en ligne de commande",
-      "description_terminal": "<a href='https://gitlab.com/geovisio/cli' target='_blank' style='color:black'>L'outil en ligne de commande</a> vous permet de partager de grands volumes de photos. La procédure est simple et vous devez disposer <a target='_blank' href='https://www.python.org/downloads/' style='color:black'>de python (au moins la version 3.8)</a>.\n\n1. Installer l’outil en ligne de commande geovisio\n2. Lancez la commande de versement d’images sur le dossier choisi. Après '--api-url', renseignez l'url de l'api de l'instance où partager les photos et le chemin vers votre dossier de photos sur votre machine. L’outil demandera vos informations de connexion avant l'import. Une fois les données chargées, un temps de traitement est nécessaire pour les rendre disponibles.",
+      "comment_install": "Installer l’outil en ligne de commande geovisio",
+      "comment_upload": "Lancez la commande de versement d’images sur le dossier choisi",
+      "description_terminal": "<a href='https://gitlab.com/geovisio/cli' target='_blank' style='color:black'>L'outil en ligne de commande</a> vous permet de partager de grands volumes de photos. La procédure est simple et vous devez disposer <a target='_blank' href='https://www.python.org/downloads/' style='color:black'>de python (au moins la version 3.8)</a>.\n\nL’outil demandera vos informations de connexion avant l'import. Une fois les données chargées, un temps de traitement est nécessaire pour les rendre disponibles.",
      "terminal_install": "pip install geovisio_cli",
      "terminal_text": "geovisio upload --api-url {url} <DOSSIER_PHOTOS>",
      "button_copy": "Copier",
@@ -116,22 +118,22 @@
      "information_text1": "automatiquement floutées dans le respect de la législation",
      "information_text2": "Les données déposées seront sous {word}",
      "information_text3": "sous forme «brute» pour des réutilisations variées (ex: préparation des chantiers)",
-      "information_about_title": "A propos du chargement d'images",
-      "information_about_description": "Aujourd'hui, le versement de grands volumes d'images est possible via une ligne de commande. Une interface d'upload est également utilisable pour des volumes moins importants. Bientôt, d'autres moyens de versement seront disponibles.",
-      "doc_subtitle": "Vous voulez accéder à plus de documentation technique ?",
-      "doc_description": "Nous mettons à disposition un outil recensant l’ensemble de la documentation technique relative à Panoramax.",
-      "doc_button": "Voir à la documentation technique",
+      "information_about_title": "Besoin de récupérer les données ?",
+      "information_about_description": "Une API est mise à disposition pour récupérer toutes les données. <a href='{docLink}' target='_blank' style='color:#0a1f69'>\nRetrouvez sa documentation ici</a>\nLes données sont aussi exposées sous forme <a href='{docTiles}' target='_blank' style='color:#0a1f69'>de tuiles vectorielles</a>",
+      "doc_subtitle": "Besoin d'aide pour contribuer à Panoramax ?",
+      "doc_description": "Nous mettons à disposition l’ensemble de la documentation relative à Panoramax et vous pouvez accéder aux tutoriels sur le forum des géo-communs.",
+      "doc_button": "Voir la documentation",
      "doc_illustration_alt": "Illustration représentant un personnage avec un feuillet de documents"
    },
    "upload": {
      "title": "Contribuez à la base de photographies de Panoramax",
-      "description": "Pour les très gros volumes de photos, nous mettons à votre disposition un outil en ligne de commande.",
+      "description": "Pour le versement d'un grand volume de photographies, l'outil en ligne de commande est plus adapté.",
      "know_more_button": "En savoir plus",
      "input_label": "Glissez vos images ici ou cliquez sur ",
      "import_word": "importer",
      "import_type": "Format JPEG uniquement",
      "subtitle_import": "Dépôt des images",
-      "text_import": "Déposez vos fichiers dans cet espace, chaque image ou série d’images constitue une “séquence”. Vous pourrez ensuite les retrouver dans la section “mes images”",
+      "text_import": "Déposez ici vos fichiers jpg. Chaque image ou série d’images constitue une “séquence”. Vous pourrez ensuite les retrouver dans la section « mes images » et choisir de les masquer, les afficher ou les supprimer.",
      "subtitle_process": "Traitements de l'import",
      "uploading_process": "Téléchargement en cours...",
      "sequence_title": "Séquence du ",
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -16,7 +16,7 @@ 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> = [
+let routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
@@ -37,11 +37,6 @@ const routes: Array<RouteRecordRaw> = [
    name: 'my-sequences',
    component: MySequencesView
  },
-  {
-    path: '/accessibilite',
-    name: 'ay11',
-    component: Ay11View
-  },
  { path: '/sequence/:id', name: 'sequence', component: MySequenceView },
  {
    path: '/pourquoi-contribuer',
@@ -54,6 +49,18 @@ const routes: Array<RouteRecordRaw> = [
    component: UploadPicturesView
  }
 ]
+
+if (window.location.href.includes('.ign.')) {
+  routes = [
+    ...routes,
+    {
+      path: '/accessibilite',
+      name: 'ay11',
+      component: Ay11View
+    }
+  ]
+}
+
 const router = createRouter({
  history: createWebHistory(),
  routes
--- a/src/views/SharePicturesView.vue
+++ b/src/views/SharePicturesView.vue
@@ -3,7 +3,7 @@
    <section class="section">
      <div class="section-why-text">
        <h1 class="main-title">{{ $t('pages.share_pictures.title') }}</h1>
-        <p>
+        <p class="why-description">
          {{ $t('pages.share_pictures.description') }}
        </p>
      </div>
@@ -120,7 +120,7 @@
        <div class="entry-information-card">
          <InformationCard
            :title="$t('pages.share_pictures.information_about_title')"
-            :text="$t('pages.share_pictures.information_about_description')"
+            :text="formatTextInfoCard"
            look="blue"
          />
        </div>
@@ -137,7 +137,8 @@
            <Link
              :text="$t('pages.share_pictures.doc_button')"
              type="external"
-              path-external="https://gitlab.com/geovisio/cli"
+              target="_blank"
+              path-external="https://forum.geocommuns.fr/t/les-tutoriels-pour-contribuer-a-panoramax/"
              look="button button--white-blue"
            />
          </div>
@@ -166,12 +167,21 @@ import authConfig from '../composables/auth'
 const { t } = useI18n()
 const { authConf } = authConfig()

-const terminalText = computed((): string => {
-  const url = import.meta.env.VITE_API_URL
+const apiUrl = computed((): string =>
+  import.meta.env.VITE_API_URL
    ? import.meta.env.VITE_API_URL
    : 'https://panoramax.ign.fr/'
-  return t('pages.share_pictures.terminal_text', { url })
+)
+
+const formatTextInfoCard = computed((): string => {
+  return t('pages.share_pictures.information_about_description', {
+    docLink: `${apiUrl.value}api/docs/swagger`,
+    docTiles: `${apiUrl.value}api/docs/swagger#/Map/get_api_map__z___x___y___format_`
+  })
 })
+const terminalText = computed((): string =>
+  t('pages.share_pictures.terminal_text', { url: apiUrl.value })
+)
 </script>

 <style lang="scss" scoped>
@@ -225,6 +235,9 @@ ul {
  color: var(--blue-dark);
  margin-bottom: toRem(2);
 }
+.why-description {
+  white-space: break-spaces;
+}
 .card-list {
  display: flex;
 }
@@ -241,11 +254,16 @@ ul {
 .wrapper-illustration {
  display: flex;
  justify-content: center;
+  align-items: center;
  background-color: var(--blue-pale);
  border: toRem(0.1) dashed var(--blue);
  border-radius: toRem(2.2);
  padding: toRem(4);
  margin-bottom: toRem(3);
+  height: 100%;
+  img {
+    height: toRem(20);
+  }
 }
 .subtitle {
  @include text(h2);
@@ -370,7 +388,7 @@ ul {
  }
  .wrapper-illustration {
    img {
-      height: toRem(10);
+      max-height: toRem(10);
    }
  }
  .upload-button {
--- a/src/views/UploadPicturesView.vue
+++ b/src/views/UploadPicturesView.vue
@@ -33,6 +33,7 @@
          v-if="authConf && authConf.license && authConf.license.url"
          :url="authConf.license.url"
          :text="authConf.license.id"
+          class="entry-license"
        />
        <form>
          <div class="wrapper-form">
@@ -276,6 +277,9 @@ h3 {
 .import-text {
  @include text(m-r-regular);
 }
+.entry-license {
+  margin-bottom: toRem(1);
+}
 .wrapper-form {
  border: toRem(0.1) dashed var(--blue);
  background-color: var(--blue-pale);