feat(results) : improve layout/ux on results and add share facebook button

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"
 
 }

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"}
               />

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>
     );
   }

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;
+}