Merge pull request #1000 from betagouv/bug-chrome

Correction de styles pour les simulateurs

source/components/Documentation/References.css

@@ -4,6 +4,7 @@
 }
 .references a {
 	flex: 1;
+	min-width: 45%;
 	text-decoration: underline;
 }
 
@@ -18,7 +19,7 @@
 	font-style: italic;
 }
 .references .imageWrapper {
-	width: 6rem;
+	width: 4.5rem;
 	height: 3rem;
 	display: flex;
 	align-items: center;

source/components/StackedBarChart.tsx

@@ -123,7 +123,7 @@ export function StackedBarChart({ data }: StackedBarChartProps) {
 				{dataWithPercentage.map(({ key, percentage, color, legend }) => (
 					<BarStackLegendItem key={key}>
 						<SmallCircle style={{ backgroundColor: color }} />
-						<strong>{legend}</strong>
+						{legend}
 						<strong>{percentage} %</strong>
 					</BarStackLegendItem>
 				))}

source/components/TargetSelection.css

@@ -69,7 +69,7 @@
 	text-decoration: underline;
 }
 
-@media (min-width: 800px) {
+@media (min-width: 660px) {
 	#targetSelection {
 		font-size: 115%;
 	}
@@ -132,7 +132,7 @@
 }
 
 .light #targetSelection .optionTitle {
-	color: var(--darkestColor);
+	color: var(--darkColor);
 }
 
 #targetSelection .editableTarget {

source/components/conversation/AnswerList.tsx

