From 36209fd48795dcc04e8ed9cf6cb42d8515460511 Mon Sep 17 00:00:00 2001
From: Serge Bibauw <sbibauw@gmail.com>
Date: Thu, 24 Apr 2025 10:03:02 +0200
Subject: [PATCH] Improve task/topic selector appearance
---
frontend/src/lang/fr.json | 11 ++--
.../src/routes/sessions/[id]/+page.svelte | 54 ++++++++++---------
2 files changed, 35 insertions(+), 30 deletions(-)
diff --git a/frontend/src/lang/fr.json b/frontend/src/lang/fr.json
index b0a40ba3..331a6e4a 100644
--- a/frontend/src/lang/fr.json
+++ b/frontend/src/lang/fr.json
@@ -403,17 +403,20 @@
"typingTests": "Tests de frappe"
},
"tasks": {
+ "title": "Nouvelle tâche cible",
"createTitle": "Créer une nouvelle tâche",
"editTitle": "Modifier la tâche",
"level": "Niveau CEFR",
"shortTitle": "Nom de la tâche (max 5 mots)",
- "instructions": "Instructions le tuteur (peut être sur plusieurs lignes)",
- "learnerInstructions": "Instructions pour l'apprenant (peut être sur plusieurs lignes)",
- "examples": "Exemples (peut être sur plusieurs lignes)",
+ "instructions": "Instructions pour le tuteur (plusieurs lignes si besoin)",
+ "learnerInstructions": "Instructions pour l'apprenant (plusieurs lignes si besoin)",
+ "examples": "Exemples (plusieurs lignes si besoin)",
"create": "Créer une nouvelle tâche",
"taskInProgress": "Tâche en cours",
"taskFinished": "Tâche terminée avec succès",
- "statusFail": "Echec du changement de status de la tâche"
+ "statusFail": "Echec du changement de status de la tâche",
+ "startTask": "Commencer cette tâche",
+ "achieveTask": "Tâche achevée"
},
"button": {
"create": "Créer",
diff --git a/frontend/src/routes/sessions/[id]/+page.svelte b/frontend/src/routes/sessions/[id]/+page.svelte
index 796ad4b6..caad2967 100644
--- a/frontend/src/routes/sessions/[id]/+page.svelte
+++ b/frontend/src/routes/sessions/[id]/+page.svelte
@@ -120,11 +120,11 @@
{/each}
</div>
- <h2 class="text-lg truncate font-semibold text-gray-700 text-center border-t pt-4 mt-4">
- {$t('utils.words.tasks')}
- </h2>
{#if !taskInProgress || !currentTask}
{#if user.is_tutor}
+ <h2 class="text-lg truncate font-semibold text-gray-700 text-center border-t pt-4 mt-4">
+ 🎯 {$t('tasks.title')}
+ </h2>
<div class="flex gap-2">
<select class="select select-bordered w-32" bind:value={level}>
<option value="all">{$t('utils.words.all')}</option>
@@ -150,38 +150,40 @@
</select>
</div>
<button class="btn mt-2 w-full btn-primary" onclick={startTask}>
- {$t('button.select')}
+ {$t('tasks.startTask')}
</button>
{/if}
{:else}
<p class="mt-4 font-bold">
- {$t('tasks.taskInProgress')}:
+ 🎯 {$t('tasks.taskInProgress')}:
</p>
<p>
{currentTask.shortTitle}
</p>
- {#if currentTask.instructions}
- <p class="mt-2 font-bold">
- {$t('utils.words.instructions')}:
- </p>
- <p>
- {currentTask.instructions}
- </p>
+ {#if user.is_tutor}
+ {#if currentTask.instructions}
+ <p>
+ {currentTask.instructions}
+ </p>
+ <p class="mt-2 text-sm">
+ {currentTask.examples}
+ </p>
+ <div class="flex gap-2 mt-4">
+ <button class="btn flex-grow" onclick={cancelTask}>
+ 🔙 {$t('button.cancel')}
+ </button>
+ <button class="btn btn-primary flex-grow" onclick={finishTask}>
+ âœ”ï¸ {$t('tasks.achieveTask')}
+ </button>
+ </div>
+ {/if}
+ {:else}
+ {#if currentTask.learnerInstructions}
+ <p>
+ {currentTask.learnerInstructions}
+ </p>
+ {/if}
{/if}
- <p class="mt-2 font-bold">
- {$t('utils.words.examples')}:
- </p>
- <p>
- {currentTask.examples}
- </p>
- <div class="flex gap-2 mt-4">
- <button class="btn flex-grow" onclick={cancelTask}>
- {$t('button.cancel')}
- </button>
- <button class="btn btn-primary flex-grow" onclick={finishTask}>
- {$t('button.finish')}
- </button>
- </div>
{/if}
</div>
--
GitLab