Merge pull request #251 from abes-esr/test

THE-13-64 traductions + fix
abes-esr · Nov 25, 2024 · 4ddbf48 · 4ddbf48
2 parents ac35ea5 + 8f5cb62
commit 4ddbf48
Show file tree

Hide file tree

Showing 52 changed files with 8,734 additions and 7,715 deletions.
diff --git a/.env b/.env
@@ -1,5 +1,6 @@
 NUXT_APP_API=http://localhost:8990/api/v1/
-NUXT_APP_API=https://beta.theses.fr/api/v1/
+NUXT_APP_API=https://theses.fr/api/v1/
 NUXT_APP_APIREF=https://apicom.sudoc.fr/wsReferentiels/v1/
-NUXT_IS_MAINTENANCE=false
 NUXT_MAINTENANCE_MESSAGE="<p>Nous nous excusons pour tout inconvénient que cela pourrait causer. </p><br /> <p>Vous pouvez suivre le compte Twitter de l'ABES pour le suivi des travaux : <a href='https://twitter.com/com_abes' target='_blank'>https://twitter.com/com_abes</a></p><br /><p>Nous vous remercions pour votre patience et nous revenons bientôt !</p>"
+NUXT_IS_MAINTENANCE=false
+
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 # theses-front
 [![build-test-pubtodockerhub](https://github.com/abes-esr/theses-front/actions/workflows/build-test-pubtodockerhub.yml/badge.svg)](https://github.com/abes-esr/theses-front/actions/workflows/build-test-pubtodockerhub.yml) [![Docker Pulls](https://img.shields.io/docker/pulls/abesesr/theses.svg)](https://hub.docker.com/r/abesesr/theses/)
 
-Le moteur de recherche theses.fr recense l’ensemble des thèses de doctorat soutenues en France depuis 1985, les sujets de thèse préparés au sein des établissements de l’enseignement supérieur français, et les personnes impliquées dans la recherche doctorale française. 
+Le moteur de recherche theses.fr recense l’ensemble des thèses de doctorat soutenues en France depuis 1985, les sujets de thèse préparés au sein des établissements de l’enseignement supérieur français, et les personnes impliquées dans la recherche doctorale française.
 
 Ce dépôt héberge le code source de l'interface utilisateur du site theses.fr.
 
@@ -14,16 +14,16 @@ L'application complète peut être déployée via Docker à l'aide du dépôt ht
 ## Architecture technique
 
 L'interface est développée en Vue JS 3, à l'aide du framework NuxtJS 3, qui permet de tirer profit du Server Side Rendering pour certaines pages. Le projet utilise également la bibliothèque de composants Vuetify.
-Le projet est ensuite déployé dans un container docker, dans le SI de l'Abes (le docker compose est disponible [ici](https://github.com/abes-esr/theses-docker) )
+Le projet est ensuite déployé dans un container docker, dans le SI de l'Abes (le docker compose est disponible [ici](https://github.com/abes-esr/theses-docker))
 
-Les données affichées par cet interface sont obtenues en interrogeant les API theses.fr : 
-* https://github.com/abes-esr/theses-api-recherche pour la recherche et l'affichage de theses
-* https://github.com/abes-esr/theses-api-export pour les exports des theses en différents formats (CSV, XML, BIBTEX, etc)
+Les données affichées par cette interface sont obtenues en interrogeant les API theses.fr :
+* https://github.com/abes-esr/theses-api-recherche pour la recherche et l'affichage de thèses
+* https://github.com/abes-esr/theses-api-export pour les exports des thèses en différents formats (CSV, XML, BIBTEX, etc)
 * https://github.com/abes-esr/theses-api-diffusion pour la mise à disposition des documents (PDFs et autres)
 
 ## Utilisation du projet
 
-### Installation des dépendances 
+### Installation des dépendances
 
 ```bash
 # npm
@@ -48,7 +48,7 @@ Build et packaging de l'application pour la production :
 npm run build
 ```
 
-Plus d'infos sur le déploiement dans la documentation de Nuxt 3 [deployment documentation](https://nuxt.com/docs/getting-started/deployment) .
+Plus d'infos sur le déploiement dans la documentation de Nuxt 3 [deployment documentation](https://nuxt.com/docs/getting-started/deployment).
 
 
 ### Mode maintenance
@@ -66,7 +66,7 @@ Une fois la maintenance terminée, effectuer la manipulation inverse, remettre `
 
 > [!NOTE]
 > Le .env mentionné ici est le .env utilisé par le docker-compose.yml, pas le .env local du projet Nuxt
-> 
+>
 > Aucune page n'est accessible lorsque le mode maintenance est activé (sauf la page de maintenance). Toutes les autres routes sont redirigées vers cette page.
-> 
-> Egalement, lorsque le mode maintenance est désactivée, il n'est pas possible d'aller sur /maintenance, cela vous redirigera vers la page d'accueil.
+>
+> Également, lorsque le mode maintenance est désactivée, il n'est pas possible d'aller sur /maintenance, cela vous redirigera vers la page d'accueil.
diff --git a/app.vue b/app.vue
@@ -45,13 +45,19 @@ const theme = useTheme();
 
 const themesNames = ref({
   "light": "abesLightTheme",
-  "dark": "abesDarkTheme"
+  "dark": "abesDarkTheme",
+  "inverted": "abesInvertedTheme"
 });
 
 const { mobile } = useDisplay();
 const skipLink =ref(null);
 
 const colorMode = useColorMode({
+  attribute: 'theme',
+  modes: {
+    // couleurs personnalisées
+    inverted: 'inverted'
+  },
   onChanged(color) {
     theme.global.name.value = themesNames.value[color];
   }
@@ -541,7 +547,7 @@ a:hover,
 a:active {
   color: inherit;
   text-decoration: none;
-  font-weight: 500;
+  font-weight: 600;
 }
 
 .skiplink:not(:focus) {

diff --git a/components/common/DomainSelector.vue b/components/common/DomainSelector.vue
@@ -1,29 +1,36 @@
 <template>
   <div class="domain-selector" role="list">
-    <v-btn flat @click="select('theses')" title="Rechercher des thèses" role="listitem">
-      <v-icon size="50" color="secondary">mdi-school</v-icon>
-      <span class="title">
-        <h2 :class="selected === 'theses' ? 'selected' : ''">
-          {{ $t("toutesTheses") }}
-        </h2>
-      </span>
-    </v-btn>
+    <div role="listitem">
+      <v-btn flat @click="select('theses')" :title="$t('rechercherTheses')" role="button">
+        <v-icon size="50" color="secondary">mdi-school</v-icon>
+        <span class="title">
+          <h2 :class="selected === 'theses' ? 'selected' : ''">
+            {{ $t("toutesTheses") }}
+          </h2>
+        </span>
+      </v-btn>
+    </div>
     <v-divider aria-hidden="true" vertical></v-divider>
-    <v-btn flat @click="select('personnes')" title="Rechercher des personnes liées aux thèses" role="listitem">
-      <v-icon size="50" color="secondary">mdi-account-multiple</v-icon>
-      <span class="title">
-        <h2>
-          {{ $t("toutesPersonnes") }}
-          <br />
-        <span :class="selected === 'personnes' ? 'selected' : ''" id="personnes-subtitle">{{ $t("toutesPersonnesSubtitle") }}</span></h2>
-      </span>
-    </v-btn>
+    <div role="listitem">
+      <v-btn flat @click="select('personnes')" :title="$t('rechercherPersonnes')" role="button">
+        <v-icon size="50" color="secondary">mdi-account-multiple</v-icon>
+<!--        Pas de sous-titre en anglais => souligner tout le titre-->
+        <span class="title" :class="(locale === 'en' && selected === 'personnes') ? 'selected' : ''">
+          <h2>
+            {{ $t("toutesPersonnes") }}
+            <br />
+          <span :class="selected === 'personnes' ? 'selected' : ''" id="personnes-subtitle">{{ $t("toutesPersonnesSubtitle") }}</span></h2>
+        </span>
+      </v-btn>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { ref, watch } from 'vue';
+import { useI18n } from "vue-i18n";
 
+const { t, locale } = useI18n();
 const selected = ref('theses');
 const router = useRouter();
 const currentRoute = useRoute();
@@ -68,26 +75,30 @@ watch(() => currentRoute.path, () => {
   background-color: transparent;
   margin: 1.5rem 0 1rem 0;
 
-  .v-btn {
+  div {
+    justify-content: space-evenly;
     flex: 0 1 48%;
     display: flex;
-    height: 100%;
-    background-color: transparent;
     padding: 0;
 
-    ::v-deep(.v-btn__content) {
-      display: flex;
-      flex-direction: column;
-      letter-spacing: 0.07em;
+    .v-btn {
+      background-color: transparent;
+      height: 100%;
 
-      h2 {
-        font-weight: 500;
-        font-size: 14px;
-        line-height: 48px;
+      ::v-deep(.v-btn__content) {
+        display: flex;
+        flex-direction: column;
+        letter-spacing: 0.07em;
 
-        @media #{ map-get(settings.$display-breakpoints, 'lg-and-up')} {
-          font-size: 18px;
-          line-height: 64px;
+        h2 {
+          font-weight: 500;
+          font-size: 14px;
+          line-height: 48px;
+
+          @media #{ map-get(settings.$display-breakpoints, 'lg-and-up')} {
+            font-size: 18px;
+            line-height: 64px;
+          }
         }
       }
     }

diff --git a/components/common/ExportButton.vue b/components/common/ExportButton.vue
@@ -1,9 +1,11 @@
 <template>
   <v-menu location="bottom">
     <template v-slot:activator="{ props }">
-      <v-btn flat append-icon="mdi-upload-box" variant="outlined" v-bind="props" role="listitem">
-        <p>{{ $t("theseView.exporter") }}</p>
-      </v-btn>
+      <div role="listitem" class="v-btn-container">
+        <v-btn flat append-icon="mdi-upload-box" variant="outlined" v-bind="props" role="button">
+          <p>{{ $t("theseView.exporter") }}</p>
+        </v-btn>
+      </div>
     </template>
     <v-list role="list">
       <v-list-item role="listitem"
@@ -12,7 +14,7 @@
       >
         <v-list-item-title class="export-titles">{{ $t(index) }}</v-list-item-title>
         <v-list-item-subtitle v-for="file in exportType" class="export-buttons">
-            <v-btn color="secondary-darken-3" density="compact" :href="file.url">
+            <v-btn color="secondary-darken-3" density="compact" :href="file.url" role="button">
               {{ file.title }}
             </v-btn>
         </v-list-item-subtitle>
@@ -60,13 +62,16 @@ exportTypeList.value = {
 <style scoped lang="scss">
 @use 'vuetify/settings';
 
-.v-btn {
-  text-transform: none;
+.v-btn-container {
   display: inline-flex;
-  padding: 0 1em;
-  letter-spacing: 0.5px;
-  max-width: 90%;
-  font-weight: 500;
+
+  .v-btn {
+    text-transform: none;
+    padding: 0 1em;
+    letter-spacing: 0.5px;
+    max-width: 90%;
+    font-weight: 500;
+  }
 
   :deep(.mdi-upload-box) {
     color: rgb(var(--v-theme-secondary-darken-2));

diff --git a/components/common/ExportQueryButton.vue b/components/common/ExportQueryButton.vue
@@ -2,7 +2,7 @@
   <v-menu location="bottom">
     <template v-slot:activator="{ props }">
       <v-btn class="main-btn" icon="mdi-upload-box" color="secondary-darken-2" variant="text"
-        title="Exporter les données" v-bind="props">
+        :title="$t('exportData')" v-bind="props">
       </v-btn>
     </template>
     <v-list role="list">

diff --git a/components/common/FooterCustom.vue b/components/common/FooterCustom.vue
@@ -3,69 +3,70 @@
     <div class="footer-top">
       <div class="theses-description footer-content">
         <h1 aria-hidden="true">theses.fr</h1>
-        <span>{{ $t("footer.texte") }}</span>&nbsp;<a href="/apropos" alt="En savoir plus sur Theses.fr"><strong>{{
+        <span>{{ $t("footer.texte") }}</span>&nbsp;
+        <a href="/apropos" :alt="$t('apropos.aboutLink')"><strong>{{
           $t("footer.plus")
         }}</strong></a>
       </div>
       <div class="links-container footer-content">
-        <h1 aria-hidden="true">
-          <v-icon title="Lien externe">mdi-open-in-new</v-icon>
+        <h1 aria-hidden="true" id="footer-link-title">
+          <v-icon :title="$t('externalLink')">mdi-open-in-new</v-icon>
           {{ $t("accesDirect") }}
         </h1>
-        <div class="list-1" role="list">
+        <div class="list-1" role="list" aria-labelledby="footer-link-title">
           <div role="presentation" class="colonne1">
             <div class="list-item" role="listitem">
               <span class="first-column-bullet"><span class="orange-link">{{ ">\xa0" }}</span></span>
               <span><a href="https://www.data.gouv.fr/fr/datasets/theses-soutenues-en-france-depuis-1985/"
                   target="_blank"
-                  title="Accéder sur le site data.gouv.fr à l’extraction complète des données disponibles sur thèses.fr et relatives aux thèses soutenues">
+                  :title="$t('apropos.dataGouv')">
                   {{ $t("footer.opendata") }}</a></span>
             </div>
             <div class="list-item" role="listitem">
               <span class="first-column-bullet"><span class="orange-link">{{ ">\xa0" }}</span></span>
               <span><a href="https://api.gouv.fr/producteurs/abes/"
                        target="_blank"
-                       title="Accéder sur le site api.gouv.fr aux API de thèses.fr">
+                       :title="$t('footer.apiGouv')">
                     {{ $t("footer.apiThesesfr") }}</a></span>
             </div>
             <div class="list-item" role="listitem">
               <span class="first-column-bullet"><span class="orange-link">{{ ">\xa0" }}</span></span>
               <span><a href="https://www.idref.fr/" target="_blank"
-                  title="Accéder à IdRef, la base des identifiants et des référentiels utilisés pour l’enseignement supérieur et la recherche">{{
+                  :title="$t('footer.idRef')">{{
           $t("footer.idRref")
         }}</a></span>
             </div>
             <div class="list-item" role="listitem">
               <span class="first-column-bullet"><span class="orange-link">{{ ">\xa0" }}</span></span>
               <span><a href="https://documentation.abes.fr/aidetheses/thesesfr/index.html" target="_blank"
-                  title="Accéder à la documentation de thèses.fr">{{
+                  :title="$t('footer.accesDoc')">{{
           $t("footer.doc") }}</a></span>
             </div>
           </div>
           <div role="presentation" class="colonne2">
             <div class="list-item" role="listitem">
               <span class="first-column-bullet"><span class="orange-link">{{ ">\xa0" }}</span></span>
               <span><a href="http://www.sudoc.abes.fr/cbs/" target="_blank"
-                  title="Accéder au Sudoc, le catalogue collectif des bibliothèques universitaires françaises">{{
+                  :title="$t('footer.accesSudoc')">{{
                     $t("footer.catalogue") }}</a></span>
             </div>
             <div class="list-item" role="listitem">
               <span class="first-column-bullet"><span class="orange-link">{{ ">\xa0" }}</span></span>
               <span><a href="https://documentation.abes.fr/aidetheses/thesesfr/index.html#TEF" target="_blank"
-                  title="Accéder à la recommandation AFNOR TEF, le format de description des thèses de doctorat électroniques françaises">{{
+                  :title="$t('footer.accesTEF')">{{
                     $t("footer.tef")
                   }}</a></span>
             </div>
             <div class="list-item" role="listitem">
               <span class="first-column-bullet"><span class="orange-link">{{ ">\xa0" }}</span></span>
               <span><a href="https://stp.abes.fr/node/3?origine=thesesFr" target="_blank"
-                  title="Accéder au guichet d’assistance de l’Abes">{{
+                  :title="$t('footer.accesAssistance')">{{
                     $t("footer.assistance") }}</a></span>
             </div>
             <div class="list-item" role="listitem">
               <span class="first-column-bullet"><span class="orange-link">{{ ">\xa0" }}</span></span>
               <span><a href="http://search.ndltd.org/" target="_blank"
-                       title="Global ETD Search - Les thèses électroniques dans le monde">{{
+                       :title="$t('footer.accesGlobalETD')">{{
                   $t("footer.globalETD") }}</a></span>
             </div>
           </div>
@@ -82,28 +83,28 @@
     <v-card-text class="footerBottom">
         <div class="text-center text-md-left pa-0 slogan">
           {{ new Date().getFullYear() }} —
-          theses.fr, le moteur de recherche des thèses françaises
+          theses.fr, {{ $t('slogan') }}
         </div>
         <div class="text-center text-md-right pa-0">
           <v-divider vertical class="my-1"></v-divider>
           <v-btn flat plain color="transparent" size="small" target="_blank"
             href="https://abes.fr/pages-donnees-personnelles/thesesfr.html"
-            title="Accéder sur le site de l’Abes aux informations relatives au traitement, par theses.fr, des données personnelles">
+            :title="$t('footer.accesDonnees')">
             {{ $t("donnees") }}
           </v-btn>
           <v-divider vertical class="my-1"></v-divider><span class="mobileHide">|</span>
           <v-btn flat color="transparent" size="small" target="_blank"
             href="https://abes.fr/pages-cgu/conditions-generales-utilisation-sites-abes.html"
-            title="Accéder sur le site de l’Abes aux Conditions Générales d’Utilisation du site theses.fr">{{ $t("CGU") }}
+            :title="$t('footer.accesCGU')">{{ $t("CGU") }}
           </v-btn>
           <v-divider vertical class="my-1"></v-divider><span class="mobileHide">|</span>
           <v-btn flat color="transparent" size="small" href="https://abes.fr/pages-mentions-legales/theses.html"
-            target="_blank" title="Accéder sur le site de l’Abes aux mentions légales de theses.fr">
+            target="_blank" :title="$t('footer.accesMention')">
             {{ $t("mentions") }}
           </v-btn>
           <v-divider vertical class="my-1"></v-divider><span class="mobileHide">|</span>
           <v-btn flat color="transparent" size="small" target="_blank" href="https://abes.fr/pages-accessibilite/theses.html"
-            title="Accéder sur le site de l’Abes aux informations relatives à l’accessibilité numérique du site theses.fr">
+            :title="$t('footer.accesAccessibilite')">
             {{ $t("accessibilite") }}
           </v-btn>
         </div>
@@ -266,11 +267,13 @@
   .footerBottom {
     width: 100%;
     background-color: rgb(var(--v-theme-fond-noir));
-    color: rgb(var(--v-theme-white-text));
+    color: rgb(var(--v-theme-white-text-footer));
 
     display: grid;
     grid-template-columns: 1fr 1fr;
 
+    border-top: rgb(var(--v-theme-gris-clair)) solid 1px;
+
     @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
       display: flex;
       flex-direction: column;