🔥 Type et période de l'infobox, période près de valeur

source/components/PeriodSwitch.js

@@ -52,8 +52,8 @@ export default compose(
 		return
 	})
 	return (
-		<div id="PeriodSwitch">
-			<div className="base ui__ small toggle">
+		<span id="PeriodSwitch">
+			<span className="base ui__ small toggle">
 				<label>
 					<Field
 						name="période"
@@ -82,8 +82,8 @@ export default compose(
 						<Trans>mois</Trans>
 					</span>
 				</label>
-			</div>
-		</div>
+			</span>
+		</span>
 	)
 })
 

source/components/rule/Header.js

@@ -1,9 +1,7 @@
-import PeriodSwitch from 'Components/PeriodSwitch'
 import withColours from 'Components/utils/withColours'
 import { path } from 'ramda'
 import React from 'react'
 import emoji from 'react-easy-emoji'
-import { Trans } from 'react-i18next'
 import { capitalise0 } from '../../utils'
 import { Markdown } from '../utils/markdown'
 import Destinataire from './Destinataire'
@@ -21,8 +19,7 @@ let RuleHeader = withColours(
 		name,
 		title,
 		icon,
-		colours,
-		valuesToShow
+		colours
 	}) => (
 		<section id="ruleHeader">
 			<header className="ui__ plain card">
@@ -40,39 +37,14 @@ let RuleHeader = withColours(
 				<div id="ruleHeader__description">
 					<Markdown source={description || question} />
 				</div>
-				{(type || flatRule['période']) && (
-					<div id="ruleHeader__infobox">
-						{type && (
-							<div className="infobox__item">
-								<h4>Type&nbsp;:</h4>
-								<Trans>{capitalise0(type)}</Trans>
-							</div>
-						)}
-						{do {
-							let period = flatRule['période']
-							period && (
-								<div className="infobox__item">
-									<h4>Période :</h4>
-									{valuesToShow && period === 'flexible' ? (
-										<PeriodSwitch />
-									) : (
-										<div className="inlineMecanism">
-											<span
-												className="name"
-												data-term-definition="période"
-												style={{ background: '#8e44ad' }}>
-												{period}
-											</span>
-										</div>
-									)}
-								</div>
-							)
-						}}
-						<Destinataire
-							destinataire={path([type, 'destinataire'])(flatRule)}
-						/>
-					</div>
-				)}
+				{do {
+					let destinataire = path([type, 'destinataire'])(flatRule)
+					destinataire && (
+						<div id="ruleHeader__infobox">
+							<Destinataire destinataire={destinataire} />
+						</div>
+					)
+				}}
 			</div>
 		</section>
 	)

source/components/rule/Rule.css

@@ -20,12 +20,6 @@ h2 small {
 	font-size: 75%;
 }
 
-#rule #ruleValue {
-	text-align: center;
-	font-size: 200%;
-	margin-bottom: 0.6em;
-	margin-top: 0.4em;
-}
 
 #rule #ruleDefault {
 	text-align: center;

source/components/rule/Rule.js

@@ -30,6 +30,7 @@ import Examples from './Examples'
 import RuleHeader from './Header'
 import References from './References'
 import './Rule.css'
+import PeriodSwitch from 'Components/PeriodSwitch'
 
 let LazySource = React.lazy(() => import('./RuleSource'))
 
@@ -64,8 +65,6 @@ export default compose(
 
 			let displayedRule = analysedExample || analysedRule
 
-			console.log(displayedRule)
-
 			return (
 				<>
 					{this.state.viewSource ? (
@@ -103,7 +102,23 @@ export default compose(
 								/>
 
 								<section id="rule-content">
-									<div id="ruleValue">
+									<div
+										id="ruleValue"
+										css={`
+											display: flex;
+											justify-content: center;
+											flex-wrap: wrap;
+											align-items: center;
+
+											> .value {
+												font-size: 220%;
+											}
+
+											margin: 0.6em 0;
+											> * {
+												margin: 0 0.6em;
+											}
+										`}>
 										<Value
 											{...displayedRule}
 											nilValueSymbol={
@@ -112,6 +127,10 @@ export default compose(
 													: null
 											}
 										/>
+										<Period
+											period={flatRule['période']}
+											valuesToShow={valuesToShow}
+										/>
 									</div>
 									{displayedRule.defaultValue != null && (
 										<div id="ruleDefault">
@@ -227,3 +246,19 @@ let NamespaceRulesList = compose(
 		</section>
 	)
 })
+
+let Period = ({ period, valuesToShow }) =>
+	period ? (
+		valuesToShow && period === 'flexible' ? (
+			<PeriodSwitch />
+		) : (
+			<span className="inlineMecanism">
+				<span
+					className="name"
+					data-term-definition="période"
+					style={{ background: '#8e44ad' }}>
+					{period}
+				</span>
+			</span>
+		)
+	) : null