Skip to content

Commit

Permalink
Merge pull request #222 from abes-esr/test
Browse files Browse the repository at this point in the history 
THE-1268 Accessibilité focus + fix graphique
  • Loading branch information
@theo-chmbn
theo-chmbn authored Apr 25, 2024
2 parents 056336f + 67e54c8 commit 23ba86a
Show file tree
Hide file tree
Showing 13 changed files with 398 additions and 216 deletions.
76 changes: 26 additions & 50 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,75 +1,51 @@
# Nuxt 3 Minimal Starter
# 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/)

Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
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.

## Setup
Ce dépôt héberge le code source de l'interface utilisateur du site theses.fr.

Make sure to install the dependencies:
URL publique : https://theses.fr

```bash
# npm
npm install
![logo theses.fr](https://theses.fr/icone-theses-beta.svg)

# pnpm
pnpm install
L'application complète peut être déployée via Docker à l'aide du dépôt https://github.com/abes-esr/theses-docker

# yarn
yarn install
## Architecture technique

# bun
bun install
```
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) )

## Development Server
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)
* https://github.com/abes-esr/theses-api-diffusion pour la mise à disposition des documents (PDFs et autres)

Start the development server on `http://localhost:3000`:
## Utilisation du projet

### Installation des dépendances

```bash
# npm
npm run dev

# pnpm
pnpm run dev

# yarn
yarn dev

# bun
bun run dev
npm install
```

## Production
### Démarrage du serveur local

Build the application for production:
Start the development server on `http://localhost:3000`:

```bash
# npm
npm run build

# pnpm
pnpm run build

# yarn
yarn build

# bun
bun run build
npm run dev
```

Locally preview production build:
### Production

Build et packaging de l'application pour la production :

