🎨 Optimisation des tailles de polices; TargetSelection se plie

source/components/ProgressTip.css

@@ -1,6 +1,6 @@
 .progressTip {
 	max-width: 35em;
-	margin: 0 auto;
+	margin: .2em auto;
 
 
 }

source/components/ProgressTip.js

@@ -25,16 +25,18 @@ export default class ProgressTip extends Component {
 		return (
 			nbQuestions != 0 && (
 				<div className="progressTip">
-					{foldedSteps.length > 0 && (
-						<Line
-							percent={
-								100 * foldedSteps.length / (foldedSteps.length + nbQuestions)
-							}
-							trailWidth="1"
-							strokeWidth="2"
-							strokeColor={colour}
-						/>
-					)}
+					<Line
+						style={{
+							visibility: foldedSteps.length > 0 ? 'visible' : 'hidden'
+						}}
+						percent={
+							100 * foldedSteps.length / (foldedSteps.length + nbQuestions)
+						}
+						trailWidth="1"
+						strokeWidth="2"
+						strokeColor={colour}
+					/>
+
 					<p>
 						{nbQuestions === 1
 							? 'une dernière question !'

source/components/TargetSelection.css

@@ -5,7 +5,6 @@
 	padding: 0.2em .5em;
 
 	border-radius: 0.6em;
-	font-size: 85%;
 	box-shadow: 0px 0px 13px 3px rgba(0, 0, 0, 0.25)
 }
 
@@ -17,11 +16,7 @@
 	margin: 0.6em;
 	color: inherit;
 	text-align: center;
-	font-size: 200%;
-}
-
-#targetSelection h1 i {
-    font-size: 80%;
+	font-size: 180%;
 }
 
 #targetSelection #action {
@@ -30,9 +25,9 @@
 }
 
 #targetSelection #action p {
-    font-size: 130%;
 	color: #4b4b66;
 	margin-bottom: 1em;
+	font-size: 120%;
 }
 
 
@@ -46,22 +41,23 @@
 	background: rgba(0, 0, 0, 0.25);
     display: flex;
 	align-items: center;
-    padding: .4em 1em;
+    padding: .4em .6em .4em;
     border-radius: .3em;
 }
 
 #targetSelection #targets > li p {
 	margin: .2em 0 0;
-	opacity: .8;
+	opacity: .80;
 	line-height: 1.2em;
 	}
 
 #targetSelection .progressCircle {
 		width: 2.5em;
+		margin-right: .6em;
 }
 #targetSelection .progressCircle i {
 		color: #5de662;
-		font-size: 230%
+		font-size: 180%
 }
 
 #targetSelection label {
@@ -69,21 +65,16 @@
 	display: inline-block;
 	cursor: pointer;
 }
-#targetSelection label i {
-	font-size: 200%;
-	font-width: 600;
-}
 
 #targetSelection .texts {
-		margin: 0 1.5em 0 .6em;
+		margin: 0 .4em 0;
 		width: 55%;
 		display: inline-block;
-		font-size: 110%;
 
 }
 
 #targetSelection .optionTitle {
-	font-size: 130%;
+	font-size: 120%;
 	font-weight: 600;
 }
 #targetSelection .optionTitle a {
@@ -107,7 +98,7 @@ text-decoration: underline;
 #targetSelection .targetInputOrValue
 {
 		width: 40%;
-	font-size: 140%;
+	font-size: 110%;
 	text-align: right;
 }
 
@@ -143,7 +134,7 @@ border: none;
 .input-error {
 padding: 0 .6em;
     margin-right: .6em;
-    font-size: 0.8em;
+    font-size: 80%;
     font-style: italic;
     color: #c0392b;
     background: yellow;

source/components/TargetSelection.js

@@ -85,32 +85,37 @@ export default class TargetSelection extends Component {
 				<ul id="targets">
 					{popularTargets.map(s => (
 						<li key={s.name}>
-							{conversationStarted &&
-								activeInput !== s.dottedName && (
-									<span className="progressCircle">
-										{do {
-											let mv = missingVariablesByTarget[s.dottedName],
-												number = mv && mv.missingVariables.length,
-												ratio = number / 16
-											ratio === 0 ? (
-												<i className="fa fa-check" aria-hidden="true" />
-											) : (
-												<Circle
-													percent={100 - ratio * 100}
-													strokeWidth="15"
-													strokeColor="#5de662"
-													trailColor="#fff"
-													trailWidth="5"
-												/>
-											)
-										}}
-									</span>
-								)}
+							{conversationStarted && (
+								<span
+									className="progressCircle"
+									style={{
+										visibility:
+											activeInput === s.dottedName ? 'hidden' : 'visible'
+									}}
+								>
+									{do {
+										let mv = missingVariablesByTarget[s.dottedName],
+											number = mv && mv.missingVariables.length,
+											ratio = number / 16
+										ratio === 0 ? (
+											<i className="fa fa-check" aria-hidden="true" />
+										) : (
+											<Circle
+												percent={100 - ratio * 100}
+												strokeWidth="15"
+												strokeColor="#5de662"
+												trailColor="#fff"
+												trailWidth="5"
+											/>
+										)
+									}}
+								</span>
+							)}
 							<span className="texts">
 								<span className="optionTitle">
 									<Link to={'/règle/' + s.dottedName}>{s.title || s.name}</Link>
 								</span>
-								<p>{s['résumé']}</p>
+								{!conversationStarted && <p>{s['résumé']}</p>}
 							</span>
 							<TargetInputOrValue
 								{...{

source/containers/Layout.css

@@ -6,7 +6,7 @@ body {
 	font-family: 'Open Sans';
 	margin: 0;
 	height: 100%;
-	font-size: calc(12px + 0.20vw);
+	font-size: calc(13px + 0.20vw);
 	background: white;
 }
 #js,