feat(job): utiliser grid dans les formulaires de recherche de job été…

…, étudiant, et emploi
DNUM-SocialGouv · Jun 21, 2024 · 5a34bf8 · 5a34bf8
1 parent 1f70527
commit 5a34bf8
Show file tree

Hide file tree

Showing 7 changed files with 319 additions and 235 deletions.
diff --git a/...s/features/EmploisEurope/FormulaireRecherche/FormulaireRechercheEmploisEurope.module.scss b/...s/features/EmploisEurope/FormulaireRecherche/FormulaireRechercheEmploisEurope.module.scss
@@ -86,6 +86,3 @@ $color-border-filters: lighten(utilities.$color-primary, 15%);
   }
 }
 
-.applyFiltersButton button {
-  width: 100%;
-}
diff --git a/...ient/components/features/JobEte/FormulaireRecherche/FormulaireRechercheJobEte.module.scss b/...ient/components/features/JobEte/FormulaireRecherche/FormulaireRechercheJobEte.module.scss
@@ -0,0 +1,50 @@
+@use "sass:color";
+@use "@styles/utilities";
+@use "@styles/components/form/variables";
+
+$color-border-filters: lighten(utilities.$color-primary, 15%);
+
+.rechercheOffreForm {
+  display: flex;
+  flex-direction: column;
+  gap: variables.$form-submit-button-vertical-gap-mobile;
+
+  @include utilities.media(medium) {
+    flex-direction: row;
+    align-items: flex-start;
+    padding-top: 2.5rem;
+    padding-bottom: 2.5rem;
+    gap: variables.$form-horizontal-gap;
+  }
+
+  & .filtresRechercherOffre {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    gap: variables.$form-vertical-gap-mobile;
+
+    @include utilities.media(medium) {
+      flex-direction: row;
+
+      .localisation, .metier, .domaine {
+        min-width: 28ch;
+        flex: 1
+      }
+    }
+  }
+
+  & .buttonRechercher {
+    @include utilities.media(medium) {
+      margin-top: utilities.pixel-to-rem(28);
+    }
+
+    > button {
+      width: 100%;
+    }
+  }
+}
+
+
+
+
diff --git a/src/client/components/features/JobEte/FormulaireRecherche/FormulaireRechercheJobEte.tsx b/src/client/components/features/JobEte/FormulaireRecherche/FormulaireRechercheJobEte.tsx
@@ -1,8 +1,6 @@
 import { useRouter } from 'next/router';
 import React, { FormEvent, useRef } from 'react';
 
-import styles
-	from '~/client/components/features/OffreEmploi/FormulaireRecherche/FormulaireRechercheOffreEmploi.module.scss';
 import { ButtonComponent } from '~/client/components/ui/Button/ButtonComponent';
 import { Champ } from '~/client/components/ui/Form/Champ/Champ';
 import { ComboboxLocalisation } from '~/client/components/ui/Form/Combobox/ComboboxLocalisation/ComboboxLocalisation';
@@ -17,6 +15,8 @@ import { useOffreQuery } from '~/client/hooks/useOffreQuery';
 import { getFormAsQuery } from '~/client/utils/form.util';
 import { mapRéférentielDomaineToOffreCheckboxFiltre } from '~/client/utils/offreEmploi.mapper';
 
