From 0055e0a5aab38fee3b710dfd58ff4bd4451ce54c Mon Sep 17 00:00:00 2001
From: Johan Girod <johangirod@gmail.com>
Date: Fri, 24 Apr 2020 15:52:44 +0200
Subject: [PATCH] :bug: corrige les simulateurs dans les iframes

---
 source/components/TargetSelection.css         |  19 +--
 source/sites/mon-entreprise.fr/App.tsx        | 118 ++++++++----------
 .../mon-entreprise.fr/pages/Coronavirus.tsx   |  10 +-
 3 files changed, 73 insertions(+), 74 deletions(-)

diff --git a/source/components/TargetSelection.css b/source/components/TargetSelection.css
index 8220cc04c..2b7fde3c5 100644
--- a/source/components/TargetSelection.css
+++ b/source/components/TargetSelection.css
@@ -33,7 +33,7 @@
 
 #targetSelection .targets > li {
 	border-top: 1px solid rgba(255, 255, 255, 0.5);
-	padding: 0.6rem 1rem;
+	padding: 0.8rem 1rem;
 	margin-left: -1rem;
 	margin-right: -1rem;
 }
@@ -48,10 +48,6 @@
 	justify-content: space-between;
 }
 
-#targetSelection .targets > li p {
-	margin: 0.2em 0 0;
-}
-
 #targetSelection li .header {
 	display: flex;
 	align-items: center;
@@ -59,7 +55,10 @@
 #targetSelection .targets > li.small-target .header p {
 	display: none;
 }
-
+#targetSelection .optionTitle + p {
+	margin-top: 0.2rem;
+	margin-bottom: 0;
+}
 #targetSelection .optionTitle a {
 	color: inherit;
 	font-weight: bold;
@@ -70,6 +69,12 @@
 	text-decoration: underline;
 }
 
+@media (min-width: 800px) {
+	#targetSelection {
+		font-size: 115%;
+	}
+}
+
 @media (hover: none) {
 	#targetSelection .optionTitle a {
 		text-decoration: underline;
@@ -83,7 +88,7 @@
 }
 
 #targetSelection .targetInputOrValue {
-	font-size: 125%;
+	font-size: 115%;
 	margin-left: 0.6rem;
 	text-align: right;
 	display: flex;
