Use internationalization for tutorial texts

mapswipe · Oct 9, 2024 · dabd424 · dabd424
1 parent 267a964
commit dabd424
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 13 deletions.
diff --git a/src/components/CompareProjectTask.vue b/src/components/CompareProjectTask.vue
@@ -49,6 +49,7 @@ export default defineComponent({
             <h2 v-show="isHovering">{{ $t('compareProject.before') }}</h2>
           </v-overlay>
           <image-tile
+            v-if="task.url"
             :url="task.url"
             :spinner="true"
             :maxSize="$vuetify.display.smAndDown ? '35vh' : '65vh'"
@@ -75,6 +76,7 @@ export default defineComponent({
             <h2 v-show="isHovering">{{ $t('compareProject.after') }}</h2>
           </v-overlay>
           <image-tile
+            v-if="task.urlB"
             :url="task.urlB"
             :spinner="true"
             :maxSize="$vuetify.display.smAndDown ? '35vh' : '80vh'"

diff --git a/src/components/CompareProjectTutorial.vue b/src/components/CompareProjectTutorial.vue
@@ -219,12 +219,12 @@ export default defineComponent({
               v-if="userAttempts > 1 && !answeredCorrectly && !answersRevealed"
               @click="showAnswer"
             >
-              Show answer
+              {{ $t('projectTutorial.showAnswer') }}
             </v-btn>
             <v-btn
               v-if="!hasCompletedAllTasks && answeredCorrectly" @click="nextTask"
             >
-              Next task
+              {{ $t('projectTutorial.nextTask') }}
             </v-btn>
           </template>
         </v-alert>

diff --git a/src/components/FindProjectTutorial.vue b/src/components/FindProjectTutorial.vue
@@ -317,10 +317,10 @@ export default defineComponent({
               v-if="userAttempts > 1 && !answeredCorrectly && !answersRevealed"
               @click="showAnswer"
             >
-              Show answer
+              {{ $t('projectTutorial.showAnswer') }}
             </v-btn>
             <v-btn v-if="!hasCompletedAllTasks && answeredCorrectly" @click="nextTask">
-              Next task
+              {{ $t('projectTutorial.nextTask') }}
             </v-btn>
           </template>
         </v-alert>

diff --git a/src/components/ProjectInfo.vue b/src/components/ProjectInfo.vue
@@ -95,14 +95,21 @@ export default defineComponent({
   <v-dialog v-model="dialog" height="calc(100% - 32px)" max-height="100vh" width="calc(100% - 32px)" max-width="1024" persistent>
     <v-card class="pa-2" height="100%">
       <v-tabs v-model="activeTab">
-        <v-tab :text="$t('projectInstructions.howToContribute')" value="instructions"></v-tab>
+        <v-tab
+          :text="$t('projectInstructions.howToContribute')"
+          value="instructions"
+        />
         <v-tab
           v-for="(page, index) in informationPages"
           :text="page.title"
           :value="index"
           :key="page.pageNumber"
-        ></v-tab>
-        <v-tab v:if="hasTutorialSlot" value="tutorial">Tutorial</v-tab>
+        />
+        <v-tab
+          v:if="hasTutorialSlot"
+          value="tutorial"
+          :text="$t('projectInstructions.tutorial')"
+        />
       </v-tabs>
       <v-divider />
       <v-tabs-window v-model="activeTab" style="height: 100%; overflow-y: auto">

diff --git a/src/components/TutorialCompletionCard.vue b/src/components/TutorialCompletionCard.vue
@@ -13,13 +13,13 @@ export default defineComponent({
       mdi-check-circle
     </v-icon>
     <v-card-title>
-      You're ready to start MapSwiping!
+      {{ $t('projectTutorial.completionTitle') }}
     </v-card-title>
     <v-card-text class="tutorial-completion-description">
-      You're now equipped with all you need to contribute to humanitarian mapping using the app. You can come back anytime for refresher.
+      {{ $t('projectTutorial.completionDescription') }}
     </v-card-text>
     <v-btn @click="$emit('onStartMappingClick')">
-      Start mapping
+      {{ $t('projectTutorial.startMapping') }}
     </v-btn>
   </v-card>
 </template>

diff --git a/src/components/ValidateProjectTutorial.vue b/src/components/ValidateProjectTutorial.vue
@@ -234,12 +234,12 @@ export default defineComponent({
               v-if="userAttempts > 1 && !answeredCorrectly && !answersRevealed"
               @click="showAnswer"
             >
-              Show answer
+              {{ $t('projectTutorial.showAnswer') }}
             </v-btn>
             <v-btn
               v-if="!hasCompletedAllTasks && answeredCorrectly" @click="nextTask"
             >
-              Next task
+              {{ $t('projectTutorial.nextTask') }}
             </v-btn>
           </template>
         </v-alert>

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -155,7 +155,8 @@
     "toggleOpacityInstruction": "For a clearer view of the underlying imagery, toggle the opacity of the overlay",
     "useButtonsToNavigate": "Use buttons to navigate",
     "whereIamTitle": "Where am I mapping?",
-    "whereIamInstruction": "Open a map of where you are currently contributing"
+    "whereIamInstruction": "Open a map of where you are currently contributing",
+    "tutorial": "Tutorial"
   },
   "findProjectInstructions": {
     "classifyTitle": "Click or tap to classify",
@@ -202,5 +203,12 @@
     "drawNewFeature": "Draw new features",
     "modifyFeature": "Modify features",
     "deleteFeature": "Delete features"
+  },
+  "projectTutorial": {
+    "showAnswer": "Show answer",
+    "nextTask": "Next task",
+    "completionTitle": "You're ready to start MapSwiping!",
+    "completionDescription": "You're now equipped with all you need to contribute to humanitarian mapping using the app. You can come back anytime for refresher.",
+    "startMapping": "Start mapping"
   }
 }