fix: clean up homepage

pull/89/head
Pierre-Louis Guhur 2 years ago
parent dc83ec848e
commit ef4b87158d

@ -1,13 +1,14 @@
import Link from "next/link";
import { useTranslation } from "next-i18next";
import Paypal from "../banner/Paypal";
import { useBbox } from "./useBbox";
import { Button, Row, Col } from "reactstrap";
import LanguageSelector from "./LanguageSelector";
import {useTranslation} from "next-i18next";
import {Button, Row, Col} from "reactstrap";
import {useBbox} from "@components/layouts/useBbox";
import Paypal from "@components/banner/Paypal";
import Logo from '@components/Logo.jsx';
import LanguageSelector from "@components/layouts/LanguageSelector";
const Footer = () => {
const linkStyle = { whiteSpace: "nowrap" };
const { t } = useTranslation();
const linkStyle = {whiteSpace: "nowrap"};
const {t} = useTranslation();
const [bboxLink1, link1] = useBbox();
const [bboxLink2, link2] = useBbox();
@ -15,69 +16,26 @@ const Footer = () => {
const [bboxLink4, link4] = useBbox();
const [bboxLink5, link5] = useBbox();
//<Col className="col-
return (
<footer className="text-center">
<div>
<Row className="tacky">
<Col className="col-md-10 col-sm-10">
<Row className="footerRow">
<Col className="col-md-1 footerLogo">
<img src="/logos/logo-footer.svg" alt="logo of Mieux Voter" />
</Col>
<div ref={link1}
className={bboxLink1.top === bboxLink2.top ? "" : "no-tack"}
>
<Link href="/" style={linkStyle}>
Le jugement majoritaire
</Link>
</div>
<div ref={link2}
className={bboxLink2.top === bboxLink3.top ? "" : "no-tack"}
>
<Link
href="https://mieuxvoter.fr/"
target="_blank"
rel="noopener noreferrer"
style={linkStyle}
>
{t("Who are we?")}
</Link>
</div>
<div ref={link3}
className={bboxLink3.top === bboxLink4.top ? "" : "no-tack"}
>
<Link href="/faq" style={linkStyle}>
{t("FAQ")}
</Link>
</div>
<div ref={link4}
className={bboxLink4.top === bboxLink5.top ? "" : "no-tack"}
>
<Link href="/" style={linkStyle}>
Actualités
</Link>
</div>
<div ref={link5}>
<a href="mailto:app@mieuxvoter.fr?subject=[HELP]" style={linkStyle}>
Nous contacter
<footer>
<Row>
<Col className="col-auto me-auto">
<Button className="btn-info">
<a href="/">
Soutenez-nous
</a>
</div>
<div><LanguageSelector /></div>
</Row>
</Col>
<Col className="footerButton">
<Col className="col-xl-10 col-md-12 offset-xl-2">
<Button className="btn-primary btn-footer">
<a href="/">
Soutenez-nous
</a>
</Button>
</Col>
</Col>
</Row>
</div>
</footer>
</Button>
</Col>
<Col className="col-auto ms-auto">
<Button className="btn-info">
<a href="/">
Soutenez-nous
</a>
</Button>
</Col>
</Row>
</footer >
);
};
export default Footer;

@ -21,7 +21,7 @@ module.exports = {
i18nKey: "i18nKey",
defaultsKey: "defaults",
extensions: [".js", ".jsx"],
fallbackKey: function(ns, value) {
fallbackKey: function (ns, value) {
return value;
},
acorn: {
@ -31,7 +31,7 @@ module.exports = {
}
},
lngs: ["en", "fr", "es", "de", "ru"],
ns: ["resource", "common"],
ns: ["resource"],
defaultLng: "en",
defaultNs: "resource",
defaultValue: "__STRING_NOT_TRANSLATED__",
@ -56,7 +56,7 @@ module.exports = {
parser.parseFuncFromString(
content,
{ list: ["i18next._", "i18next.__"] },
{list: ["i18next._", "i18next.__"]},
(key, options) => {
parser.set(
key,

124
package-lock.json generated

@ -1,12 +1,12 @@
{
"name": "mv-front-react",
"version": "1.1.0",
"name": "mieuxvoter-app",
"version": "2.0.0a",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "mv-front-react",
"version": "1.1.0",
"name": "mieuxvoter-app",
"version": "2.0.0a",
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.3",
"@fortawesome/fontawesome-svg-core": "^1.2.35",
@ -19,6 +19,7 @@
"babel-eslint": "^10.1.0",
"bootstrap": "^4.6.0",
"bootstrap-scss": "^4.6.0",
"caniuse-lite": "^1.0.30001423",
"clipboard": "^2.0.10",
"d3": "^7.3.0",
"d3-require": "^1.2.4",
@ -29,7 +30,6 @@
"framer-motion": "^6.2.8",
"gsap": "^3.9.1",
"handlebars": "^4.7.7",
"handlebars-i18next": "^1.0.1",
"highcharts": "^9.3.2",
"highcharts-react-official": "^3.1.0",
"i18next": "^20.2.2",
@ -52,7 +52,6 @@
"react-google-charts": "^3.0.15",
"react-i18next": "^11.8.15",
"react-modal": "^3.14.4",
"react-multi-email": "^0.5.3",
"react-plotly.js": "^2.5.1",
"react-responsive": "^9.0.0-beta.6",
"react-simple-timestamp-to-date": "^1.0.3",
@ -3082,7 +3081,7 @@
"node_modules/@weknow/react-bubble-chart-d3/node_modules/d3-brush": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-1.0.4.tgz",
"integrity": "sha1-AMLyOAGfJPbAoZSibUGhUw/+e8Q=",
"integrity": "sha512-nUFueDzOlvwFvuOBynGSyJM7Wt1H9fKgJeoWFSg3ScS4c7FJBch92FKUJKum4xtgPYHdgH2C3bRg3GzSVltCJQ==",
"dependencies": {
"d3-dispatch": "1",
"d3-drag": "1",
@ -3103,7 +3102,7 @@
"node_modules/@weknow/react-bubble-chart-d3/node_modules/d3-color": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.0.3.tgz",
"integrity": "sha1-vHZD/KjlOoNH4vva/6I2eWtYUJs="
"integrity": "sha512-t+rSOrshj6m2AUOe8kHvTwfUQ5TFoInEkBfmsHHAHPof58dmbRXNpicB7XAyPbMQbcC7i09p2BxeCEdgBd8xmw=="
},
"node_modules/@weknow/react-bubble-chart-d3/node_modules/d3-dispatch": {
"version": "1.0.3",
@ -3835,13 +3834,19 @@
"integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
},
"node_modules/caniuse-lite": {
"version": "1.0.30001315",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001315.tgz",
"integrity": "sha512-5v7LFQU4Sb/qvkz7JcZkvtSH1Ko+1x2kgo3ocdBeMGZSOFpuE1kkm0kpTwLtWeFrw5qw08ulLxJjVIXIS8MkiQ==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/browserslist"
}
"version": "1.0.30001423",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001423.tgz",
"integrity": "sha512-09iwWGOlifvE1XuHokFMP7eR38a0JnajoyL3/i87c8ZjRWRrdKo1fqjNfugfBD0UDBIOz0U+jtNhJ0EPm1VleQ==",
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/browserslist"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/caniuse-lite"
}
]
},
"node_modules/canvas-fit": {
"version": "1.5.0",
@ -4444,9 +4449,9 @@
"integrity": "sha1-NC39EoN8kJdPM/HMCnha6lcNzcI="
},
"node_modules/d3-color": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.0.1.tgz",
"integrity": "sha512-6/SlHkDOBLyQSJ1j1Ghs82OIUXpKWlR0hCsw0XrLSQhuUPuCSmLQ1QPH98vpnQxMUQM2/gfAkUEWsupVpd9JGw==",
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
"integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
"engines": {
"node": ">=12"
}
@ -6650,15 +6655,6 @@
"uglify-js": "^3.1.4"
}
},
"node_modules/handlebars-i18next": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/handlebars-i18next/-/handlebars-i18next-1.0.1.tgz",
"integrity": "sha512-m5sxMthNYFXDYkj7r1MhSiW4tqfIfEKYlUn4TtdXSJT+r6YA9zQddd01BGOgDj3TmjJQc6bDiUQgQVEkluaSdg==",
"peerDependencies": {
"handlebars": "4",
"i18next": "11"
}
},
"node_modules/has": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@ -7320,6 +7316,12 @@
"node": ">=0.10.0"
}
},
"node_modules/jquery": {
"version": "3.6.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.1.tgz",
"integrity": "sha512-opJeO4nCucVnsjiXOE+/PcCgYw9Gwpvs/a6B1LL/lQhwWwpbVEVYDZ1FokFr8PRc7ghYlrFPuyHuiiDNTQxmcw==",
"peer": true
},
"node_modules/js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@ -7701,9 +7703,12 @@
}
},
"node_modules/minimist": {
"version": "1.2.5",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
"integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
"version": "1.2.7",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
"integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==",
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/mouse-change": {
"version": "1.4.0",
@ -8836,15 +8841,6 @@
"react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17"
}
},
"node_modules/react-multi-email": {
"version": "0.5.3",
"resolved": "https://registry.npmjs.org/react-multi-email/-/react-multi-email-0.5.3.tgz",
"integrity": "sha512-1AneeJlAwjvzkPV740q2SXes/kW3HKOzR3gs+U7whrHN5nz+yH5Unosf/rvz8kRj/eFwBf6fTzMqlJiupu7S5Q==",
"peerDependencies": {
"react": "^16.3.2",
"react-dom": "^16.3.2"
}
},
"node_modules/react-onclickoutside": {
"version": "6.12.1",
"resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.12.1.tgz",
@ -9771,6 +9767,11 @@
"xtend": "~4.0.1"
}
},
"node_modules/tiny-emitter": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
},
"node_modules/tinycolor2": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
@ -12506,7 +12507,7 @@
"d3-brush": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-1.0.4.tgz",
"integrity": "sha1-AMLyOAGfJPbAoZSibUGhUw/+e8Q=",
"integrity": "sha512-nUFueDzOlvwFvuOBynGSyJM7Wt1H9fKgJeoWFSg3ScS4c7FJBch92FKUJKum4xtgPYHdgH2C3bRg3GzSVltCJQ==",
"requires": {
"d3-dispatch": "1",
"d3-drag": "1",
@ -12527,7 +12528,7 @@
"d3-color": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.0.3.tgz",
"integrity": "sha1-vHZD/KjlOoNH4vva/6I2eWtYUJs="
"integrity": "sha512-t+rSOrshj6m2AUOe8kHvTwfUQ5TFoInEkBfmsHHAHPof58dmbRXNpicB7XAyPbMQbcC7i09p2BxeCEdgBd8xmw=="
},
"d3-dispatch": {
"version": "1.0.3",
@ -13117,9 +13118,9 @@
"integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
},
"caniuse-lite": {
"version": "1.0.30001315",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001315.tgz",
"integrity": "sha512-5v7LFQU4Sb/qvkz7JcZkvtSH1Ko+1x2kgo3ocdBeMGZSOFpuE1kkm0kpTwLtWeFrw5qw08ulLxJjVIXIS8MkiQ=="
"version": "1.0.30001423",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001423.tgz",
"integrity": "sha512-09iwWGOlifvE1XuHokFMP7eR38a0JnajoyL3/i87c8ZjRWRrdKo1fqjNfugfBD0UDBIOz0U+jtNhJ0EPm1VleQ=="
},
"canvas-fit": {
"version": "1.5.0",
@ -13632,9 +13633,9 @@
"integrity": "sha1-NC39EoN8kJdPM/HMCnha6lcNzcI="
},
"d3-color": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.0.1.tgz",
"integrity": "sha512-6/SlHkDOBLyQSJ1j1Ghs82OIUXpKWlR0hCsw0XrLSQhuUPuCSmLQ1QPH98vpnQxMUQM2/gfAkUEWsupVpd9JGw=="
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
"integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="
},
"d3-contour": {
"version": "3.0.1",
@ -15366,12 +15367,6 @@
"wordwrap": "^1.0.0"
}
},
"handlebars-i18next": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/handlebars-i18next/-/handlebars-i18next-1.0.1.tgz",
"integrity": "sha512-m5sxMthNYFXDYkj7r1MhSiW4tqfIfEKYlUn4TtdXSJT+r6YA9zQddd01BGOgDj3TmjJQc6bDiUQgQVEkluaSdg==",
"requires": {}
},
"has": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@ -15852,6 +15847,12 @@
"resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
"integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
},
"jquery": {
"version": "3.6.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.1.tgz",
"integrity": "sha512-opJeO4nCucVnsjiXOE+/PcCgYw9Gwpvs/a6B1LL/lQhwWwpbVEVYDZ1FokFr8PRc7ghYlrFPuyHuiiDNTQxmcw==",
"peer": true
},
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@ -16152,9 +16153,9 @@
}
},
"minimist": {
"version": "1.2.5",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
"integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
"version": "1.2.7",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
"integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g=="
},
"mouse-change": {
"version": "1.4.0",
@ -17031,12 +17032,6 @@
"warning": "^4.0.3"
}
},
"react-multi-email": {
"version": "0.5.3",
"resolved": "https://registry.npmjs.org/react-multi-email/-/react-multi-email-0.5.3.tgz",
"integrity": "sha512-1AneeJlAwjvzkPV740q2SXes/kW3HKOzR3gs+U7whrHN5nz+yH5Unosf/rvz8kRj/eFwBf6fTzMqlJiupu7S5Q==",
"requires": {}
},
"react-onclickoutside": {
"version": "6.12.1",
"resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.12.1.tgz",
@ -17779,6 +17774,11 @@
"xtend": "~4.0.1"
}
},
"tiny-emitter": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
},
"tinycolor2": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",