diff --git a/source/sites/mon-entreprise.fr/App.tsx b/source/sites/mon-entreprise.fr/App.tsx
index a74ede9e2..5e7d3ccac 100644
--- a/source/sites/mon-entreprise.fr/App.tsx
+++ b/source/sites/mon-entreprise.fr/App.tsx
@@ -115,21 +115,6 @@ function Root({ basename, language, rules }: RootProps) {
 }
 
 const Router = () => {
-	return (
-		<>
-			{!inIframe() && <Header />}
-			<Switch>
-				<Route exact path="/" component={Landing} />
-				<Route path="/iframes" component={Iframes} />
-				<Route component={App} />
-			</Switch>
-		</>
-	)
-}
-
-const App = () => {
-	const { t } = useTranslation()
-	const sitePaths = useContext(SitePathsContext)
 	const userSituation = useSelector(situationSelector)
 	const configSituation = useSelector(configSituationSelector)
 	const situation = useMemo(
@@ -141,60 +126,63 @@ const App = () => {
 	)
 	return (
 		<SituationProvider situation={situation}>
-			<div className="app-container">
-				<Helmet
-					titleTemplate={`%s - ${t(['siteName', 'Mon-entreprise.fr'])}`}
-				/>
-				{/* Passing location down to prevent update blocking */}
-
-				<div className="app-content">
-					<div
-						className="ui__ container"
-						style={{ flexGrow: 1, flexShrink: 0 }}
-					>
-						<Switch>
-							{redirects}
-							<Route path={sitePaths.créer.index} component={Créer} />
-							<Route path={sitePaths.gérer.index} component={Gérer} />
-							<Route
-								path={sitePaths.économieCollaborative.index}
-								component={ÉconomieCollaborative}
-							/>
-							<Route
-								path={sitePaths.simulateurs.index}
-								component={Simulateurs}
-							/>
-							<Route
-								path={sitePaths.documentation.index}
-								component={Documentation}
-							/>
-							<Route
-								path={sitePaths.integration.index}
-								component={Integration}
-							/>
-							<Route path={sitePaths.nouveautés} component={Nouveautés} />
-							<Route path={sitePaths.stats} component={Stats} />
-							<Route path={sitePaths.coronavirus} component={Coronavirus} />
-							<Route path={sitePaths.budget} component={Budget} />
-							<Route exact path="/dev/sitemap" component={Sitemap} />
-							<Route
-								exact
-								path="/dev/integration-test"
-								component={IntegrationTest}
-							/>
-							<Route exact path="/dev/personas" component={Personas} />
-
-							<Route component={Route404} />
-						</Switch>
-					</div>
-
-					{!inIframe() && <Footer />}
-				</div>
-			</div>
+			{!inIframe() && <Header />}
+			<Switch>
+				<Route exact path="/" component={Landing} />
+				<Route path="/iframes" component={Iframes} />
+				<Route component={App} />
+			</Switch>
 		</SituationProvider>
 	)
 }
 
+const App = () => {
+	const { t } = useTranslation()
+	const sitePaths = useContext(SitePathsContext)
+
+	return (
+		<div className="app-container">
+			<Helmet titleTemplate={`%s - ${t(['siteName', 'Mon-entreprise.fr'])}`} />
+			{/* Passing location down to prevent update blocking */}
+
+			<div className="app-content">
+				<div className="ui__ container" style={{ flexGrow: 1, flexShrink: 0 }}>
+					<Switch>
+						{redirects}
+						<Route path={sitePaths.créer.index} component={Créer} />
+						<Route path={sitePaths.gérer.index} component={Gérer} />
+						<Route
+							path={sitePaths.économieCollaborative.index}
+							component={ÉconomieCollaborative}
+						/>
+						<Route path={sitePaths.simulateurs.index} component={Simulateurs} />
+						<Route
+							path={sitePaths.documentation.index}
+							component={Documentation}
+						/>
+						<Route path={sitePaths.integration.index} component={Integration} />
+						<Route path={sitePaths.nouveautés} component={Nouveautés} />
+						<Route path={sitePaths.stats} component={Stats} />
+						<Route path={sitePaths.coronavirus} component={Coronavirus} />
+						<Route path={sitePaths.budget} component={Budget} />
+						<Route exact path="/dev/sitemap" component={Sitemap} />
+						<Route
+							exact
+							path="/dev/integration-test"
+							component={IntegrationTest}
+						/>
+						<Route exact path="/dev/personas" component={Personas} />
+
+						<Route component={Route404} />
+					</Switch>
+				</div>
+
+				{!inIframe() && <Footer />}
+			</div>
+		</div>
+	)
+}
+
 let ExportedApp = Root
 
 if (process.env.NODE_ENV !== 'production') {
diff --git a/source/sites/mon-entreprise.fr/pages/Coronavirus.tsx b/source/sites/mon-entreprise.fr/pages/Coronavirus.tsx
index a3141dddd..af9e29057 100644
--- a/source/sites/mon-entreprise.fr/pages/Coronavirus.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Coronavirus.tsx
@@ -300,8 +300,14 @@ function RowLabel(target: EvaluatedRule) {
 	return (
 		<>
 			{' '}
-			<div className="optionTitle">{target.title}</div>
-			<p>{target.summary}</p>
+			<div
+				css={`
+					font-weight: bold;
+				`}
+			>
+				{target.title}
+			</div>
+			<p className="ui__ notice">{target.summary}</p>
 		</>
 	)
 }