From b6a76572bc328baf443de82681665770357a9cea Mon Sep 17 00:00:00 2001
From: mama <mael.thomas@data.gouv.fr>
Date: Fri, 13 Oct 2017 16:50:36 +0200
Subject: [PATCH] =?UTF-8?q?:phone:=20Redesign=20de=20la=20page=20r=C3=A8gl?=
 =?UTF-8?q?e=20pour=20le=20mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/components/rule/Rule.css | 62 ++++++++++++++++++++-------------
 source/components/rule/Rule.js  | 15 ++++----
 2 files changed, 45 insertions(+), 32 deletions(-)

diff --git a/source/components/rule/Rule.css b/source/components/rule/Rule.css
index 796fc2ffc..78dac0f27 100644
--- a/source/components/rule/Rule.css
+++ b/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;
diff --git a/source/components/rule/Rule.js b/source/components/rule/Rule.js
index 16d49cfe5..750175b65 100644
--- a/source/components/rule/Rule.js
+++ b/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>
 				) : (