Browse Source

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

master
Clement G 2 years ago
parent
commit
cb0392c5e0
  1. 3
      public/locale/i18n/fr/resource.json
  2. 2
      src/components/views/CreateSuccess.jsx
  3. 30
      src/components/views/Result.jsx
  4. 20
      src/scss/_app.scss

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

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

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

20
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;
}
Loading…
Cancel
Save