[FEATURE] Accompagner l'utilisateur mobile si son expérience risque d'être dégradée (PIX-13746) (PIX-13909)

[yannbertrand]

🦄 Problème

En tant qu’utilisateur je souhaite pouvoir être informé si mon expérience sur mon module de formation va être dégradée afin de pouvoir changer de device si besoin.

🤖 Proposition

Dans les modules concernés, afficher une modale au lancement pour prévenir que l'expérience pourra ne pas être optimale.

Techniquement, on affiche la modale uniquement si la propriété tabletSupport du module n'est pas comfortable et en dessous du breakpoint tablette.

Les événements de tracking ont été mis à jour ainsi :

• "Click sur le bouton Commencer" devient "Click sur le bouton Commencer un passage"
• En petit écran sur les modules concernés :
  • Nouvel événement "Ouvre la modale d'alerte de largeur d'écran"
  • Nouvel événement "Ferme la modale d'alerte de largeur d'écran" peu importe la manière de fermer
  • Nouvel événement "Click sur le bouton Commencer un passage en petit écran"

On en profite pour réaligner les breakpoints utilisés en JS avec le code de Pix UI.

On s'est rendu compte que les boutons dans les modales n'étaient pas wrappés en mobile, on a profité d'une technique de @Jeyffrey pour mettre en commun ce comportement dans un composant ResponsiveUlWideWrap. On le réutilise également sur les éléments Download.

🌈 Remarques

On a utilisé la librairie ember-responsive pour pouvoir tester automatiquement les 2 usages.

💯 Pour tester

Sur un module concerné, par exemple sur bien-ecrire-son-adresse-mail :

• La page de détails ne doit pas avoir changé, en "mobile/tablette" ou "desktop".

Sur un module concerné, par exemple le didacticiel :

• En résolution "mobile/tablette", la nouvelle modale doit s'afficher.
• En résolution "desktop", on accède au module comme avant.
• Vérifier aussi que les boutons de l'élément "Download" reste accessible que ce soit en mobile/tablette ou desktop.

[pix-bot-github]

Une fois les applications déployées, elles seront accessibles via les liens suivants :

• App (.fr)
• App (.org)
• Orga (.fr)
• Orga (.org)
• Certif (.fr)
• Certif (.org)
• Junior
• Admin
• API
• Audit Logger

Les variables d'environnement seront accessibles via les liens suivants :

• scalingo front
• scalingo api
• scalingo audit-logger

[jujumathieu]

Quand j'affiche la fenêtre à un format de smartphone/tablette "connu", la modale s'affiche bien (et la navigation clavier fonctionne bien). En revanche, si je choisi le mode "responsive" de l'inspecteur chrome, le bouton "revenir aux détails" mord sur la gauche de l'écran à partir du moment où la largeur de l'écran fait moins de 360px..

[yannbertrand]

Quand j'affiche la fenêtre à un format de smartphone/tablette "connu", la modale s'affiche bien (et la navigation clavier fonctionne bien). En revanche, si je choisi le mode "responsive" de l'inspecteur chrome, le bouton "revenir aux détails" mord sur la gauche de l'écran à partir du moment où la largeur de l'écran fait moins de 360px..

C'est corrigé, merci pour l'alerte ! On l'a également mis en place sur les éléments "Download" pour que les boutons de téléchargement aient le même comportement en mobile.

[jujumathieu]

C'est bon pour la responsivité des boutons de téléchargement de doc et de la modale. Bien joué !