@@ -91,7 +91,6 @@ function StepsTable({
 							</td>
 							<td>
 								<span
-									className="answer"
 									css={`
 										display: inline-block;
 										padding: 0.6rem;

source/components/conversation/DateInput.tsx

@@ -42,8 +42,8 @@ export default function DateInput({
 		[onChange]
 	)
 	return (
-		<>
-			<div css="width: 100%">
+		<div className="step input">
+			<div>
 				<InputSuggestions
 					suggestions={suggestions}
 					onFirstClick={value => {
@@ -51,17 +51,15 @@ export default function DateInput({
 					}}
 					onSecondClick={() => onSubmit?.('suggestion')}
 				/>
-			</div>
-			<div className="answer">
 				<DateStyledInput
-					className="ui__ input"
+					className="ui__ input suffixed"
 					type="date"
 					value={dateValue}
 					onChange={handleDateChange}
 				/>
-				{onSubmit && <SendButton disabled={!dateValue} onSubmit={onSubmit} />}
 			</div>
-		</>
+			{onSubmit && <SendButton disabled={!dateValue} onSubmit={onSubmit} />}
+		</div>
 	)
 }
 

source/components/conversation/Input.js

@@ -26,7 +26,7 @@ export default function Input({
 
 	return (
 		<div className="step input">
-			<div css="width: 100%">
+			<div>
 				<InputSuggestions
 					suggestions={suggestions}
 					onFirstClick={value => {
@@ -35,9 +35,6 @@ export default function Input({
 					onSecondClick={() => onSubmit && onSubmit('suggestion')}
 					unit={unit}
 				/>
-			</div>
-
-			<div className="answer">
 				<NumberFormat
 					autoFocus={autoFocus}
 					className="suffixed"
@@ -56,10 +53,10 @@ export default function Input({
 				<label className="suffix" htmlFor={'step-' + dottedName}>
 					{serializeUnit(unit, value, language)}
 				</label>
-				{onSubmit && (
-					<SendButton disabled={value === undefined} onSubmit={onSubmit} />
-				)}
 			</div>
+			{onSubmit && (
+				<SendButton disabled={value === undefined} onSubmit={onSubmit} />
+			)}
 		</div>
 	)
 }

source/components/conversation/InputSuggestions.tsx

@@ -11,19 +11,23 @@ type InputSuggestionsProps = {
 }
 
 export default function InputSuggestions({
-	suggestions,
+	suggestions = {},
 	onSecondClick = x => x,
 	onFirstClick,
 	unit
 }: InputSuggestionsProps) {
 	const [suggestion, setSuggestion] = useState<string | number>()
 	const { t } = useTranslation()
-	if (!suggestions) return null
 
 	return (
-		<div css="display: flex; align-items: baseline; ">
-			<small>Suggestions :</small>
-
+		<div
+			className="ui__ notice"
+			css={`
+				display: flex;
+				align-items: baseline;
+				margin-top: 0.2rem;
+			`}
+		>
 			{toPairs(suggestions).map(([text, value]: [string, number]) => {
 				const valueWithUnit: string = `${value} ${
 					unit ? serializeUnit(unit)?.replace(' / ', '/') : ''
@@ -32,7 +36,12 @@ export default function InputSuggestions({
 					<button
 						className="ui__ link-button"
 						key={value}
-						css="margin: 0 0.4rem !important"
+						css={`
+							margin: 0 0.4rem !important;
+							:first-child {
+								margin-left: 0rem !important;
+							}
+						`}
 						onClick={() => {
 							onFirstClick(valueWithUnit)
 							if (suggestion !== value) setSuggestion(valueWithUnit)

source/components/conversation/conversation.css

@@ -68,6 +68,16 @@
 	z-index: -1;
 }
 
+.step.input {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: flex-end;
+	align-items: flex-end;
+}
+.step.input > :first-child {
+	text-align: right;
+}
+
 .step input[type='text'],
 .ui__.input {
 	border: 1px solid var(--color);
@@ -80,7 +90,7 @@
 	font-size: 120%;
 	padding: 0;
 	padding-right: 0.4em;
-	width: 10rem;
+	width: 12rem;
 	text-align: right;
 	padding-left: 0.2em;
 }
@@ -116,10 +126,6 @@
 	outline: none;
 }
 
-.answer {
-	margin-top: 0.6rem;
-}
-
 .step label.userAnswerButton {
 	border: 1px solid var(--color) !important;
 	text-transform: none !important;

source/locales/rules-en.yaml

@@ -526,10 +526,10 @@ contrat salarié . CDD . congés non pris:
     fin du contrat.
   question.en: How many working days of paid leave will not be taken?
   question.fr: Combien de jours ouvrés de congés ne seront pas pris sur la durée du CDD ?
-  suggestions.10.en: '[automatic] 10'
-  suggestions.10.fr: '10'
-  suggestions.3.en: '[automatic] 3'
-  suggestions.3.fr: '3'
+  suggestions.10 jours.en: '[automatic] 10 days'
+  suggestions.10 jours.fr: 10 jours
+  suggestions.3 jours.en: '[automatic] 3 days'
+  suggestions.3 jours.fr: 3 jours
   titre.en: Untaken paid leave
   titre.fr: congés non pris
 contrat salarié . CDD . contrat jeune vacances:

source/rules/salarié.yaml

@@ -883,8 +883,8 @@ contrat salarié . CDD . congés non pris:
     Le contrat étant à durée déterminée, le salarié n'a pas forcément le temps de prendre tous les jours de congés qu'il a acquis comme tout salarié au cours du contrat.
     Par exemple, pour un contrat de 3 mois, le salarié acquiert 2,08 jours de congés par mois (25 jours / 12 mois = 2,08), donc 6,25 sur la durée du contrat. Or il se peut que l'entreprise le contraigne à n'en prendre que 4, donc 2,25 jours ne seront pas pris. Ils seront payés par l'employeur à la fin du contrat.
   suggestions:
-    3: 3
-    10: 10
+    3 jours: 3
+    10 jours: 10
   par défaut: 0 jour ouvré
   contrôles:
     - si: congés non pris > congés dus en jours ouvrés

source/sites/mon-entreprise.fr/pages/Coronavirus.tsx

@@ -137,6 +137,7 @@ function ExplanationSection() {
 				id="targetSelection"
 				className="ui__ light card"
 				css={`
+					overflow: hidden;
 					margin: 1rem 0;
 				`}
 			>
@@ -315,7 +316,6 @@ function RowLabel(target: EvaluatedRule) {
 const ResultTable = styled.table`
 	width: 100%;
 	border-collapse: collapse;
-	margin-top: 5px;
 
 	&.ui__.mobile-version {
 		display: none;
@@ -345,13 +345,13 @@ const ResultTable = styled.table`
 
 	td {
 		border-top: 1px solid rgba(0, 0, 0, 0.1);
-		padding: 8px 16px 0;
+		padding: 0.8rem 1rem 0;
 	}
 
 	td:first-child {
 		text-align: left;
 		p {
-			font-style: italic;
+			margin-top: 0.2rem;
 		}
 	}
 

source/sites/mon-entreprise.fr/pages/Simulateurs/ArtisteAuteur.tsx

@@ -83,7 +83,7 @@ function SimpleField({ dottedName }: SimpleFieldProps) {
 					<div className="header">
 						<label htmlFor={`step-${dottedName}`}>
 							<span className="optionTitle">{rule.question || rule.titre}</span>
-							<p>{rule.résumé}</p>
+							<p className="ui__ notice">{rule.résumé}</p>
 						</label>
 					</div>
 					<div className="targetInputOrValue">