From cb0392c5e08106e3469754113495ee6cb3ba0cfd Mon Sep 17 00:00:00 2001
From: Clement G <clement@garrot.org>
Date: Sat, 2 May 2020 17:13:23 +0200
Subject: [PATCH] feat(results) : improve layout/ux on results and add share
 facebook button

---
 public/locale/i18n/fr/resource.json    |  3 ++-
 src/components/views/CreateSuccess.jsx |  2 +-
 src/components/views/Result.jsx        | 30 ++++++++++++++++----------
 src/scss/_app.scss                     | 20 ++++++++++++++++-
 4 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/public/locale/i18n/fr/resource.json b/public/locale/i18n/fr/resource.json
index 4a26ee6..4332890 100644
--- a/public/locale/i18n/fr/resource.json
+++ b/public/locale/i18n/fr/resource.json
@@ -100,6 +100,7 @@
   "Open" : "Ouvrir",
   "Voting address" : "Adresse du vote",
   "Results address" : "Adresse des résultats",
-  "Share election Facebook" : "Partager le vote sur Facebook"
+  "Share election on Facebook" : "Partager le vote sur Facebook",
+  "Share results on Facebook" : "Partager ces résultats sur Facebook"
 
 }
diff --git a/src/components/views/CreateSuccess.jsx b/src/components/views/CreateSuccess.jsx
index 23a4a3a..fcd6060 100644
--- a/src/components/views/CreateSuccess.jsx
+++ b/src/components/views/CreateSuccess.jsx
@@ -62,7 +62,7 @@ class CreateSuccess extends Component {
             {this.props.invitationOnly ? null : (
               <Facebook
                 className="btn btn-outline-light  m-2"
-                text={t("Share election Facebook")}
+                text={t("Share election on Facebook")}
                 url={this.state.urlOfVote}
                 title={"app.mieuxvoter.fr"}
               />
diff --git a/src/components/views/Result.jsx b/src/components/views/Result.jsx
index 5d8f36e..a4bd76b 100644
--- a/src/components/views/Result.jsx
+++ b/src/components/views/Result.jsx
@@ -15,6 +15,7 @@ import {
 import { i18nGrades } from "../../Util";
 import { AppContext } from "../../AppContext";
 import { errorMessage, Error } from "../../Errors";
+import Facebook from "../banner/Facebook";
 
 class Result extends Component {
   static contextType = AppContext;
@@ -185,21 +186,12 @@ class Result extends Component {
       <Container>
         <Row>
           <Col xs="12">
-            <h1>{this.state.title}</h1>
+            <h3>{this.state.title}</h3>
           </Col>
         </Row>
-
         <Row className="mt-5">
           <Col>
-            <h1>{t("Results of the election:")}</h1>
-            <h5>
-              <small>
-                {t("Number of votes:")}
-                {" " + numVotes}
-              </small>
-            </h5>
-            <hr className="mb-5" />
-            <ol>
+            <ol className="result">
               {candidates.map((candidate, i) => {
                 const gradeValue = candidate.grade + offsetGrade;
                 return (
@@ -223,6 +215,12 @@ class Result extends Component {
                 );
               })}
             </ol>
+            <h5>
+              <small>
+                {t("Number of votes:")}
+                {" " + numVotes}
+              </small>
+            </h5>
           </Col>
         </Row>
 
@@ -403,6 +401,16 @@ class Result extends Component {
             </Card>
           </Col>
         </Row>
+        <Row>
+          <Col xs="12" className="text-center pt-2 pb-5">
+            <Facebook
+                className="btn btn-outline-light m-2"
+                text={t("Share results on Facebook")}
+                url={window.location.origin + "/result/" + this.props.match.params.slug}
+                title={encodeURI(this.state.title)}
+            />
+          </Col>
+        </Row>
       </Container>
     );
   }
diff --git a/src/scss/_app.scss b/src/scss/_app.scss
index 7bb8e0b..865b3c1 100644
--- a/src/scss/_app.scss
+++ b/src/scss/_app.scss
@@ -305,7 +305,7 @@ li.sortable {
 .median {
   border-width: 0 3px 0 0;
   border-style: dashed;
-  border-color: $mv-blue-color;
+  border-color: #000;
   min-height: 30px;
   width: 1px;
   position: absolute;
@@ -337,3 +337,21 @@ li.sortable {
 .flag-select__options .flag-select__option__icon {
   top: 0;
 }
+
+/** result **/
+ol.result > li{
+  font-size:1rem;
+  font-weight:normal;
+}
+ol.result > li:nth-child(1){
+  font-size:1.75rem;
+  font-weight:bold;
+}
+
+ol.result > li:nth-child(2){
+  font-size:1.5rem;
+}
+
+ol.result > li:nth-child(3){
+  font-size:1.25rem;
+}
\ No newline at end of file