diff --git a/frontend/src/lang/en.json b/frontend/src/lang/en.json index 2ab57bab4f7c261c0cde5e657d5fd869e2912ec5..a2d3936ccab2a4f782593fe5f4e7c8e02a1493a0 100644 --- a/frontend/src/lang/en.json +++ b/frontend/src/lang/en.json @@ -98,7 +98,7 @@ "homeLanguage": "First language", "education": { "title": "What is the highest grade, degree or level of education you achieved?", - "na": "None", + "NoEducation": "None", "PrimarySchool": "Primary school", "SecondarySchool": "Secondary school/High school", "NonUni": "Non-university degree", diff --git a/frontend/src/lang/fr.json b/frontend/src/lang/fr.json index 44bb7fd9461344406cb1fdec8f0f17c9b52b2461..c0622dc8d58fa5c98b6e9bd8e8e7f52b1e35ec52 100644 --- a/frontend/src/lang/fr.json +++ b/frontend/src/lang/fr.json @@ -210,7 +210,7 @@ "homeLanguage": "Première Langue", "education": { "title": "Quel est le grade, le diplôme ou le niveau d'études le plus élevé que vous ayez obtenu ?", - "na": "Aucun", + "NoEducation": "Aucun", "PrimarySchool": "École primaire", "SecondarySchool": "École secondaire", "NonUni": "Diplôme non universitaire", diff --git a/frontend/src/lib/components/surveys/dropdown.svelte b/frontend/src/lib/components/surveys/dropdown.svelte index 915fabf43c644401f40d669c3e7629e32f8c9edb..e11c67c5007cdeb69f0e6ab5a106458b75ab1ae6 100644 --- a/frontend/src/lib/components/surveys/dropdown.svelte +++ b/frontend/src/lib/components/surveys/dropdown.svelte @@ -6,7 +6,7 @@ </script> <select - class="select select-bordered !ml-0" + class="w-full select select-bordered !ml-0" id="dropdown" name="dropdown" bind:value={option} diff --git a/frontend/src/routes/tests/[id]/+page.svelte b/frontend/src/routes/tests/[id]/+page.svelte index 5e43c4d2b5f28d27a047c4232746de0ec7a6b5df..561c6c039648fdc857809ab2850595e7de7fca04 100644 --- a/frontend/src/routes/tests/[id]/+page.svelte +++ b/frontend/src/routes/tests/[id]/+page.svelte @@ -280,7 +280,7 @@ </div> <div class="mx-auto mt-16"> - <div class="flex justify-around min-w-[600px] space-x-10"> + <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4"> {#each displayQuestionOptions as option (option)} {@const type = option.split(':')[0]} {#if type == 'dropdown'} @@ -354,8 +354,8 @@ { value: 'na', label: $t('surveys.genders.na') } ]} {#if subStep === 0} - <div class="mx-auto mt-16 text-center"> - <pre class="text-center font-bold py-4 px-6 m-auto">{$t('surveys.birthYear')}</pre> + <div class="mx-auto mt-16 text-center px-4"> + <p class="text-center font-bold py-4 px-6 m-auto">{$t('surveys.birthYear')}</p> <Dropdown values={Array.from({ length: 82 }, (_, i) => { const year = 1931 + i; @@ -367,8 +367,8 @@ ></Dropdown> </div> {:else if subStep === 1} - <div class="mx-auto mt-16 text-center"> - <pre class="text-center font-bold py-4 px-6 m-auto">{$t('surveys.gender')}</pre> + <div class="mx-auto mt-16 text-center px-4"> + <p class="text-center font-bold py-4 px-6 m-auto">{$t('surveys.gender')}</p> <div class="flex flex-col items-center space-y-4"> {#each genderOptions as { value, label }} <label class="radio-label flex items-center space-x-2"> @@ -386,8 +386,8 @@ </div> </div> {:else if subStep === 2} - <div class="mx-auto mt-16 text-center"> - <pre class="text-center font-bold py-4 px-6 m-auto">{$t('surveys.homeLanguage')}</pre> + <div class="mx-auto mt-16 text-center px-4"> + <p class="text-center font-bold py-4 px-6 m-auto">{$t('surveys.homeLanguage')}</p> <Dropdown values={Object.entries(config.PRIMARY_LANGUAGE).map(([code, name]) => ({ value: code, @@ -399,11 +399,11 @@ ></Dropdown> </div> {:else if subStep === 3} - <div class="mx-auto mt-16 text-center"> - <pre class="text-center font-bold py-4 px-6 m-auto">{$t('surveys.education.title')}</pre> + <div class="mx-auto mt-16 text-center px-4"> + <p class="text-center font-bold py-4 px-6 m-auto">{$t('surveys.education.title')}</p> <Dropdown values={[ - { value: 'na', display: $t('surveys.education.na') }, + { value: 'NoEducation', display: $t('surveys.education.NoEducation') }, { value: 'PrimarySchool', display: $t('surveys.education.PrimarySchool') }, { value: 'SecondarySchool', display: $t('surveys.education.SecondarySchool') }, { value: 'NonUni', display: $t('surveys.education.NonUni') },