@ -1,6 +1,6 @@
{
"name": "mv-front-react",
"version": "1.1.0",
"name": "mieuxvoter-app",
"version": "2.0.0a",
"private": true,
"scripts": {
"dev": "next dev",
@ -21,6 +21,7 @@
"babel-eslint": "^10.1.0",
"bootstrap": "^4.6.0",
"bootstrap-scss": "^4.6.0",
"caniuse-lite": "^1.0.30001423",
"clipboard": "^2.0.10",
"d3": "^7.3.0",
"d3-require": "^1.2.4",
@ -31,7 +32,6 @@
"framer-motion": "^6.2.8",
"gsap": "^3.9.1",
"handlebars": "^4.7.7",
"handlebars-i18next": "^1.0.1",
"highcharts": "^9.3.2",
"highcharts-react-official": "^3.1.0",
"i18next": "^20.2.2",
@ -54,7 +54,6 @@
"react-google-charts": "^3.0.15",
"react-i18next": "^11.8.15",
"react-modal": "^3.14.4",
"react-multi-email": "^0.5.3",
"react-plotly.js": "^2.5.1",
"react-responsive": "^9.0.0-beta.6",
"react-simple-timestamp-to-date": "^1.0.3",

@ -1,6 +1,5 @@
import Head from 'next/head'
import '@styles/globals.css'
import '@styles/footer.css'
import '@styles/loader.css'
import "@styles/scss/config.scss";
import '@fortawesome/fontawesome-svg-core/styles.css'
@ -14,20 +13,20 @@ function Application({Component, pageProps}) {
const origin = typeof window !== 'undefined' && window.location.origin ? window.location.origin : 'http://localhost';
return (<AppProvider>
<Head>
<link rel="icon" key="favicon" href="/favicon.ico" />
<meta property="og:url" content={origin} key="og:url" />
<meta property="og:type" content="website" key="og:type" />
<meta
property="og:image"
content="https://app.mieuxvoter.fr/app-mieux-voter.png"
key="og:image"
/>
<link rel="icon" key="favicon" href="/favicon.ico" />
<meta property="og:url" content={origin} key="og:url" />
<meta property="og:type" content="website" key="og:type" />
<meta
property="og:image"
content="https://app.mieuxvoter.fr/app-mieux-voter.png"
key="og:image"
/>
</Head>
<Header />
<main className="d-flex flex-column justify-content-center">
<Component {...pageProps} />
</main>
</AppProvider>);
}

@ -1,148 +1,197 @@
import {useState} from "react";
import Head from "next/head";
import Link from "next/link";
import Image from "next/image";
import {serverSideTranslations} from "next-i18next/serverSideTranslations";
import {useTranslation} from "next-i18next";
import {Container, Row, Col, Button, Input} from "reactstrap";
import config from "../next-i18next.config.js";
import Footer from '@components/layouts/Footer';
import VoteBallot from './vote/[pid]/[[...tid]]';
import CandidatesField from '../components/form/CandidatesField';
import Logo from '@components/Logo.jsx';
import ballotBox from '../public/urne.svg'
import email from '../public/email.svg'
import respect from '../public/respect.svg'
import vote from '../public/vote.svg'
import twitter from '../public/twitter.svg'
import facebook from '../public/facebook.svg'
import arrowRight from '../public/arrow-white.svg'
export const getStaticProps = async ({locale}) => ({
props: {
...(await serverSideTranslations(locale, [], config)),
},
});
const Home = () => {
const StartForm = () => {
const {t} = useTranslation('resource');
const [title, setTitle] = useState(null);
const {t} = useTranslation();
return (
<Container className="homePage">
<section>
<form className="sectionOneHomeForm" autoComplete="off">
<Row className="sectionOneHomeRowOne">
<Col className="sectionOneHomeContent">
<Row>
<img
src="/logos/logo.svg"
alt="logo of Mieux Voter"
height="128"
className="d-block"
/>
</Row>
<Row>
<h4>Simple et gratuit</h4>
</Row>
<Row>
<h2>Organisez un vote avec le Jugement Majoritaire</h2>
</Row>
<Row className="justify-content-end">
<Input
placeholder={t("resource.writeQuestion")}
autoFocus
required
className="mt-2 mb-0 sectionOneHomeInput"
name="title"
value={title ? title : ""}
onChange={(e) => setTitle(e.target.value)}
maxLength="250"
/>
<p className="pt-0 mt-0 mr-0 maxLength">250</p>
</Row>
<Row>
<Link href={{pathname: "/new/", query: {title: title}}}>
<Button
type="submit"
className="btn btn-block btn-secondary mt-2"
>
{t("resource.start")}
<img src="/arrow-white.svg" className="mr-2" />
</Button>
</Link>
</Row>
<Row className="noAds">
<p>{t("resource.noAds")}</p>
</Row>
</Col>
<Col></Col>
return (
<form className="sectionOneHomeForm" autoComplete="off">
<Row className="sectionOneHomeRowOne">
<Col className="sectionOneHomeContent">
<Row>
<Logo height="128" />
</Row>
<Row>
<h4>{t("motto")}</h4>
</Row>
</form>
</section>
<section className="sectionTwoHome">
<Row className="sectionTwoRowOne">
<Col className="sectionTwoRowOneCol">
<img
src="/urne.svg"
alt="icone d'urne"
height="128"
className="d-block mx-auto"
/>
<h4>Simple</h4>
<p>Créez un vote en moins dune minute</p>
</Col>
<Col className="sectionTwoRowOneCol">
<img
src="/email.svg"
alt="icone d'enveloppe"
height="128"
className="d-block mx-auto"
/>
<h4>Gratuit</h4>
<p>Envoyez des invitations par courriel sans limite d`&apos;`envoi</p>
</Col>
<Col className="sectionTwoRowOneCol">
<img
src="/respect.svg"
alt="icone de mains qui se serrent"
height="128"
className="d-block mx-auto"
/>
<h4>Respect de votre vie privée</h4>
<p>Aucune donnée personnelle n'est enregistrée</p>
</Col>
</Row>
<Row className="sectionTwoRowTwo">
<Row className="sectionTwoHomeImage">
<img src="/vote.svg" />
<Row>
<h2>{t("slogan")}</h2>
</Row>
<Row className="sectionTwoRowTwoCol">
<h3 className="col-md-7">Une expérience de vote démocratique et intuitive</h3>
<Row className="justify-content-end">
<Input
placeholder={t("writeQuestion")}
autoFocus
required
className="mt-2 mb-0 sectionOneHomeInput"
name="title"
value={title ? title : ""}
onChange={(e) => setTitle(e.target.value)}
maxLength="250"
/>
<p className="pt-0 mt-0 mr-0 maxLength">250</p>
</Row>
<Row className="sectionTwoRowTwoCol">
<Col className="sectionTwoRowTwoColText col-md-4">
<h5 className="">Exprimez toute votre opinion</h5>
<p>Au jugement majoritaire, chaque candidat est évalué sur une grille de mention. Vous naurez plus besoin de faire un vote stratégique.</p>
</Col>
<Col className="sectionTwoRowTwoColText col-md-4 offset-md-1">
<h5 className="">Obtenez le meilleur consensus</h5>
<p>Le profil des mérites dresse un panorama précis de lopinion des électeurs. Le gagnant du vote est celui qui est la meilleure mention majoritaire.</p>
</Col>
<Row>
<Link href={{pathname: "/new/", query: {title: title}}}>
<Button type="submit">
<Row className="justify-content-md-center p-2">
<Col className='col-auto'>{t("start")}
</Col><Col className='col-auto d-flex'>
<Image src={arrowRight} width={22} height={22} className="align-self-center" />
</Col>
</Row>
</Button>
</Link>
</Row>
<Row className="sectionTwoRowThreeCol">
<Button
className="btn btn-block btn-secondary btn-sectionTwoHome"
>
Découvrez le jugement majoritaire
<img src="/arrow-white.svg" className="mr-2" />
</Button>
<Row className="noAds">
<p>{t("noAds")}</p>
</Row>
</Row>
<Row className="sharing">
<p>Partagez lapplication Mieux voter</p>
<Link href="https://www.facebook.com/mieuxvoter.fr/"><img src="/facebook.svg" className="mr-2" /></Link>
<Link href="https://twitter.com/mieux_voter"><img src="/twitter.svg" className="mr-2" /></Link>
</Row>
</Col>
<Col></Col>
</Row>
</form>
);
}
const AdvantagesRow = () => {
const {t} = useTranslation('resource');
const resources = [
{
"src": ballotBox,
"alt": t("alt-icon-ballot-box"),
"title": t('advantage-1-title'),
"desc": t('advantage-1-desc'),
},
{
"src": email,
"alt": t("alt-icon-email"),
"title": t('advantage-2-title'),
"desc": t('advantage-2-desc'),
},
{
"src": respect,
"alt": t("alt-icon-respect"),
"title": t('advantage-3-title'),
"desc": t('advantage-3-desc'),
}
]
return (<Row className="sectionTwoRowOne">
{resources.map((item, i) =>
<Col key={i} className="sectionTwoRowOneCol">
<Image
src={item.src}
alt={item.alt}
height="128"
className="d-block mx-auto"
/>
<h4>{item.title}</h4>
<p>{item.desc}</p>
</Col>
)
}
</Row >
)
}
const ExperienceRow = () => {
const {t} = useTranslation('resource');
return (
<Row className="sectionTwoRowTwo">
<Row className="sectionTwoHomeImage">
<Image src={vote} alt={t('alt-icon-ballot')} />
</Row>
<Row className="sectionTwoRowTwoCol">
<h3 className="col-md-8">{t('experience-title')}</h3>
</Row>
<Row className="sectionTwoRowTwoCol">
<Col className="sectionTwoRowTwoColText col-md-4">
<h5 className="">{t('experience-1-title')}</h5>
<p>{t('experience-1-desc')}</p>
</Col>
<Col className="sectionTwoRowTwoColText col-md-4 offset-md-1">
<h5 className="">{t('experience-2-title')}</h5>
<p>{t('experience-2-desc')}</p>
<p></p>
</Col>
</Row>
<Row className="sectionTwoRowThreeCol mt-5">
<Col>
<Button
color="primary"
>
{t('experience-call-to-action')}
<Image src={arrowRight} width={22} height={22} className="mr-2" />
</Button>
</Col>
</Row>
</Row>
)
};
const ShareRow = () => {
const {t} = useTranslation('resource');
return (
<Row className="sharing justify-content-md-center">
<Col className="col-auto">
{t('share')}
</Col>
<Col className="col-auto">
<a
target="_blank"
rel="noopener noreferrer"
href="https://www.facebook.com/mieuxvoter.fr/">
<Image height={22} width={22}
src={facebook} />
</a>
</Col>
<Col className="col-auto">
<a
target="_blank"
rel="noopener noreferrer"
href="https://twitter.com/mieux_voter">
<Image height={22} width={22}
src={twitter} />
</a>
</Col>
</Row>
)
}
const Home = () => {
return (
<Container className="homePage">
<section><StartForm /></section>
<section className="sectionTwoHome">
<AdvantagesRow />
<ExperienceRow />
<ShareRow />
</section>
<Footer />
</Container>
</Container >
);
};

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 107 KiB

@ -1,5 +1,27 @@
{
"title": "Application for Majority Judgment",
"motto": "Simple and free",
"slogan": "Organize a vote with majority judgment",
"logo-alt": "Logo of Better Vote",
"writeQuestion": "Write here your question or describe your vote.",
"start": "Start a vote",
"noAds": "No advertising or ad cookies",
"advantage-1-title": "Simple",
"advantage-1-desc": "Create a vote in less than 1 minute!",
"advantage-2-title": "Free",
"advantage-2-desc": "Send invites without any limitations!",
"advantage-3-title": "Respecting your privacy",
"advantage-3-desc": "No personal data is recorded",
"experience-title": "A democratic and intuitive voting experience",
"experience-1-title": "Express your full opinion.",
"experience-1-desc": "With majority judgment, each candidate is evaluated on a grid of mentions. Strategic voting has no use anymore.",
"experience-2-title": "Get the best possible consensus.",
"experience-2-desc": "The merit profile provides an accurate picture of the voters' opinions. The winner of the vote is the one with the best majority rating.",
"experience-call-to-action": "Find out about the majority judgment",
"alt-icon-ballot-box": "icon of a ballot box",
"alt-icon-envelop": "icon of an envelop",
"alt-icon-respect": "icon of hands holding each other",
"alt-icon-ballot": "icon of a ballot",
"share": "Share the application Better Vote",
"Homepage": "Homepage",
"Source code": "Source code",
"Who are we?": "Who are we?",
@ -10,7 +32,6 @@
"BetterVote": "BetterVote",
"Voting platform": "Voting platform",
"Majority Judgment": "Majority Judgment",
"Start an election": "Start a vote",
"Candidate/proposal ...": "Candidate/proposal...",
"Delete?": "Confirm deletion",
"Are you sure to delete": "Are you sure you want to delete",
@ -19,8 +40,6 @@
"resource.writeQuestionHere": "Write here your question or describe your vote (max. 250 characters)",
"Enter the name of your candidate or proposal here (250 characters max.)": "Enter your proposal or the name of your candidate (max. 250 characters)",
"Please add at least 2 candidates.": "Please add at least 2 candidates.",
"resource.questionLabel": "Question of the vote",
"resource.writeQuestion": "Write here your question or describe your vote",
"resource.eg": "For example:",
"resource.exampleQuestion": "For the role of my representative, I think this candidate is...",
"Add a proposal": "Add a candidate/proposal",
@ -53,7 +72,6 @@
"resource.resultsBtn": "Go to results",
"t": "<0>Warning</0>: you will have no possibility to recover these links, and we will not be able to share them with you. For safekeeping, you can bookmark them in your browser.",
"resource.start": "Start",
"resource.noAds": "No advertising or ad cookies",
"Oops! This election does not exist or it is not available anymore.": "Oops! This vote does not exist or is no longer available.",
"You can start another election.": "You can start another vote.",
"Go back to homepage": "Go back to homepage",

@ -1,5 +1,27 @@
{
"title": "Application au Jugement Majoritaire",
"motto": "Simple et gratuit",
"slogan": "Organisez un vote avec le jugement majoritaire",
"logo-alt": "Logo de Mieux Voter",
"writeQuestion": "Posez la question de votre vote ici.",
"start": "C'est parti",
"noAds": "Pas de publicités, ni de cookies publicitaires",
"advantage-1-title": "Simple",
"advantage-1-desc": "Créez un vote en moins dune minute.",
"advantage-2-title": "Gratuit",
"advantage-2-desc": "Envoyez des invitations par courriel sans limite d'envoi.",
"advantage-3-title": "Respect de votre vie privée",
"advantage-3-desc": "Aucune donnée personnelle n'est enregistrée",
"experience-title": "Une expérience de vote démocratique et intuitive",
"experience-1-title": "Exprimez toute votre opinion.",
"experience-1-desc": "Au jugement majoritaire, chaque candidat est évalué sur une grille de mention. Vous n'aurez plus besoin de faire un vote stratégique.",
"experience-2-title": "Obtenez le meilleur consensus.",
"experience-2-desc": "Le profil des mérites dresse un panorama précis de lopinion des électeurs. Le gagnant du vote est celui qui est la meilleure mention majoritaire.",
"experience-call-to-action": "Découvrez le jugement majoritaire",
"share": "Partagez lapplication Mieux voter",
"alt-icon-ballot-box": "icone d'urne",
"alt-icon-envelop": "icone d'enveloppe",
"alt-icon-respect": "icone de mains qui se serrent",
"alt-icon-ballot": "icone d'un bulletin de vote",
"Homepage": "Accueil",
"Source code": "Code source",
"Who are we?": "Qui sommes-nous ?",

File diff suppressed because it is too large Load Diff

Before

Width:  |  Height:  |  Size: 95 KiB

After

Width:  |  Height:  |  Size: 9.9 KiB

@ -1,33 +0,0 @@
.tacky {
margin: 0;
padding: 0;
list-style-type: none;
flex-basis: auto;
}
.tacky col {
display: inline-block;
}
.tacky col:after {
margin: 0 5px;
}
.tacky col:last-of-type:after {
content: "";
margin: 0;
}
.tacky col.no-tack:after {
content: "";
margin: 0;
display: none;
}
@media screen and (max-width: 930px) {
footer {
display: none!important;
}
}

@ -1,18 +1,18 @@
.loader {
top:0;
left:0;
height:100%;
width:100%;
position:fixed;
z-index:15;
top: 0;
left: 0;
height: 100%;
width: 100%;
position: fixed;
z-index: 15;
}
.loader > img {
width:150px;
height:150px;
position:absolute;
margin:-75px 0 0 -75px;
top:50%;
left:50%;
z-index:16;
width: 150px;
height: 150px;
position: absolute;
margin: -75px 0 0 -75px;
top: 50%;
left: 50%;
z-index: 16;
}

@ -1,21 +1,27 @@
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=DM+Serif+Display:ital@0;1&display=swap');
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=DM+Serif+Display:ital@0;1&display=swap");
h1, h2, h3 {
font-family: "DM Serif Display", serif!important;
h1,
h2,
h3 {
font-family: "DM Serif Display", serif !important;
}
body, h4, h5, p, button {
font-family: "DM Sans", sans-serif!important;
body,
h4,
h5,
p,
button {
font-family: "DM Sans", sans-serif !important;
}
::placeholder {
font-family: "DM Sans", sans-serif!important;
font-family: "DM Sans", sans-serif !important;
}
.rowNoMargin {
margin-left: 0px!important;
margin-right: 0px!important;
margin-left: 0px !important;
margin-right: 0px !important;
}
// mieux voter vars
$mv-blue-color: #2400FD !default;
$mv-dark-blue-color: #0A004C!default;
$mv-blue-color: #2400fd !default;
$mv-dark-blue-color: #0a004c !default;
$mv-light-color: #efefff !default;
$mv-dark-color: #333 !default;
@ -31,7 +37,7 @@ $theme-colors: (
"danger": #990000,
"success": #009900,
"info": #2b8299,
"warning": #ff6e11
"warning": #ff6e11,
) !default;
.logo-text > h1 {
@ -128,8 +134,6 @@ li.sortable {
margin: 10px 0;
}
/* checkbox */
/* The radio */
.radio {
@ -290,8 +294,6 @@ li.sortable {
transform-style: 2s;
}
/** table profiles **/
.profiles thead,
.profiles tbody,
@ -303,7 +305,6 @@ li.sortable {
color: $mv-blue-color;
}
/** react multi email **/
.react-multi-email > span[data-placeholder] {
padding: 0.25em !important;
@ -328,10 +329,6 @@ li.sortable {
top: 0;
}
/** GLOBALS **/
section {
width: 100%;
@ -355,37 +352,37 @@ h5 {
font-weight: bold;
}
.btn {
width: 165px;
padding: 16px 24px;
background: $mv-blue-color;
border: 2px solid #FFFFFF;
//width: 165px;
padding: 8px 24px;
// background: $mv-blue-color;
border: 2px solid #ffffff;
border-radius: 0px;
box-sizing: border-box;
box-shadow: 0px 4px 0px #FFFFFF;
box-shadow: 0px 4px 0px #ffffff;
font-family: DM Sans;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 24px;
letter-spacing: -0.5px;
color: #FFFFFF;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
.btn img {
width: 24px!important;
height: 24px!important;
/*.btn img {
width: 24px !important;
height: 24px !important;
margin: 0px 16px;
}
}*/
.footerRow > .col {
flex-basis: auto!important;
width: auto!important;
flex-basis: auto !important;
width: auto !important;
align-self: center;
}
.footerLogo {
padding-right: 0px;
padding-right: 0px;
}
.footerButton {
padding-right: 0px;
@ -395,7 +392,7 @@ h5 {
padding: 7px;
border: none;
box-shadow: none;
background: #4A2FEF;
background: #4a2fef;
color: white;
font-size: 14px;
width: 100%;
@ -404,71 +401,23 @@ h5 {
cursor: pointer;
}
.ReactFlagsSelect-module_selectFlag__2q5gC {
display: none!important;
display: none !important;
}
.ReactFlagsSelect-module_selectBtn__19wW7 {
border: none!important;
border: none !important;
}
.menu-flags {
width: fit-content!important;
margin-left: 0px!important;
padding-bottom: 0px!important;
width: fit-content !important;
margin-left: 0px !important;
padding-bottom: 0px !important;
}
.footerRow div {
margin: auto 8px;
}
.btn-opacity:hover {
background-color: transparent;
border-color: white;
opacity: 1;
}
.btn-opacity {
background-color: transparent;
width: fit-content;
opacity: 0.4;
transition: 0.5s;
}
.btn-transparent:hover {
background-color: transparent;
border-color: white;
}
.btn-transparent {
background-color: transparent;
width: fit-content;
transition: 0.5s;
margin: auto;
}
.btn-secondary {
width: fit-content;
}
.sectionAjouterCandidat {
display: flex;
flex-direction: column;
}
.ajouterCandidat {
width: 50%;
@ -500,8 +449,8 @@ opacity: 1;
}
.btnTrash {
background-color: transparent;
color: white;
border: none;
color: white;
border: none;
}
.btnValidateCandidate {
background: transparent;
@ -512,22 +461,16 @@ border: none;
@media screen and (min-width: 931px) {
header {
display: none!important;
display: none !important;
}
}
.result {
display: flex;
margin: auto;
justify-content: space-around;
display: flex;
margin: auto;
justify-content: space-around;
}
ol.result > li {
text-align: center;
}
}

@ -1,179 +1,178 @@
.mobile-header {
width: 100%;
}
.nav-mobile {
width: 100%;
padding: 0px;
}
.navbar-header {
width: 100%;
display: flex;
padding: 25px 16px 15px 32px;
justify-content: flex-end;
width: 100%;
}
.nav-mobile {
width: 100%;
padding: 0px;
}
.navbar-header {
width: 100%;
display: flex;
padding: 25px 16px 15px 32px;
justify-content: flex-end;
}
.navbar-collapse {
background: #0A004C;
padding: 10px 20px;
height: 100%;
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}
background: #0a004c;
padding: 10px 20px;
height: 100%;
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}
.navbar-brand img {
width: 112px;
}
.navbar-toggle {
width: 50px!important;
margin-top: 15px;
background: transparent;
box-shadow: none;
border: none;
}
.navbar-toggle {
background: transparent!important;
box-shadow: none!important;
border: none!important;
}
.navbar-toggle img {
height: 50px!important;
width: 50px!important;
}
.navbar-nav-scroll {
max-height: 100vh!important;
}
.navbar-brand-mobile img {
width: 110px;
}
.navbar-accordion-item, .navbar-accordion-body {
background-color: transparent!important;
border: none!important;
box-shadow: none!important;
font-family: "DM Sans", sans-serif!important;
}
.navbar-accordion button {
background-color: transparent!important;
color: white!important;
margin-left: 15px!important;
font-size: 24px!important;
line-height: 31.25px;
text-align: left!important;
padding: 0px!important;
border: none!important;
box-shadow: none!important;
}
.navbar-accordion button:after {
display: inline-block;
width: 0.25rem;
height: 0.25rem;
margin-left: 0.255em;
vertical-align: 0.255em;
content: "";
border-top: 0.3em solid;
border-right: 0.3em solid transparent;
border-bottom: 0;
border-left: 0.3em solid transparent;
}
.navbar-my-link {
color: white!important;
margin-left: 15px!important;
font-size: 24px!important;
line-height: 31.25px;
text-align: left!important;
}
.navbar-credits-container {
margin-top: 25%;
text-align: left;
padding-bottom: 20px;
}
.navbar-credits-container hr {
margin-top: 32px;
color: white;
opacity: 0.3;
}
.navbar-credits-link, .navbar-credits {
color: white!important;
font-size: 18px;
line-height: 31.25px;
text-align: left!important;
margin-left: 0!important;
}
.navbar-credits {
margin-top: 32px;
}
.navbar-jimmy-link {
color: white!important;
font-size: 18px;
line-height: 25px;
margin-left: 5px;
text-decoration: none;
opacity: 0.5;
}
.navbar-close-button {
width: auto!important;
margin: 0px;
padding: 0px;
}
.navbar-close-button img {
width: 117px!important;
margin: 0px;
padding: 0px;
}
.nav-logo {
margin-bottom: 100px;
}
.btn-nav {
background: #0A004C;
border: 2px solid #FFFFFF;
box-shadow: 0px 2px 0px 0px #FFFFFF;
width: 100%;
}
.btn-nav a {
color: white;
}
.sharing-mobile {
display: flex;
justify-content: flex-start;
}
.menu-flags {
width: 25%;
margin-left: 15px;
margin-top: 12px;
}
.menu-flags button {
border-color: white;
color: white;
}
.menu-flags button:after {
border-top: 5px solid white;
color: white;
}
.menu-flags button[aria-expanded="true"]:after {
border-bottom: 5px solid white;
color: white;
}
.navbar, body {
width: 112px;
}
.navbar-toggle {
width: 50px !important;
margin-top: 15px;
background: transparent;
box-shadow: none;
border: none;
}
.navbar-toggle {
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
.navbar-toggle img {
height: 50px !important;
width: 50px !important;
}
.navbar-nav-scroll {
max-height: 100vh !important;
}
.navbar-brand-mobile img {
width: 110px;
}
.navbar-accordion-item,
.navbar-accordion-body {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
font-family: "DM Sans", sans-serif !important;
}
.navbar-accordion button {
background-color: transparent !important;
color: white !important;
margin-left: 15px !important;
font-size: 24px !important;
line-height: 31.25px;
text-align: left !important;
padding: 0px !important;
border: none !important;
box-shadow: none !important;
}
.navbar-accordion button:after {
display: inline-block;
width: 0.25rem;
height: 0.25rem;
margin-left: 0.255em;
vertical-align: 0.255em;
content: "";
border-top: 0.3em solid;
border-right: 0.3em solid transparent;
border-bottom: 0;
border-left: 0.3em solid transparent;
}
.navbar-my-link {
color: white !important;
margin-left: 15px !important;
font-size: 24px !important;
line-height: 31.25px;
text-align: left !important;
}
.navbar-credits-container {
margin-top: 25%;
text-align: left;
padding-bottom: 20px;
}
.navbar-credits-container hr {
margin-top: 32px;
color: white;
opacity: 0.3;
}
.navbar-credits-link,
.navbar-credits {
color: white !important;
font-size: 18px;
line-height: 31.25px;
text-align: left !important;
margin-left: 0 !important;
}
.navbar-credits {
margin-top: 32px;
}
.navbar-jimmy-link {
color: white !important;
font-size: 18px;
line-height: 25px;
margin-left: 5px;
text-decoration: none;
opacity: 0.5;
}
.navbar-close-button {
width: auto !important;
margin: 0px;
padding: 0px;
}
.navbar-close-button img {
width: 117px !important;
margin: 0px;
padding: 0px;
}
.nav-logo {
margin-bottom: 100px;
}
.btn-nav {
background: #0a004c;
border: 2px solid #ffffff;
box-shadow: 0px 2px 0px 0px #ffffff;
width: 100%;
}
.btn-nav a {
color: white;
}
.sharing-mobile {
display: flex;
justify-content: flex-start;
}
.menu-flags {
width: 25%;
margin-left: 15px;
margin-top: 12px;
}
.menu-flags button {
border-color: white;
color: white;
}
.menu-flags button:after {
border-top: 5px solid white;
color: white;
}
.menu-flags button[aria-expanded="true"]:after {
border-bottom: 5px solid white;
color: white;
}
.navbar,
body {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer 10+ */
}
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer 10+ */
}
.navbar::-webkit-scrollbar {
display: none; // Safari and Chrome
width: 0;
height: 0;
}
body::-webkit-scrollbar {
display: none; // Safari and Chrome
width: 0;
height: 0;
}
::-webkit-scrollbar {
width: 0; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
.navbar::-webkit-scrollbar {
display: none; // Safari and Chrome
width: 0;
height: 0;
}
body::-webkit-scrollbar {
display: none; // Safari and Chrome
width: 0;
height: 0;
}
::-webkit-scrollbar {
width: 0; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}

@ -1,263 +1,267 @@
/** Store size of screens for media queries **/
$mobile: 910px;
$tablet: 1210px;
$laptop: 1440px;
$desktop: 1680px;
/** HOMEPAGE **/
.homePage {
max-width: 100%!important;
padding: 0px;
max-width: 100% !important;
padding: 0px;
}
.sectionOneHomeForm {
max-width: 100% !important;
background-color: #2400fd;
}
.sectionOneHomeRowOne {
height: 100%;
}
.sectionOneHomeContent {
display: flex;
flex-direction: column;
align-content: flex-start;
justify-content: space-around;
max-width: 60%;
padding-left: 8%;
padding-right: 8%;
flex-basis: auto;
}
.sectionOneHomeContent img {
width: 200px;
height: auto;
margin: 7% 0%;
}
.sectionOneHomeContent h2 {
margin-bottom: 10%;
}
.sectionOneHomeInput {
height: 48px;
background: $mv-blue-color;
box-shadow: 0px 2px 0px rgba(255, 255, 255, 0.32);
border: none;
margin: 8px 0px;
font-family: DM Sans;
font-style: normal;
font-weight: 500;
font-size: 17px;
line-height: 24px;
letter-spacing: -0.5px;
color: #c3bfd8;
border-radius: 0%;
margin-bottom: 35px;
}
.sectionOneHomeInput:focus {
background-color: transparent;
box-shadow: 0px 2px 0px rgba(255, 255, 255, 0.32);
border: none;
border-radius: 0%;
color: #ffffff;
}
.sectionOneHomeInput::placeholder {
color: #c3bfd8;
}
.maxLength {
color: #c3bfd8;
}
.noAds p {
font-size: 1em;
line-height: 16px;
margin-top: 32px;
opacity: 0.6;
}
.sectionTwoHome {
background: $mv-dark-blue-color;
padding: 10%;
background-image: url("/vote.svg");
background-position: top 46% right;
background-repeat: no-repeat;
}
.sectionTwoHomeImage {
display: none;
}
.sectionTwoRowOne {
text-align: center;
justify-content: space-around;
margin-bottom: 15%;
}
.sectionTwoRowOneCol P {
margin: auto 20%;
}
.btn-sectionTwoHome {
border: none;
box-shadow: 0px 4px 0px #7a64f9;
width: 100%;
margin-top: 85px;
}
.sharing {
width: 100%;
text-align: center;
justify-content: center;
margin-top: 20%;
}
.sharing p {
margin-right: 15px;
margin-top: 32px;
}
.sharing a {
margin: 0% 15px;
display: flex;
}
.sharing img {
margin: 16px 15px 0px;
width: 22px;
}
/* @include media-breakpoint-up('md') {
.sectionOneHomeForm {
background-image: url('/chevron-bicolore.svg');
background-size: contain;
background-position: 120% center;
background-repeat: no-repeat;
}
}
*/
@include media-breakpoint-up("md") {
.sectionOneHomeForm {
background-image: url("/chevron-bicolore.svg");
background-size: contain;
background-position: top right -260px;
background-repeat: no-repeat;
}
}
@include media-breakpoint-up("lg") {
.sectionOneHomeForm {
max-width: 100%!important;
background-color: #2400FD;
background-position: top right -150px;
}
.sectionOneHomeRowOne {
height: 100%;
}
@include media-breakpoint-up("xl") {
.sectionOneHomeForm {
background-position: top right -50px;
}
}
@include media-breakpoint-down("sm") {
.sectionOneHomeForm {
background-image: unset;
}
.sectionOneHomeContent {
display: flex;
flex-basis: auto;
margin: auto 30px;
max-width: 80%;
}
.sectionTwoHome {
background-position: 110% 54%;
}
.sectionTwoRowOne {
flex-direction: column;
align-content: flex-start;
margin-bottom: 66%;
}
.sectionTwoRowOneCol {
padding: 0px;
}
.sectionTwoRowOneCol h4 {
line-height: 28px;
}
.sectionTwoRowOneCol p {
line-height: 18px;
margin: 40px 13% 60px;
}
}
@include media-breakpoint-up("md") {
.sectionOneHomeForm,
.sectionOneHomeContent {
min-height: 100vh;
}
.sectionTwoRowTwoCol h3 {
margin-bottom: 70px;
}
}
@include media-breakpoint-down("sm") {
.sectionOneHomeContent {
align-content: center;
justify-content: space-around;
max-width: 60%;
padding-left: 8%;
padding-right: 8%;
max-width: 100%;
margin: auto 30px;
flex-basis: auto;
}
.sectionOneHomeInput {
margin-top: 30px !important;
}
.sectionOneHomeContent img {
width: 200px;
height: auto;
margin: 7% 0%;
margin: 7% auto;
}
.sectionOneHomeContent h2 {
margin-bottom: 10%;
.sectionOneHomeContent .row {
text-align: center;
}
.sectionOneHomeInput {
height: 48px;
background: $mv-blue-color;
box-shadow: 0px 2px 0px rgba(255, 255, 255, 0.32);
border: none;
margin: 8px 0px;
font-family: DM Sans;
font-style: normal;
font-weight: 500;
font-size: 17px;
line-height: 24px;
letter-spacing: -0.5px;
color: #C3BFD8;
border-radius: 0%;
margin-bottom: 35px;
}
.sectionOneHomeInput:focus {
background-color: transparent;
box-shadow: 0px 2px 0px rgba(255, 255, 255, 0.32);
border: none;
border-radius: 0%;
color: #FFFFFF;
.sectionOneHomeContent .row h2 {
margin: auto;
font-size: 32px;
line-height: 38px;
}
.sectionOneHomeInput::placeholder {
color: #C3BFD8;
.sectionOneHomeContent .row h4 {
margin: auto;
font-size: 20px;
line-height: 32px;
}
.maxLength {
color: #C3BFD8;
.sectionOneHomeContent .row p {
margin: 32px auto;
}
.noAds p {
font-size: 12px;
line-height: 16px;
margin-top: 32px;
opacity: 0.6;
.sectionOneHomeContent .row button {
width: 100%;
}
.sectionTwoHome {
background: $mv-dark-blue-color;
padding: 10%;
background-image: url('/vote.svg');
background-position: 105% 46%;
background-repeat: no-repeat;
background-image: none;
padding: 0px;
}
.sectionTwoHomeImage {
display: none;
}
.sectionTwoRowOne {
text-align: center;
justify-content: space-around;
margin-bottom: 15%;
}
.sectionTwoRowOneCol P {
margin: auto 20%;
display: inline-block;
text-align: right;
width: 100%;
}
.btn-sectionTwoHome {
border: none;
box-shadow: 0px 4px 0px #7A64F9;
width: 100%;
margin-top: 85px;
.sectionTwoHomeImage img {
width: 75%;
}
.sharing {
.sectionTwoRowOne {
margin: 70px auto 0px;
padding: 10%;
width: 100%;
}
.sectionTwoRowTwoCol {
margin: 30px;
flex-direction: column;
text-align: center;
justify-content: center;
margin-top: 20%;
}
.sharing p {
margin-right: 15px;
margin-top: 32px;
}
.sharing a {
margin: 0% 15px;
display: flex;
.sectionTwoRowTwoCol h3 {
font-size: 40px;
line-height: 42px;
}
.sharing img {
margin: 16px 15px 0px;
width: 22px;
}
@media screen and (min-width: 1300px) {
.sectionOneHomeForm {
background-image: url('/chevron-bicolore.svg');
background-size: 40%;
background-position: right;
background-repeat: no-repeat;
}
}
@media screen and (min-width: 1024px) and (max-width: 1299px) {
.sectionOneHomeForm {
background-image: url('/chevron-bicolore.svg');
background-size: contain;
background-position: 120% center;
background-repeat: no-repeat;
}
}
@media screen and (min-width: 911px) and (max-width: 1023px) {
.sectionOneHomeForm {
background-image: url('/chevron-bicolore.svg');
background-size: contain;
background-position: 140% center;
background-repeat: no-repeat;
}
}
@media screen and (max-width: 910px) {
.sectionOneHomeContent {
flex-basis: auto;
margin: auto 30px;
max-width: 80%;
}
.sectionTwoHome {
background-position: 110% 54%;
}
.sectionTwoRowOne {
flex-direction: column;
margin-bottom: 66%;
}
.sectionTwoRowOneCol {
padding: 0px;
}
.sectionTwoRowOneCol h4 {
line-height: 28px;
}
.sectionTwoRowOneCol p {
line-height: 18px;
margin: 40px 13% 60px;
}
}
@media screen and (min-width: 619px) {
.sectionOneHomeForm, .sectionOneHomeContent {
min-height: 100vh;
}
.sectionTwoRowTwoCol h3 {
margin-bottom: 70px;
}
.sectionTwoRowTwoCol h5 {
font-size: 16px;
line-height: 18px;
}
@media screen and (max-width: 618px) {
.sectionOneHomeContent {
align-content: center;
justify-content: space-around;
max-width: 100%;
margin: auto 30px;
flex-basis: auto;
}
.sectionOneHomeInput {
margin-top: 30px!important;
}
.sectionOneHomeContent img {
margin: 7% auto;
}
.sectionOneHomeContent .row {
text-align: center;
.sectionTwoRowTwoColText p {
font-size: 16px;
line-height: 22px !important;
margin: 16px auto 50px;
}
.sectionOneHomeContent .row h2 {
margin: auto;
font-size: 32px;
line-height: 38px;
}
.sectionOneHomeContent .row h4 {
margin: auto;
font-size: 20px;
line-height: 32px;
}
.sectionOneHomeContent .row p {
margin: 32px auto;
}
.sectionOneHomeContent .row button {
width: 100%;
}
.sectionTwoHome {
background: $mv-dark-blue-color;
background-image: none;
padding: 0px;
}
.sectionTwoHomeImage {
display: inline-block;
text-align: right;
.sectionTwoRowThreeCol {
width: 100%;
}
.sectionTwoHomeImage img {
width: 75%;
}
.sectionTwoRowOne {
margin: 70px auto 0px;
padding: 10%;
width: 100%;
}
.sectionTwoRowTwoCol {
margin: 30px;
flex-direction: column;
margin: 30px;
text-align: center;
}
.sectionTwoRowTwoCol h3 {
font-size: 40px;
line-height: 42px;
}
.sectionTwoRowTwoCol h5 {
font-size: 16px;
line-height: 18px;
}
.sectionTwoRowTwoColText p {
font-size: 16px;
line-height: 22px!important;
margin: 16px auto 50px;
}
.sectionTwoRowThreeCol {
width: 100%;
margin: 30px;
text-align: center;
}
.sectionTwoRowThreeCol img {
margin-right: 6px!important;
}
.sharing p {
font-size: 12px;
line-height: 16px;
}
.sectionTwoRowThreeCol img {
margin-right: 6px !important;
}
.sharing p {
font-size: 12px;
line-height: 16px;
}
.sharing {
margin: 60px 0px 75px;
}
}
}
}

File diff suppressed because it is too large Load Diff

@ -1,159 +1,160 @@
.resultPage {
background-image: url('/background-woman-left.svg'), url('/background-woman-right.svg');
background-position: left bottom, right bottom;
background-color: #1d0a93;
min-height: 100vh;
background-repeat: no-repeat;
background-size: auto 300px;
max-width: 100%;
padding: 0px;
background-image: url("/background-woman-left.svg"),
url("/background-woman-right.svg");
background-position: left bottom, right bottom;
background-color: #1d0a93;
min-height: 100vh;
background-repeat: no-repeat;
background-size: auto 300px;
max-width: 100%;
padding: 0px;
}
.resultCard {
margin: auto;
margin: auto;
}
.card-header h4 {
font-size: 15px;
line-height: 24px;
color: #2400FD;
font-size: 15px;
line-height: 24px;
color: #2400fd;
}
.sectionHeaderResult {
background-color: white;
max-width: 100%;
padding: 30px 70px;
justify-content: space-between;
background-color: white;
max-width: 100%;
padding: 30px 70px;
justify-content: space-between;
}
.sectionHeaderResultSideCol img {
margin-right: 10px;
margin-right: 10px;
}
.sectionHeaderResultSideCol p {
color: #8F88BA;
font-size: 14px;
line-height: 16px;
margin-top: 16px;
color: #8f88ba;
font-size: 14px;
line-height: 16px;
margin-top: 16px;
}
.sectionHeaderResult h3 {
color: #0A004C;
font-size: 24px;
line-height: 28px;
text-align: center;
width: 100%;
color: #0a004c;
font-size: 24px;
line-height: 28px;
text-align: center;
width: 100%;
}
.sectionHeaderResultSideCol {
display: flex;
display: flex;
}
.sectionHeaderResultMiddleCol {
align-items: center;
display: flex;
align-items: center;
display: flex;
}
.sectionHeaderResultLeftCol, .sectionHeaderResultMiddleCol, .sectionHeaderResultRightCol {
max-width: fit-content;
.sectionHeaderResultLeftCol,
.sectionHeaderResultMiddleCol,
.sectionHeaderResultRightCol {
max-width: fit-content;
}
.sectionContentResult {
margin: auto;
width: 60%;
margin: auto;
width: 60%;
}
/** result **/
ol.result > li{
font-size: 16px;
ol.result > li {
font-size: 16px;
line-height: 24px;
font-weight:normal;
display: flex;
flex-direction: column;
}
ol.result > li:nth-child(1){
font-size: 23px;
line-height: 24px;
font-weight:bold;
}
.result .resultPosition {
font-size: 16px;
width: 24px;
height: 24px;
font-weight:bold;
background-color: #0A004C;
display: flex;
justify-content: center;
margin: auto;
}
ol.result > li:nth-child(1) > .resultPosition{
background-color: white;
color: #2400FD;
}
.resultPositionCard {
font-size: 16px;
width: 24px;
height: 24px;
font-weight:bold;
background-color: #0A004C;
display: flex;
justify-content: center;
color: white;
}
.card:first-of-type .resultPositionCard{
background-color: #2400FD;
}
.card:first-of-type .candidateName {
color: #2400FD;
font-weight: normal;
display: flex;
flex-direction: column;
}
ol.result > li:nth-child(1) {
font-size: 23px;
line-height: 24px;
font-weight: bold;
}
.result .resultPosition {
font-size: 16px;
width: 24px;
height: 24px;
font-weight: bold;
background-color: #0a004c;
display: flex;
justify-content: center;
margin: auto;
}
ol.result > li:nth-child(1) > .resultPosition {
background-color: white;
color: #2400fd;
}
.resultPositionCard {
font-size: 16px;
width: 24px;
height: 24px;
font-weight: bold;
background-color: #0a004c;
display: flex;
justify-content: center;
color: white;
}
.card:first-of-type .resultPositionCard {
background-color: #2400fd;
}
.card:first-of-type .candidateName {
color: #2400fd;
}
.candidateName {
color: #0a004c;
}
.candidateName {
color: #0A004C;
}
.collapsed > .panel-title .openIcon {
display: none;
display: none;
}
.collapsed > .panel-title .closeIcon {
display: inline-block;
display: inline-block;
}
.panel-title .closeIcon {
display: none;
display: none;
}
.median {
border-width: 0 3px 0 0;
border-style: dashed;
border-color: #000;
min-height: 40px;
width: 1px;
position: absolute;
left: 50%;
margin-top: -8px;
}
.linkResult a {
font-weight: bold;
font-size: 13px;
line-height: 16px;
color: #8F88BA;
text-decoration: none;
}
border-width: 0 3px 0 0;
border-style: dashed;
border-color: #000;
min-height: 40px;
width: 1px;
position: absolute;
left: 50%;
margin-top: -8px;
}
.linkResult a {
font-weight: bold;
font-size: 13px;
line-height: 16px;
color: #8f88ba;
text-decoration: none;
}
@media screen and (max-width: 620px) {
.resultPage {
background-image: none;
}
.sectionHeaderResult {
padding: 24px;
}
.sectionHeaderResult h3 {
text-align: left;
}
.sectionHeaderResult .row {
margin: 0px;
}
.sectionHeaderResultSideCol {
padding: 0px;
}
.sectionContentResult {
padding: 0px 24px;
width: 100%;
}
.btn-result {
margin: auto;
}
.btn-result p {
margin: auto;
}
.column {
flex-direction: column;
}
}
.resultPage {
background-image: none;
}
.sectionHeaderResult {
padding: 24px;
}
.sectionHeaderResult h3 {
text-align: left;
}
.sectionHeaderResult .row {
margin: 0px;
}
.sectionHeaderResultSideCol {
padding: 0px;
}
.sectionContentResult {
padding: 0px 24px;
width: 100%;
}
.btn-result {
margin: auto;
}
.btn-result p {
margin: auto;
}
.column {
flex-direction: column;
}
}

@ -1,191 +1,194 @@
.sectionOneVoteContent {
max-width: 40%;
justify-content: center;
max-width: 40%;
justify-content: center;
}
.btn-black {
box-shadow: 0px 2px 0px 0px #000000;
color: white;
border-color: #000000;
box-shadow: 0px 2px 0px 0px #000000;
color: white;
border-color: #000000;
}
.modalVote {
width: 100vw;
max-width: 100vw;
min-height: 100vh;
background-color: #17048e;
background-image: url('/back.svg');
background-size: 100%;
background-position: center;
margin: 0px!important;
display: flex;
}
.modalVoteHeader, .modalVoteBody {
width: fit-content;
margin: auto;
width: 100vw;
max-width: 100vw;
min-height: 100vh;
background-color: #17048e;
background-image: url("/back.svg");
background-size: 100%;
background-position: center;
margin: 0px !important;
display: flex;
}
.modalVoteHeader,
.modalVoteBody {
width: fit-content;
margin: auto;
}
.modalVote > .modal-content {
background: transparent;
background: transparent;
}
.modalVote > .modal-content > div > .modal-header {
border-bottom: none;
border-bottom: none;
}
.modalVote > .modal-content > div > .modal-header > .modal-title {
color: white;
font-size: 36px;
line-height: 56px;
margin: auto;
font-family: "DM Serif Display", serif!important;
font-weight: normal;
color: white;
font-size: 36px;
line-height: 56px;
margin: auto;
font-family: "DM Serif Display", serif !important;
font-weight: normal;
}
.candidateGrade {
width: 100%;
height: 32px;
margin: auto 8px;
position: absolute;
top: 0;
left: 0;
box-shadow: 0px 2px 0px 0px #8F88BA;
border: none;
display: flex;
align-items: center;
width: 100%;
height: 32px;
margin: auto 8px;
position: absolute;
top: 0;
left: 0;
box-shadow: 0px 2px 0px 0px #8f88ba;
border: none;
display: flex;
align-items: center;
}
.voteCheck {
width: 100px;
height: 32px;
margin: auto 8px;
padding: 0px;
width: 100px;
height: 32px;
margin: auto 8px;
padding: 0px;
}
.checkmark > .badge {
width: 100%;
width: 100%;
}
.cardVoteLabel {
max-width: fit-content;
color: #0A004C;
max-width: fit-content;
color: #0a004c;
}
.cardVoteGrades {
display: flex;
display: flex;
}
.warningVote {
background-color: #2400FD;
color: white;
background-color: #2400fd;
color: white;
}
.backToVoteBtn, .warningVote {
width: 100%;
margin: auto;
.backToVoteBtn,
.warningVote {
width: 100%;
margin: auto;
}
.noRateVote {
max-width: 550px;
max-width: 550px;
}
.noRateVote > .modal-content {
padding: 40px 32px;
padding: 40px 32px;
}
.noRateVote > .modal-content > .modal-header h5 {
font-size: 28px;
line-height: 32px;
color: #2400FD;
font-weight: 500;
font-size: 28px;
line-height: 32px;
color: #2400fd;
font-weight: 500;
}
.noRateVote > .modal-content > .modal-body {
font-size: 16px;
line-height: 24px;
color: #0A004C;
font-weight: 500;
font-size: 16px;
line-height: 24px;
color: #0a004c;
font-weight: 500;
}
.vote-animation {
z-index: 5;
position: relative;
z-index: 5;
position: relative;
}
.confirmH2 {
font-size: 32px;
line-height: 32px;
margin: auto;
font-size: 32px;
line-height: 32px;
margin: auto;
}
.confirmLeft {
max-width: 35%;
background-color: #0A004C;
padding: 40px;
color: white;
margin-right: 30px;
max-width: 35%;
background-color: #0a004c;
padding: 40px;
color: white;
margin-right: 30px;
}
.confirmRight {
max-width: 35%;
background-color: white;
padding: 40px;
color: #0A004C;
margin-left: 30px;
max-width: 35%;
background-color: white;
padding: 40px;
color: #0a004c;
margin-left: 30px;
}
.thanksVote h4 {
font-weight: bold;
font-size: 20px;
line-height: 24px;
font-weight: bold;
font-size: 20px;
line-height: 24px;
}
.thanksVote p, .confirmLeft p, .confirmRight p {
font-size: 14px;
line-height: 16px;
.thanksVote p,
.confirmLeft p,
.confirmRight p {
font-size: 14px;
line-height: 16px;
}
@media screen and (max-width: 1440px) {
.sectionOneVoteContent {
max-width: 70%;
}
.sectionOneVoteContent {
max-width: 70%;
}
}
@media screen and (min-width: 900px) {
.voteMobile {
display: none;
}
.voteMobile {
display: none;
}
}
@media screen and (max-width: 899px) {
.sectionOneVoteContent {
max-width: 80%;
}
.voteDesktop {
display: none;
}
.cardVote, .cardVoteGrades {
flex-direction: column;
}
.candidateGrade {
margin: auto;
}
.voteCheck {
width: 100%;
margin: auto;
}
.candidateGrade {
justify-content: center;
}
.checkmark > .badge {
width: fit-content;
}
.embla {
overflow: hidden;
}
.embla__container {
display: flex;
}
.embla__slide {
position: relative;
flex: 0 0 100%;
}
.embla__nav {
justify-content: center;
}
.embla__btn {
width: 32px;
height: 32px;
display: flex;
}
.embla__dots {
.sectionOneVoteContent {
max-width: 80%;
}
.voteDesktop {
display: none;
}
.cardVote,
.cardVoteGrades {
flex-direction: column;
}
.candidateGrade {
margin: auto;
}
.voteCheck {
width: 100%;
margin: auto;
}
.candidateGrade {
justify-content: center;
}
.checkmark > .badge {
width: fit-content;
}
.embla {
overflow: hidden;
}
.embla__container {
display: flex;
}
.embla__slide {
position: relative;
flex: 0 0 100%;
}
.embla__nav {
justify-content: center;
}
.embla__btn {
width: 32px;
height: 32px;
display: flex;
}
.embla__dots {
display: flex;
list-style: none;
justify-content: center;
padding-top: 10px;
}
.embla__dot {
background-color: #0A004C4D;
background-color: #0a004c4d;
cursor: pointer;
position: relative;
padding: 0;
@ -204,39 +207,42 @@ line-height: 24px;
.embla__dot.is-selected {
background-color: white;
opacity: 1;
color: #0A004C;
color: #0a004c;
}
.btn-background {
background-color:#291797;
background-color: #291797;
width: 100%;
display: flex;
display: flex;
}
.backToVoteBtn, .warningVote {
.backToVoteBtn,
.warningVote {
width: 300px;
margin: auto;
}
.confirmRowTwo {
}
.confirmRowTwo {
flex-direction: column;
}
.confirmRowOne > .col > .voteMobile {
border: 2px solid #0A004C;
box-shadow: 0px 4px 0px 0px #0A004C;
}
}
.confirmRowOne > .col > .voteMobile {
border: 2px solid #0a004c;
box-shadow: 0px 4px 0px 0px #0a004c;
}
.confirmLeft, .confirmRight {
.confirmLeft,
.confirmRight {
max-width: 100%;
margin: auto;
padding: 24px;
}
.confirmH2 {
margin: 24px auto;
}
.confirmRight div, .confirmRight button {
}
.confirmH2 {
margin: 24px auto;
}
.confirmRight div,
.confirmRight button {
width: 100%;
}
}
}
@media screen and (max-width: 550px) {
.modalVoteBody {
.modalVoteBody {
width: auto;
}
}
}

@ -1,6 +1,6 @@
// mieux voter vars
$mv-blue-color: #2400FD;
$mv-dark-blue-color: #0A004C;
$mv-blue-color: #2400fd;
$mv-dark-blue-color: #0a004c;
$mv-light-color: #efefff;
$mv-light-color-hover: rgba(#efefff, 0.8);
$mv-dark-color: #333;
@ -17,7 +17,7 @@ $theme-colors: (
"danger": #990000,
"success": #009900,
"info": #2b8299,
"warning": #ff6e11
"warning": #ff6e11,
);
@import "_bootstrap.scss";
@ -26,4 +26,6 @@ $theme-colors: (
@import "_newVote.scss";
@import "_resultVote.scss";
@import "_header.scss";
@import "_vote.scss";
@import "_vote.scss";
@import "_buttons.scss";
@import "_footer.scss";

Loading…
Cancel
Save