Merge branch 'dev-csv-defiLingAutocomplete-IndexAsterix' of https://g…

…ithub.com/parlemonde/1village into dev-csv-defiLingAutocomplete-IndexAsterix
parlemonde · Oct 3, 2023 · 6d04388 · 6d04388
2 parents 5cd2e1f + cad2d8c
commit 6d04388
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 20 deletions.
diff --git a/src/components/KeepRatio.tsx b/src/components/KeepRatio.tsx
@@ -3,13 +3,15 @@ import React from 'react';
 interface KeepRatioProps {
   ratio: number;
   width?: string | number;
+  height?: string | number;
   maxWidth?: string | number;
   minHeight?: string | number;
   className?: string;
 }
 
 export const KeepRatio = ({
   width = '100%',
+  height = '100%',
   maxWidth = '100%',
   minHeight = 0,
   ratio,
@@ -20,7 +22,7 @@ export const KeepRatio = ({
     <div style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
       <div style={{ width, maxWidth }}>
         <div style={{ width: '100%', paddingBottom: `${ratio * 100}%`, minHeight, position: 'relative' }}>
-          <div className={className} style={{ position: 'absolute', top: '0', left: '0', width: '100%', height: '100%' }}>
+          <div className={className} style={{ position: 'absolute', top: '0', left: '0', width: '100%', height }}>
             {children}
           </div>
         </div>

diff --git a/src/components/WelcomeModal/FirstPhase.tsx b/src/components/WelcomeModal/FirstPhase.tsx
@@ -96,8 +96,6 @@ export const FirstPhase = () => {
     setIsLoading(false);
   };
 
-  const label = <span style={{ color: 'red' }}>**</span>;
-
   const sendError = (error: 'village' | 'country') => async () => {
     // do not ask twice
     if (updateAsked[error]) {

diff --git a/src/components/accueil/NewHome.tsx b/src/components/accueil/NewHome.tsx
@@ -26,24 +26,12 @@ export const NewHome = () => {
   return (
     <div className="bg-gradiant" style={{ display: 'flex', flexDirection: 'column' }}>
       <>
-        <div
-          style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(3, 1fr)',
-            gap: '10px',
-            background: 'white',
-            width: '95%',
-            height: '50px',
-            maxWidth: '1200px',
-            borderRadius: '10px',
-            marginBottom: '2rem',
-          }}
-        >
+        <div className="login__header">
           <Logo style={{ width: '25%', height: 'auto', margin: '0 10px', alignSelf: 'center' }} />
           <h1 style={{ placeSelf: 'center' }}>Vous êtes...</h1>
         </div>
-        <KeepRatio ratio={0.45} width="95%" maxWidth="1200px" minHeight="400px" className="login__container">
-          <div className="text-center" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '2rem', placeItems: 'center' }}>
+        <KeepRatio ratio={0.45} width="95%" maxWidth="1200px" height="fit-content" minHeight="400px" className="login__container">
+          <div className="flex-responsive text-center">
             {/* Block Teacher */}
             <div style={{ display: 'flex', flexDirection: 'column', height: '300px' }}>
               <h2>Professeur des écoles</h2>

diff --git a/src/styles/base.scss b/src/styles/base.scss
@@ -135,6 +135,10 @@ main {
   padding-bottom: $verticalSpacing;
 }
 
+.flex-responsive{
+  flex-direction: row;
+}
+
 @include for-small-screen {
   .header__container {
     margin: math.div($verticalSpacing, 2) math.div($horizontalSpacing, 2) 0 math.div($horizontalSpacing, 2);
@@ -178,6 +182,10 @@ main {
   .vertical-bottom-margin {
     margin-bottom: math.div($verticalSpacing, 2);
   }
+
+  .flex-responsive{
+    flex-direction: column;
+  }
 }
 
 @include for-laptop-screen-up {

diff --git a/src/styles/globals.scss b/src/styles/globals.scss
@@ -150,10 +150,12 @@ a.text--success:hover {
 // misc
 .bg-gradiant {
   width: 100vw;
-  height: 100vh;
+  min-height: 100vh;
   background: rgb(224, 195, 252);
   background: -o-linear-gradient(315deg, rgba(224, 195, 252, 1) 0%, rgba(142, 197, 252, 1) 100%);
   background: linear-gradient(135deg, rgba(224, 195, 252, 1) 0%, rgba(142, 197, 252, 1) 100%);
+  background-attachment: fixed;
+  overflow: auto;
   display: flex;
   justify-content: center;
   align-items: center;

diff --git a/src/styles/login.scss b/src/styles/login.scss
@@ -1,12 +1,34 @@
 @import 'variables';
 
+.login__header{
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+  background: white;
+  width: 95%;
+  height: 50px;
+  max-width: 1200px;
+  border-radius: 10px;
+  margin-bottom: 2rem;
+}
+
 .login__container {
   background-color: white;
   border-radius: 10px;
-  overflow: hidden;
   display: flex;
+  min-height: 100%;
+
+  .flex-responsive{
+    display: flex; 
+    justify-content: space-around;
+    align-items: center; 
+    gap: 4rem; 
+    padding: 2rem 0;
+  }
 }
 
+
+
 .login__panel {
   display: inline-flex;
   width: 50%;