feat(ui): déplacer bouton rechercher formulaire de recherche (#3145)

DNUM-SocialGouv · Jul 12, 2024 · 5c8bbd5 · 5c8bbd5
1 parent ebe2ad3
commit 5c8bbd5
Show file tree

Hide file tree

Showing 14 changed files with 236 additions and 369 deletions.
diff --git a/...tures/Alternance/Rechercher/FormulaireRecherche/FormulaireRechercheAlternance.module.scss b/...tures/Alternance/Rechercher/FormulaireRecherche/FormulaireRechercheAlternance.module.scss
@@ -1,54 +1,26 @@
 @use "@styles/utilities";
 @use "@styles/components/form/variables";
+@use "@styles/theme/variables" as theme-variables;
 
 .rechercheOffreForm {
-  display: flex;
-  flex-direction: column;
-  gap: variables.$form-submit-button-vertical-gap-mobile;
   padding-bottom: 1rem;
 }
 
 .filtresRechercherOffre {
-  flex-grow: 1;
-}
+  display: grid;
+  grid-gap: variables.$form-vertical-gap-mobile;
 
-.inputButtonWrapper {
-  display: flex;
-  flex-direction: column;
-  gap: variables.$form-vertical-gap-mobile;
+  @include utilities.media(medium) {
+    grid-template-columns: 1fr 1fr;
+    grid-gap: variables.$form-horizontal-gap;
+  }
 }
 
-.buttonRechercher > button {
-  width: 100%;
+.buttonRechercher {
+  @extend %buttonRechercher;
 }
 
 .champsObligatoires {
   color: utilities.$color-primary;
   margin-block: 1.25rem;
 }
-
-@include utilities.media(medium) {
-  .rechercheOffreForm {
-    flex-direction: row;
-    align-items: flex-start;
-    gap: variables.$form-horizontal-gap;
-    padding-bottom: 2rem;
-  }
-
-  .buttonRechercher {
-    // TODO (BRUJ 05/03/2024): a modifier lors de la refonte des formulaires de recherche
-    margin-top: utilities.pixel-to-rem(41);
-  }
-
-  .inputButtonWrapper {
-    flex-direction: row;
-    width: 100%;
-    gap: variables.$form-vertical-gap-desktop;;
-    flex-wrap: wrap;
-    padding-block: 0;
-  }
-
-  .inputButtonWrapper > div {
-    flex-grow: 1;
-  }
-}
diff --git a/...ents/features/Alternance/Rechercher/FormulaireRecherche/FormulaireRechercheAlternance.tsx b/...ents/features/Alternance/Rechercher/FormulaireRecherche/FormulaireRechercheAlternance.tsx
@@ -72,22 +72,20 @@ export function FormulaireRechercheAlternance(props: FormulaireRechercheAlternan
 				onSubmit={updateRechercherAlternanceQueryParams}
 			>
 				<div className={styles.filtresRechercherOffre}>
-					<div className={styles.inputButtonWrapper}>
-						<MetierDependenciesProvider metierService={metierService}>
-							<ComboboxMetiers
-								defaultValue={domaineDefaultValue}
-								required
-								valueName={'codeRomes'}
-							/>
-						</MetierDependenciesProvider>
-
-						<ComboboxCommune
-							defaultCommune={defaultCommune}
-							showRadiusInput
-							defaultDistance={distanceCommune}
+					<MetierDependenciesProvider metierService={metierService}>
+						<ComboboxMetiers
+							defaultValue={domaineDefaultValue}
 							required
+							valueName={'codeRomes'}
 						/>
-					</div>
+					</MetierDependenciesProvider>
+
+					<ComboboxCommune
+						defaultCommune={defaultCommune}
+						showRadiusInput
+						defaultDistance={distanceCommune}
+						required
+					/>
 				</div>
 				<div className={styles.buttonRechercher}>
 					<ButtonComponent

diff --git a/...s/features/EmploisEurope/FormulaireRecherche/FormulaireRechercheEmploisEurope.module.scss b/...s/features/EmploisEurope/FormulaireRecherche/FormulaireRechercheEmploisEurope.module.scss
@@ -2,87 +2,49 @@
 @use "@styles/components/form/variables";
 // FIXME (DORO - 2023-10-02): Duplication de FormulaireRechercheAlternance.module.scss et FormulaireRechercheOffreEmploi.module.scss
 
-$color-border-filters: lighten(utilities.$color-primary, 15%);
+.filtresRechercherOffre {
+  display: grid;
+  grid-gap: variables.$form-vertical-gap-mobile;
 
-.rechercheOffreForm {
-  display: flex;
-  flex-direction: column;
-  gap: variables.$form-submit-button-vertical-gap-mobile;
-}
+  @include utilities.media(medium) {
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-template-columns: repeat(6, 1fr);
 
-.filtresRechercherOffre {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  gap: variables.$form-vertical-gap-mobile;
+    & .localisation {
+      grid-column: span 3;
+    }
+
+    & .metier {
+      grid-column: span 3;
+    }
 
-  & .inputButtonWrapper {
-    display: flex;
-    flex-direction: column;
-    gap: variables.$form-vertical-gap-mobile;
+    & .typeContrat, & .tempsTravail, & .niveauEtudes {
+      grid-row: 2;
+      grid-column: span 2;
+    }
+
+    & .domaines {
+      grid-row: 3;
+      grid-column: 1 / -1;
+    }
   }
 
-  .filtreRechercheDesktop {
+  .filtreDesktopOnly {
     display: none;
 
     @include utilities.media(medium) {
-        display: flex;
-        column-gap: variables.$form-horizontal-gap;
-        row-gap: variables.$form-vertical-gap-desktop;
-        flex-wrap: wrap;
-      }
-
-      > div {
-        flex-grow: 1;
-        flex-shrink: 0;
-        flex-basis: 25%;
-      }
-
-      > div > button {
-        width: 100%;
-      }
+      display: unset;
+    }
   }
 
-  .filtresRechercheMobile {
+  .buttonMoreFilterMobileOnly {
+    text-align: left;
     @include utilities.media(medium) {
       display: none;
     }
   }
 }
 
-.buttonRechercher > button {
-  width: 100%;
+.buttonRechercher {
+  @extend %buttonRechercher;
 }
-
-@include utilities.media(medium) {
-  .rechercheOffreForm {
-    flex-direction: row;
-    align-items: flex-start;
-    padding-top: 2.5rem;
-    padding-bottom: 2.5rem;
-    gap: variables.$form-horizontal-gap;
-  }
-
-  .filtresRechercherOffre {
-    gap: variables.$form-vertical-gap-desktop;
-
-    & .inputButtonWrapper {
-      display: flex;
-      flex-direction: row;
-      width: 100%;
-      gap: 1rem;
-      flex-wrap: wrap;
-      padding-block: 0;
-    }
-  }
-
-  .buttonRechercher {
-    // TODO (DORO 21/03/2024): a modifier lors de la refonte des formulaires de recherche
-    margin-top: utilities.pixel-to-rem(41);
-  }
-
-  .inputButtonWrapper > div {
-    flex-grow: 1;
-  }
-}
-