☎️ Redesign de la page règle pour le mobile

source/components/rule/Rule.css

@@ -4,15 +4,25 @@
 	padding-bottom: 10%;
 }
 
+@media screen and (min-width:800px) {
+	#rule {
+		width: 800px;
+		margin: 0 auto;
+	}
+}
+
+#rule-meta {
+	margin-top: 1.6em;
+}
+
+
 #rule pre {
 	padding: 1em 2em;
 }
 
 .rule-type {
 	padding: 0 .5em;
-	font-size: 75%;
-	margin-right: 1em;
-	display: inline-block;
+	margin: 0 auto;
 	width: 7em;
 	text-align: center;
 	color: #4B4B66;
@@ -23,10 +33,12 @@
 }
 
 #rule h1 {
-	margin-bottom: 1%;
 	color: #4B4B66;
-	display: flex;
-	align-items: center;
+	width: 100%;
+	text-align: center;
+	margin: 0;
+	padding: .2em 0;
+	border-bottom: 1px solid rgba(51, 51, 80, 0.2);
 }
 
 #rule h2 {
@@ -41,27 +53,13 @@
 	margin: 0;
 }
 
-#rule .rule-type {
-	font-size: 35%;
-}
 
-#rule-meta {
-	display: flex;
-	justify-content: flex-start;
-	min-height: 5em;
-	margin-left: 1%;
-}
-
-#rule-meta > div {
-	margin-right: 5%;
-}
 
 #meta-paragraph {
-	/*background: rgba(51, 51, 80, 0.03);*/
-	/*margin: 0 3em;*/
+	background: rgba(51, 51, 80, 0.03);
 	padding: 1em;
-	width: 40%;
-
+	display: flex;
+	justify-content: center;
 }
 #meta-paragraph p {
 	/*border-left: 3px solid #333350;*/
@@ -70,16 +68,30 @@
 	font-size: 95%;
 }
 
+#rule h3 {
+	font-size: 100%;
+	font-weight: 400;
+	margin: .4em 0;
+}
+
+#destinataire {
+	text-align: center;
+	max-width: 25%;
+}
 #destinataire a {
 	text-decoration: none;
 	color: inherit;
 }
+#destinataire > div {
+	width: 70%;
+	margin: 0 auto;
+}
 #destinataire img {
-	width: 130px;
+	width: 100%;
+	opacity: .8;
 	display: block;
 }
 #destinataireName {
-	width: 130px;
 	text-align: center;
 	font-size: 70%;
 	line-height: 1em;

source/components/rule/Rule.js

@@ -66,16 +66,16 @@ export default class Rule extends Component {
 					<title>{titre || capitalise0(name)}</title>
 					<meta name="description" content={description} />
 				</Helmet>
-				<h1>
-					<span className="rule-type">{type}</span>
-					<span className="rule-name">{capitalise0(name)}</span>
-				</h1>
+
 				<section id="rule-meta">
+					<div className="rule-type">{type || 'Règle'}</div>
+					<h1>
+						{capitalise0(name)}
+					</h1>
 					<div id="meta-paragraph">
 						{createMarkdownDiv(description)}
+						{this.renderDestinataire(R.path([type, "destinataire"])(this.rule))}
 					</div>
-					{this.renderDestinataire(R.path([type, "destinataire"])(this.rule))}
-					{this.renderReferences(this.rule)}
 				</section>
 				<div
 					id="ruleValue"
@@ -103,6 +103,7 @@ export default class Rule extends Component {
 						showValues={this.state.showValues}
 						inject={example => this.setState({ example, showValues: true })}
 					/>
+					{this.renderReferences(this.rule)}
 				</section>
 				<button id="reportError">
 					<a
@@ -128,7 +129,7 @@ export default class Rule extends Component {
 
 		return (
 			<div id="destinataire">
-				<h2>Destinataire</h2>
+				<h3>Destinataire</h3>
 				{!destinataireData ? (
 					<p>Non renseigné</p>
 				) : (