front: add a help text when displaying a "mobile" comp on desktop

tournesol-app · May 16, 2024 · ab2f7c0 · ab2f7c0
1 parent 9ad2a65
commit ab2f7c0
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 20 deletions.
diff --git a/frontend/public/locales/en/translation.json b/frontend/public/locales/en/translation.json
@@ -29,8 +29,8 @@
     "nbContributors_other": "{{count}} contributors",
     "criteriaRatedHigh": "Rated high:",
     "criteriaRatedLow": "Rated low:",
-    "nbViews": "{{nbViews}} views",
     "seeRecommendedVideosSameUploader": "See recommended videos of the same uploader",
+    "nbViews": "{{nbViews}} views",
     "nComparisonsByYou_one": "{{count}} comparison by you",
     "nComparisonsByYou_other": "{{count}} comparisons by you",
     "notYetComparedByYou": "Not yet compared by you",
@@ -93,10 +93,6 @@
     "inactivePollComparisonCannotBeSubmittedOrEdited": "No comparison can be submitted or modified.",
     "comparisonCriteria": "Comparison criteria"
   },
-  "comparisonCriteriaButtons": {
-    "previousQualityCriterion": "Previous quality criterion",
-    "nextQualityCriterion": "Next quality criterion"
-  },
   "entityContext": {
     "entityAtheAssociationWouldLikeToGiveYouContext": "<0>{{entityName}} A</0> - The Tournesol association would like to give you some context.",
     "entityBtheAssociationWouldLikeToGiveYouContext": "<0>{{entityName}} B</0> - The Tournesol association would like to give you some context.",
@@ -107,10 +103,17 @@
     "hideHelp": "Hide the help",
     "showHelp": "Show help for comparisons"
   },
+  "comparisonInputStrategy": {
+    "thisComparisonWasMadeOnAMobileDevice": "This comparison was made on a mobile device. The mobile interface exceptionally replaces the usual interface."
+  },
   "comparisons": {
     "goToComparison": "Go to comparison"
   },
   "submit": "submit",
+  "comparisonCriteriaButtons": {
+    "nextQualityCriterion": "Next quality criterion",
+    "previousQualityCriterion": "Previous quality criterion"
+  },
   "comparisonSeries": {
     "skipTheSeries": "Skip the series"
   },

diff --git a/frontend/public/locales/fr/translation.json b/frontend/public/locales/fr/translation.json
@@ -31,8 +31,8 @@
     "nbContributors_other": "{{count}} contributeurs",
     "criteriaRatedHigh": "Noté haut:",
     "criteriaRatedLow": "Noté bas:",
-    "nbViews": "{{nbViews}} vues",
     "seeRecommendedVideosSameUploader": "Voir les vidéos recommandées de cette chaîne",
+    "nbViews": "{{nbViews}} vues",
     "nComparisonsByYou_one": "{{count}} comparaison par vous",
     "nComparisonsByYou_many": "{{count}} comparaisons par vous",
     "nComparisonsByYou_other": "{{count}} comparaisons par vous",
@@ -97,10 +97,6 @@
     "inactivePollComparisonCannotBeSubmittedOrEdited": "Aucune comparaison ne peut être ajoutée ou modifiée.",
     "comparisonCriteria": "Critères de comparaison"
   },
-  "comparisonCriteriaButtons": {
-    "previousQualityCriterion": "Critère de qualité précédent",
-    "nextQualityCriterion": "Critère de qualité suivant"
-  },
   "entityContext": {
     "entityAtheAssociationWouldLikeToGiveYouContext": "<0>{{entityName}} A</0> - L'association Tournesol souhaite vous apporter du contexte.",
     "entityBtheAssociationWouldLikeToGiveYouContext": "<0>{{entityName}} B</0> - L'association Tournesol souhaite vous apporter du contexte.",
@@ -111,10 +107,17 @@
     "hideHelp": "Cacher l'aide",
     "showHelp": "Montrer l'aide pour les comparaisons"
   },
+  "comparisonInputStrategy": {
+    "thisComparisonWasMadeOnAMobileDevice": "Cette comparaison a été faite sur un périphérique mobile. L'interface mobile remplace exceptionnellement l'interface habituelle."
+  },
   "comparisons": {
     "goToComparison": "Voir la comparaison"
   },
   "submit": "enregistrer",
+  "comparisonCriteriaButtons": {
+    "nextQualityCriterion": "Critère de qualité suivant",
+    "previousQualityCriterion": "Critère de qualité précédent"
+  },
   "comparisonSeries": {
     "skipTheSeries": "Passer la série"
   },

diff --git a/frontend/src/features/comparisons/ComparisonInputStrategy.tsx b/frontend/src/features/comparisons/ComparisonInputStrategy.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
-import { Box, Paper } from '@mui/material';
+import { Alert, Box, Paper } from '@mui/material';
 
 import { useCurrentPoll } from 'src/hooks';
 import {
@@ -50,6 +51,7 @@ const ComparisonInputStrategy = ({
   onSubmit,
   isComparisonPublic,
 }: ComparisonInputStrategyProps) => {
+  const { t } = useTranslation();
   const { options } = useCurrentPoll();
 
   const mainScoreMax = getCriterionScoreMax(
@@ -65,15 +67,24 @@ const ComparisonInputStrategy = ({
   return (
     <>
       {buttonsUsed || fallBackToButtons ? (
-        <Box display="flex" flexDirection="column" rowGap={1}>
-          <CriteriaButtons
-            uidA={uidA || ''}
-            uidB={uidB || ''}
-            onSubmit={onSubmit}
-            initialComparison={initialComparison}
-          />
-          <CriteriaButtonsScoreReview initialComparison={initialComparison} />
-        </Box>
+        <>
+          {!isMobileDevice() && (
+            <Alert icon={false} severity="info">
+              {t(
+                'comparisonInputStrategy.thisComparisonWasMadeOnAMobileDevice'
+              )}
+            </Alert>
+          )}
+          <Box display="flex" flexDirection="column" rowGap={1}>
+            <CriteriaButtons
+              uidA={uidA || ''}
+              uidB={uidB || ''}
+              onSubmit={onSubmit}
+              initialComparison={initialComparison}
+            />
+            <CriteriaButtonsScoreReview initialComparison={initialComparison} />
+          </Box>
+        </>
       ) : (
         <Paper sx={{ py: 2 }}>
           <ComparisonSliders