```bash
# npm
npm run preview

# pnpm
pnpm run preview

# yarn
yarn preview

# bun
bun run preview
npm run build
```

Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
Plus d'infos sur le déploiement dans la documentation de Nuxt 3 [deployment documentation](https://nuxt.com/docs/getting-started/deployment) .
27 changes: 26 additions & 1 deletion app.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
<template>
<v-theme-provider theme="colorMode">
<v-app :class="{ 'opendys': opendys, 'interlignes': interlignes, 'justification': justification }">
<div tabindex="0" ref="skipLink">
<a href="#searchbar" class="skiplink">{{ $t('skip') }}</a>
</div>
<CommonHeaderCustom></CommonHeaderCustom>
<v-main>
<NuxtPage></NuxtPage>
Expand Down Expand Up @@ -46,6 +49,7 @@ const themesNames = ref({
});
const { mobile } = useDisplay();
const skipLink =ref(null);
const colorMode = useColorMode({
onChanged(color) {
Expand All @@ -54,6 +58,7 @@ const colorMode = useColorMode({
});
onMounted(() => {
skipLink.value.focus({focusVisible: false});
opendys.value = getFromLocalStorage("opendys", false);
interlignes.value = getFromLocalStorage("interlignes", false);
justification.value = getFromLocalStorage("justification", false);
Expand Down Expand Up @@ -254,11 +259,19 @@ main {
color: rgb(var(--v-theme-primary));
font-size: 20px;
font-family: "Roboto-Bold", sans-serif;
font-weight: 500;
font-weight: 500;;
a {
text-decoration: none;
color: rgb(var(--v-theme-primary));
display: grid;
grid-template-columns: 2fr 1fr 7fr;
margin-bottom: 0.5em;
span {
align-self: center;
}
}
}
}
Expand Down Expand Up @@ -528,4 +541,16 @@ a:active {
text-decoration: none;
font-weight: 500;
}
.skiplink:not(:focus) {
position: fixed;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
</style>
2 changes: 1 addition & 1 deletion components/common/HeaderCustom.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ watch(changeContrast, newValue => {
header {
position: relative !important;
height: 120px;
margin-top: 10px;
padding-top: 10px;
margin-bottom: 10px;
@media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
Expand Down
67 changes: 53 additions & 14 deletions components/common/HeaderMobile.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@
<nav class="mobile-nav-bar" v-if="isReady" role="list">
<div class="left-side-buttons" role="presentation">
<!-- Bouton menu burger -->
<div class="buttons" role="listitem" tabindex="0" :aria-label="$t('menu')">
<v-icon :title="$t('menu')" @click="activateMenu" size="35px" :class="{ 'logo-active': showMenu }">mdi-menu
<button class="buttons" @click="activateMenu" role="listitem" :aria-label="$t('menu')" :title="$t('menu')">
<span class="sr-only">{{ $t('menu') }}</span>
<v-icon :title="$t('menu')" size="35px" :class="{ 'logo-active': showMenu }">mdi-menu
</v-icon>
</div>
</button>
<v-btn variant="plain" @click="dialog = true" class="buttons language-accessibility-button"
:title="$t('access.btn')" role="listitem">
<img :alt="$t('header.accessibility')" id="logo-handicap-visuel"
Expand All @@ -29,11 +30,12 @@
</v-icon>
</button>
<!-- Bouton menu recherche/selecteur these/personnes-->
<div v-if="type !== 'home'" class="buttons" role="listitem" :title="$t('rechercher')" tabindex="0">
<v-icon :title="$t('rechercher')" @click="activateSearchBar" size="35px"
<button v-if="type !== 'home'" @click="activateSearchBar" class="buttons" role="listitem" :title="$t('rechercher')">
<span class="sr-only">{{ $t('rechercher') }}</span>
<v-icon :title="$t('rechercher')" size="35px"
:class="{ 'logo-active': showSearchBar }">mdi-magnify
</v-icon>
</div>
</button>
</div>
</nav>
<!-- Logo -->
Expand All @@ -44,8 +46,7 @@
</NuxtLink>
<!-- Menu burger mobile -->
<v-fade-transition>
<div v-show="showMenu" class="expanded-search-bar-container white-containers" role="list">

<div v-show="showMenu" ref="expandedMenu" tabindex="0" class="expanded-search-bar-container white-containers" role="list">
<div class="languages-btn-container">
<!--
<div class="languages-btn">
Expand Down Expand Up @@ -80,20 +81,19 @@
</div>
-->
<div class="menu-text-element" role="listitem">
<a href="https://stp.abes.fr/node/3?origine=thesesFr" target="_blank" :alt='$t("header.assistance")'>
<v-btn :title='$t("header.assistance")' size="large" variant="text" icon>
<a href="https://stp.abes.fr/node/3?origine=thesesFr" target="_blank" :alt='$t("header.assistance")' :title='$t("header.assistance")'>
<img :alt="$t('header.assistance')" id="logo-assistance" class="logos-droite"
:src="'/icone-assistance-' + colorMode + '.svg'" />
</v-btn>
<span></span>
<span>{{ $t('assistance') }}</span>
</a>
</div>
<div class="menu-text-element" role="listitem">
<a href="http://documentation.abes.fr/aidethesesfr/index.html" :alt='$t("header.doc")'
target="_blank"><v-btn :title='$t("header.doc")' size="large" variant="text" icon>
target="_blank" :title='$t("header.doc")'>
<img :alt="$t('header.doc')" id="logo-documentation" class="logos-droite"
:src="'/icone-documentation-' + colorMode + '.svg'" />
</v-btn>
<span></span>
<span>{{ $t('documentation') }}</span>
</a>
</div>
Expand All @@ -104,7 +104,7 @@
<!-- Menu recherche/selecteur these/personnes-->
<v-fade-transition>
<div v-if="type !== 'home'" v-show="showSearchBar" class="expanded-search-bar-container white-containers">
<div class="expanded-search-bar">
<div class="expanded-search-bar" ref="expandedSearchBar">
<LazyCommonDomainSelector></LazyCommonDomainSelector>
<LazyGenericSearchBar :loading="loading" @onError="displayError" />
</div>
Expand Down Expand Up @@ -140,6 +140,10 @@ const { locale } = useI18n();
const isReady = ref(false);
const changeContrast = ref(false);
// Elements du DOM
const expandedMenu = ref(null);
const expandedSearchBar = ref(null);
const themesNames = ref({
"light": "abesLightTheme",
"dark": "abesDarkTheme"
Expand Down Expand Up @@ -246,6 +250,41 @@ const justification = useState('justification');
watch(changeContrast, newValue => {
colorMode.value = newValue ? 'dark' : 'light';
});
onMounted(() => {
// Observer les éléments v-fade-transition avec Intersection Observer
// Menu
const observer1 = new IntersectionObserver((entries) => {
if(entries[0].isIntersecting) {
expandedMenu.value.focus();
}
});
// Searchbar
const observer2 = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
if (document.getElementsByClassName("advanced-input-fields").length > 0) {
const firstInputElementInAdvancedForm = document.getElementsByClassName("advanced-input-fields")[0].getElementsByTagName("input")[0];
if (firstInputElementInAdvancedForm !== null) {
firstInputElementInAdvancedForm.focus();
}
} else {
const searchbar = document.getElementById('searchbar');
if(searchbar !== null) {
searchbar.focus();
}
}
}
});
// Commencer à observer les éléments
if (expandedMenu.value !== null) {
observer1.observe(expandedMenu.value);
}
if (expandedSearchBar.value !== null) {
observer2.observe(expandedSearchBar.value);
}
});
</script>

<style scoped lang="scss">
Expand Down
Loading

0 comments on commit 23ba86a

Please sign in to comment.