+import styles from './FormulaireRechercheJobEte.module.scss';
+
 export function FormulaireRechercheJobEte() {
 	const rechercheJobEteForm = useRef<HTMLFormElement>(null);
 
@@ -39,33 +39,35 @@ export function FormulaireRechercheJobEte() {
 			onSubmit={updateRechercherJobEteQueryParams}
 		>
 			<div className={styles.filtresRechercherOffre}>
-				<div className={styles.inputButtonWrapper}>
-					<Champ>
-						<Champ.Label>
+				<Champ className={styles.metier}>
+					<Champ.Label>
 							Métier, mot-clé (minimum 2 caractères)
-							<Champ.Label.Complement>Exemples : boulanger, informatique…</Champ.Label.Complement>
-						</Champ.Label>
-						<Champ.Input
-							render={Input}
-							defaultValue={queryParams.motCle}
-							name="motCle"
-							minLength={2}
-						/>
-						<Champ.Error/>
-					</Champ>
-					<ComboboxLocalisation
-						defaultValue={inputLocalisation}
+						<Champ.Label.Complement>Exemples : boulanger, informatique…</Champ.Label.Complement>
+					</Champ.Label>
+					<Champ.Input
+						render={Input}
+						defaultValue={queryParams.motCle}
+						name="motCle"
+						minLength={2}
 					/>
+					<Champ.Error/>
+				</Champ>
 
-					<Select
-						multiple
-						optionList={mapRéférentielDomaineToOffreCheckboxFiltre(référentielDomaineList)}
-						label="Domaines"
-						labelComplement="Exemple : Commerce, Immobilier…"
-						defaultValue={queryParams.grandDomaine?.split(',')}
-						name="grandDomaine"
+				<div className={styles.localisation}>
+					<ComboboxLocalisation
+						defaultValue={inputLocalisation}
 					/>
 				</div>
+
+				<Select
+					className={styles.domaine}
+					multiple
+					optionList={mapRéférentielDomaineToOffreCheckboxFiltre(référentielDomaineList)}
+					label="Domaines"
+					labelComplement="Exemple : Commerce, Immobilier…"
+					defaultValue={queryParams.grandDomaine?.split(',')}
+					name="grandDomaine"
+				/>
 			</div>
 			<div className={styles.buttonRechercher}>
 				<ButtonComponent

diff --git a/...nents/features/JobÉtudiant/FormulaireRecherche/FormulaireRechercheJobEtudiant.module.scss b/...nents/features/JobÉtudiant/FormulaireRecherche/FormulaireRechercheJobEtudiant.module.scss
@@ -0,0 +1,50 @@
+@use "sass:color";
+@use "@styles/utilities";
+@use "@styles/components/form/variables";
+
+$color-border-filters: lighten(utilities.$color-primary, 15%);
+
+.rechercheOffreForm {
+  display: flex;
+  flex-direction: column;
+  gap: variables.$form-submit-button-vertical-gap-mobile;
+
+  @include utilities.media(medium) {
+    flex-direction: row;
+    align-items: flex-start;
+    padding-top: 2.5rem;
+    padding-bottom: 2.5rem;
+    gap: variables.$form-horizontal-gap;
+  }
+
+  & .filtresRechercherOffre {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    gap: variables.$form-vertical-gap-mobile;
+
+    @include utilities.media(medium) {
+      flex-direction: row;
+
+      .localisation, .metier, .domaine {
+        min-width: 28ch;
+        flex: 1
+      }
+    }
+  }
+
+  & .buttonRechercher {
+    @include utilities.media(medium) {
+      margin-top: utilities.pixel-to-rem(28);
+    }
+
+    > button {
+      width: 100%;
+    }
+  }
+}
+
+
+
+
diff --git a/...nt/components/features/JobÉtudiant/FormulaireRecherche/FormulaireRechercheJobÉtudiant.tsx b/...nt/components/features/JobÉtudiant/FormulaireRecherche/FormulaireRechercheJobÉtudiant.tsx
@@ -1,8 +1,6 @@
 import { useRouter } from 'next/router';
 import React, { FormEvent, useRef } from 'react';
 
-import styles
-	from '~/client/components/features/OffreEmploi/FormulaireRecherche/FormulaireRechercheOffreEmploi.module.scss';
 import { ButtonComponent } from '~/client/components/ui/Button/ButtonComponent';
 import { Champ } from '~/client/components/ui/Form/Champ/Champ';
 import { ComboboxLocalisation } from '~/client/components/ui/Form/Combobox/ComboboxLocalisation/ComboboxLocalisation';
@@ -17,6 +15,8 @@ import { useOffreQuery } from '~/client/hooks/useOffreQuery';
 import { getFormAsQuery } from '~/client/utils/form.util';
 import { mapRéférentielDomaineToOffreCheckboxFiltre } from '~/client/utils/offreEmploi.mapper';
 
+import styles from './FormulaireRechercheJobEtudiant.module.scss';
+
 
 export function FormulaireRechercheJobÉtudiant() {
 	const rechercheJobÉtudiantForm = useRef<HTMLFormElement>(null);
@@ -40,40 +40,42 @@ export function FormulaireRechercheJobÉtudiant() {
 			onSubmit={updateRechercherJobÉtudiantQueryParams}
 		>
 			<div className={styles.filtresRechercherOffre}>
-				<div className={styles.inputButtonWrapper}>
-					<Champ>
-						<Champ.Label>
-							Métier, mot-clé (minimum 2 caractères)
-							<Champ.Label.Complement>Exemples : boulanger, informatique…</Champ.Label.Complement>
-						</Champ.Label>
-						<Champ.Input
-							render={Input}
-							defaultValue={queryParams.motCle}
-							name="motCle"
-							minLength={2}
-						/>
-						<Champ.Error/>
-					</Champ>
-					<ComboboxLocalisation
-						defaultValue={inputLocalisation}
+				<Champ className={styles.metier}>
+					<Champ.Label>
+						Métier, mot-clé (minimum 2 caractères)
+						<Champ.Label.Complement>Exemples : boulanger, informatique…</Champ.Label.Complement>
+					</Champ.Label>
+					<Champ.Input
+						render={Input}
+						defaultValue={queryParams.motCle}
+						name="motCle"
+						minLength={2}
 					/>
+					<Champ.Error/>
+				</Champ>
 
-					<Select
-						multiple
-						optionList={mapRéférentielDomaineToOffreCheckboxFiltre(référentielDomaineList)}
-						label="Domaines"
-						labelComplement="Exemple : Commerce, Immobilier…"
-						defaultValue={queryParams.grandDomaine?.split(',')}
-						name="grandDomaine"
+				<div className={styles.localisation}>
+					<ComboboxLocalisation
+						defaultValue={inputLocalisation}
 					/>
 				</div>
+
+				<Select
+					className={styles.domaine}
+					multiple
+					optionList={mapRéférentielDomaineToOffreCheckboxFiltre(référentielDomaineList)}
+					label="Domaines"
+					labelComplement="Exemple : Commerce, Immobilier…"
+					defaultValue={queryParams.grandDomaine?.split(',')}
+					name="grandDomaine"
+				/>
 			</div>
 			<div className={styles.buttonRechercher}>
 				<ButtonComponent
-					label='Rechercher'
-					icon={<Icon name="magnifying-glass" />}
-					iconPosition='right'
-					type='submit'
+					label="Rechercher"
+					icon={<Icon name="magnifying-glass"/>}
+					iconPosition="right"
+					type="submit"
 				/>
 			</div>
 		</form>