MieuxVoter
/
mvfront-react
mirror of https://github.com/MieuxVoter/mvfront-react
4
1
Fork 0
Code Issues Releases Wiki Polls Activity

fix: mobile

Browse Source
pull/89/head
Pierre-Louis Guhur 1 year ago
parent 5a9740350e
commit 95dd8124b6
8 changed files with 275 additions and 172 deletions
Show Stats Download Patch File Download Diff File

12
components/Advantages.tsx
Unescape View File

@ -1,12 +1,12 @@
import {useTranslation} from 'next-i18next';
import { useTranslation } from 'next-i18next';
import Image from 'next/image';
import {Row, Col} from 'reactstrap';
import { Row, Col } from 'reactstrap';
import ballotBox from '../public/urne.svg';
import email from '../public/email.svg';
import respect from '../public/respect.svg';
const AdvantagesRow = () => {
const {t} = useTranslation('resource');
const { t } = useTranslation('resource');
const resources = [
{
src: ballotBox,
@ -28,9 +28,9 @@ const AdvantagesRow = () => {
},
];
return (
<Row className="sectionTwoRowOne">
<Row>
{resources.map((item, i) => (
<Col key={i} className="sectionTwoRowOneCol">
<Col key={i} className="my-5 col-md-4 col-12">
<Image
src={item.src}
alt={item.alt}
@ -45,4 +45,4 @@ const AdvantagesRow = () => {
);
};
export default AdvantagesRow
export default AdvantagesRow;

80
components/Experience.tsx
Unescape View File

@ -1,47 +1,49 @@
import {useTranslation} from 'next-i18next';
import { useTranslation } from 'next-i18next';
import Image from 'next/image';
import {Row, Col, Button} from 'reactstrap';
import { Row, Col, Button, Container } from 'reactstrap';
import arrowRight from '../public/arrow-white.svg';
import vote from '../public/vote.svg';
const ExperienceRow = () => {
const {t} = useTranslation('resource');
const Experiencediv = () => {
const { t } = useTranslation('resource');
return (
<Row className="sectionTwoRowTwo">
<Row className="sectionTwoHomeImage">
<Image src={vote} alt={t('home.alt-icon-ballot')} />
</Row>
<Row className="sectionTwoRowTwoCol">
<h3 className="col-md-8">{t('home.experience-name')}</h3>
</Row>
<Row className="sectionTwoRowTwoCol">
<Col className="sectionTwoRowTwoColText col-md-4">
<h5 className="">{t('home.experience-1-name')}</h5>
<p>{t('home.experience-1-desc')}</p>
</Col>
<Col className="sectionTwoRowTwoColText col-md-4 offset-md-1">
<h5 className="">{t('home.experience-2-name')}</h5>
<p>{t('home.experience-2-desc')}</p>
<p></p>
</Col>
</Row>
<Row className="sectionTwoRowThreeCol mt-5">
<Col>
<Button color="primary" className="p-4 fs-5">
{t('home.experience-call-to-action')}
<Image
src={arrowRight}
width={22}
height={22}
alt="icon arrow right"
/>
</Button>
</Col>
</Row>
</Row>
<div className="sectionTwodivTwo">
<div className="w-100 justify-content-center d-flex">
<Image
className="d-block d-md-none"
src={vote}
alt={t('home.alt-icon-ballot')}
/>
</div>
<div className="d-md-block d-none vote_background"></div>
<h3 className="mb-5">{t('home.experience-name')}</h3>
<Container>
<Row className="sectionTwodivTwodiv mb-5">
<Col className="sectionTwodivTwodivText col-12 col-md-4">
<h5 className="">{t('home.experience-1-name')}</h5>
<p>{t('home.experience-1-desc')}</p>
</Col>
<Col className="sectionTwodivTwodivText col-12 col-md-4 offset-md-1">
<h5 className="">{t('home.experience-2-name')}</h5>
<p>{t('home.experience-2-desc')}</p>
<p></p>
</Col>
</Row>
</Container>
<div className="d-flex w-100 justify-content-center mt-5">
<Button color="primary" className="p-4 fs-5">
{t('home.experience-call-to-action')}
<Image
src={arrowRight}
width={22}
height={22}
alt="icon arrow right"
/>
</Button>
</div>
</div>
);
};
export default ExperienceRow
export default Experiencediv;

11
components/Share.tsx
Unescape View File

@ -1,19 +1,18 @@
import Image from 'next/image';
import {useTranslation} from 'next-i18next';
import {Row, Col} from 'reactstrap';
import { useTranslation } from 'next-i18next';
import { Row, Col } from 'reactstrap';
import twitter from '../public/twitter.svg';
import facebook from '../public/facebook.svg';
interface ShareInterface {
title?: string;
}
const ShareRow = ({title}: ShareInterface) => {
const {t} = useTranslation('resource');
const ShareRow = ({ title }: ShareInterface) => {
const { t } = useTranslation('resource');
return (
<Row className="sharing justify-content-md-center">
<Col className="col-auto">{title || t('common.share')}</Col>
<Col className="col-md-auto col-12">{title || t('common.share')}</Col>
<Col className="col-auto">
<a
target="_blank"

27
pages/_app.tsx
Unescape View File

@ -2,12 +2,12 @@ import Head from 'next/head';
import '@styles/globals.css';
import '@styles/scss/config.scss';
import '@fortawesome/fontawesome-svg-core/styles.css';
import {appWithTranslation} from 'next-i18next';
import {AppProvider} from '@services/context';
import { appWithTranslation } from 'next-i18next';
import { AppProvider } from '@services/context';
import Header from '@components/layouts/Header';
import Footer from '@components/layouts/Footer';
function Application({Component, pageProps}) {
function Application({ Component, pageProps }) {
const origin =
typeof window !== 'undefined' && window.location.origin
? window.location.origin
@ -24,22 +24,19 @@ function Application({Component, pageProps}) {
key="og:image"
/>
</Head>
<main className="d-flex flex-column justify-content-between">
<div className="d-flex flex-grow-1 justify-content-center">
<Header />
<div className="d-flex flex-column h-100 w-100 align-items-start">
<Component {...pageProps} />
</div>
</div>
<div className="min-vh-100 d-flex flex-column justify-content-between">
<Header />
<Component {...pageProps} />
<Footer />
</main>
</div>
</>
);
}
const AppWithContext = ({Component, pageProps}) => <AppProvider>
<Application Component={Component} pageProps={pageProps} />
</AppProvider>
const AppWithContext = ({ Component, pageProps }) => (
<AppProvider>
<Application Component={Component} pageProps={pageProps} />
</AppProvider>
);
export default appWithTranslation(AppWithContext);

186
pages/index.tsx
Unescape View File

@ -1,93 +1,149 @@
import {useState} from 'react';
import { useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import {GetStaticProps} from 'next';
import {serverSideTranslations} from 'next-i18next/serverSideTranslations';
import {useTranslation} from 'next-i18next';
import {Container, Row, Col, Button, Input} from 'reactstrap';
import { GetStaticProps } from 'next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { useTranslation } from 'next-i18next';
import { Container, Row, Col, Button, Input } from 'reactstrap';
import Logo from '@components/Logo';
import Share from '@components/Share';
import AdvantagesRow from '@components/Advantages'
import ExperienceRow from '@components/Experience'
import {CREATE_ELECTION} from '@services/routes';
import AdvantagesRow from '@components/Advantages';
import ExperienceRow from '@components/Experience';
import { CREATE_ELECTION } from '@services/routes';
import arrowRight from '../public/arrow-white.svg';
export const getStaticProps: GetStaticProps = async ({locale}) => ({
export const getStaticProps: GetStaticProps = async ({ locale }) => ({
props: {
...(await serverSideTranslations(locale, ['resource'])),
},
});
const StartForm = () => {
const {t} = useTranslation('resource');
const { t } = useTranslation('resource');
const [name, setName] = useState(null);
return (
<form className="sectionOneHomeForm" autoComplete="off">
<Row className="sectionOneHomeRowOne">
<Col className="sectionOneHomeContent">
<Logo height="128" />
<Row>
<h4>{t('home.motto')}</h4>
</Row>
<Row>
<h2>{t('home.slogan')}</h2>
</Row>
<Row className="justify-content-end">
<Input
placeholder={t('home.writeQuestion')}
autoFocus
required
className="mt-2 mb-0 sectionOneHomeInput"
name="name"
value={name ? name : ''}
onChange={(e) => setName(e.target.value)}
/>
<>
<form className="sectionOneHomeForm d-none d-md-block" autoComplete="off">
<Row className="sectionOneHomeRowOne">
<Col className="sectionOneHomeContent">
<Logo height="128" />
<Row>
<h4>{t('home.motto')}</h4>
</Row>
<Row>
<h2>{t('home.slogan')}</h2>
</Row>
<Row className="justify-content-end">
<Input
placeholder={t('home.writeQuestion')}
autoFocus
required
className="mt-2 mb-0 sectionOneHomeInput"
name="name"
value={name ? name : ''}
onChange={(e) => setName(e.target.value)}
/>
<p className="pt-0 mt-0 maxLength">250</p>
</Row>
<Row>
<Link href={{pathname: CREATE_ELECTION, query: {name: name}}}>
<Button color="secondary" outline={true} type="submit">
<Row className="justify-content-md-center p-2">
<Col className="col-auto">{t('home.start')}</Col>
<Col className="col-auto d-flex">
<Image
src={arrowRight}
width={22}
height={22}
alt={t('home.start')}
className="align-self-center"
/>
</Col>
</Row>
</Button>
</Link>
</Row>
<Row className="noAds">
<p>{t('home.noAds')}</p>
</Row>
</Col>
<Col></Col>
</Row>
</form>
<p className="pt-0 mt-0 maxLength">250</p>
</Row>
<Row>
<Link href={{ pathname: CREATE_ELECTION, query: { name: name } }}>
<Button color="secondary" outline={true} type="submit">
<Row className="justify-content-md-center p-2">
<Col className="col-auto">{t('home.start')}</Col>
<Col className="col-auto d-flex">
<Image
src={arrowRight}
width={22}
height={22}
alt={t('home.start')}
className="align-self-center"
/>
</Col>
</Row>
</Button>
</Link>
</Row>
<Row className="noAds">
<p>{t('home.noAds')}</p>
</Row>
</Col>
<Col></Col>
</Row>
</form>
{/**
* Mobile
*/}
<div className="d-block d-md-none py-5 px-3 min-vh-100 d-flex d-md-none flex-column align-items-center justify-content-between">
<Logo width={164} />
<h4>{t('home.motto')}</h4>
<h2 className="d-none d-md-block">{t('home.slogan')}</h2>
<h2
className="d-block d-mg-none text-center"
style={{ fontSize: '32px' }}
>
{t('home.slogan')}
</h2>
<div className="d-block w-100">
<Input
placeholder={t('home.writeQuestion')}
autoFocus
required
className="mt-2 mb-0 sectionOneHomeInput"
name="name"
value={name ? name : ''}
onChange={(e) => setName(e.target.value)}
/>
<p className="pt-0 mt-0 text-end text-muted">250</p>
</div>
<form autoComplete="off" className="w-100">
<Link
className="d-grid w-100"
href={{ pathname: CREATE_ELECTION, query: { name: name } }}
>
<Button color="secondary" outline={true} type="submit">
<Row className="justify-content-md-center p-2">
<Col className="col-auto">{t('home.start')}</Col>
<Col className="col-auto d-flex">
<Image
src={arrowRight}
width={22}
height={22}
alt={t('home.start')}
className="align-self-center"
/>
</Col>
</Row>
</Button>
</Link>
</form>
<div className="noAds">{t('home.noAds')}</div>
</div>
</>
);
};
const Home = () => {
const {t} = useTranslation('resource');
const { t } = useTranslation('resource');
return (
<Container fluid={true} className="p-0">
<section>
<>
<div className="bg-primary">
<StartForm />
</section>
<section className="sectionTwoHome">
<AdvantagesRow />
</div>
<section className="sectionTwoHome p-2 pb-5 text-center">
<div className="d-none d-md-block pt-5 mt-5">
<AdvantagesRow />
</div>
<div className="d-md-none d-block">
<AdvantagesRow />
</div>
<ExperienceRow />
<Share />
</section>
</Container>
</>
);
};

1
pages/result/[pid]/[[...tid]].tsx
Unescape View File

@ -146,7 +146,6 @@ const ResultBanner = ({ result }) => {
: 'http://localhost';
// We hide the token!
const url = `${origin}${RESULTS}/${displayRef(result.ref)}`;
console.log(result);
return (
<>

121
pages/vote/[pid]/[[...tid]].tsx
Unescape View File

@ -1,31 +1,25 @@
import {useRouter} from 'next/router';
import {serverSideTranslations} from 'next-i18next/serverSideTranslations';
import {useTranslation} from 'next-i18next';
import {
Col,
Container,
Row,
} from 'reactstrap';
import { useRouter } from 'next/router';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { useTranslation } from 'next-i18next';
import { Col, Container, Row } from 'reactstrap';
import Link from 'next/link';
import Footer from '@components/layouts/Footer';
import ShareRow from '@components/Share';
import Share from '@components/Share';
import Button from '@components/Button';
import ExperienceRow from '@components/Experience';
import AdvantagesRow from '@components/Advantages';
import Logo from '@components/Logo';
import {BALLOT} from '@services/routes';
import {faArrowRight} from '@fortawesome/free-solid-svg-icons';
import {displayRef} from '@services/utils';
import { BALLOT } from '@services/routes';
import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
import { displayRef } from '@services/utils';
export async function getServerSideProps({query: {pid, tid}, locale}) {
export async function getServerSideProps({ query: { pid, tid }, locale }) {
return {
props: {
...(await serverSideTranslations(locale, ['resource'])),
electionRef: pid.replaceAll("-", ""),
electionRef: pid.replaceAll('-', ''),
token: tid || null,
},
}
};
}
interface VoteInterface {
@ -33,13 +27,11 @@ interface VoteInterface {
token?: string;
}
const GoToBallotConfirm = ({electionRef, token}) => {
const {t} = useTranslation();
const GoToBallotConfirmDesktop = ({ electionRef, token }) => {
const { t } = useTranslation();
return (
<div className="sectionOneHomeForm">
<div className="sectionOneHomeForm d-none d-md-block">
<Row className="sectionOneHomeRowOne">
<Col className="sectionOneHomeContent">
<Logo height="128" />
@ -47,13 +39,16 @@ const GoToBallotConfirm = ({electionRef, token}) => {
<h2 className="mb-4 mt-5">{t('common.welcome')}</h2>
</Row>
<Row>
<h4 className="mb-5">
{t('vote.home-desc')}
</h4>
<h4 className="mb-5">{t('vote.home-desc')}</h4>
</Row>
<Row>
<Link href={`${BALLOT}/${displayRef(electionRef)}/${token ? token : ""}`}>
<div className="w-100">
<Link
className="d-grid d-md-block w-100"
href={`${BALLOT}/${displayRef(electionRef)}/${
token ? token : ''
}`}
>
<Button
color="secondary"
outline={true}
@ -61,9 +56,10 @@ const GoToBallotConfirm = ({electionRef, token}) => {
icon={faArrowRight}
position="right"
>
{t('vote.home-start')}</Button>
{t('vote.home-start')}
</Button>
</Link>
</Row>
</div>
<Row className="noAds my-0">
<p>{t('home.noAds')}</p>
</Row>
@ -75,22 +71,71 @@ const GoToBallotConfirm = ({electionRef, token}) => {
</Link>
</Row>
</Col>
</Row >
</div >
)
}
</Row>
</div>
);
};
const GoToBallotConfirmMobile = ({ electionRef, token }) => {
const { t } = useTranslation();
return (
<div className="d-block d-md-none bg-primary py-5 px-3 min-vh-100 d-flex d-md-none flex-column align-items-center justify-content-between">
<Col className="sectionOneHomeContent">
<Logo width={164} />
<Row>
<h2 className="mb-4 mt-5">{t('common.welcome')}</h2>
</Row>
<Row>
<h4 className="mb-5">{t('vote.home-desc')}</h4>
</Row>
const Vote = ({electionRef, token}: VoteInterface) => {
<div className="w-100">
<Link
className="d-grid d-md-block w-100"
href={`${BALLOT}/${displayRef(electionRef)}/${token ? token : ''}`}
>
<Button
color="secondary"
outline={true}
type="submit"
icon={faArrowRight}
position="right"
>
{t('vote.home-start')}
</Button>
</Link>
</div>
<Row className="noAds my-0">
<p>{t('home.noAds')}</p>
</Row>
<Row>
<Link href="https://mieuxvoter.fr/le-jugement-majoritaire">
<Button className="btn-black mt-2 mb-5">
{t('common.about-mj')}
</Button>
</Link>
</Row>
</Col>
</div>
);
};
const Vote = ({ electionRef, token }: VoteInterface) => {
return (
<>
<section>
<GoToBallotConfirm electionRef={electionRef} token={token} />
<GoToBallotConfirmDesktop electionRef={electionRef} token={token} />
<GoToBallotConfirmMobile electionRef={electionRef} token={token} />
</section>
<section className="sectionTwoHome">
<AdvantagesRow />
<section className="sectionTwoHome p-2 pb-5 text-center">
<div className="d-none d-md-block pt-5 mt-5">
<AdvantagesRow />
</div>
<div className="d-md-none d-block">
<AdvantagesRow />
</div>
<ExperienceRow />
<ShareRow />
<Share />
</section>
</>
);

9
styles/scss/_homePage.scss
Unescape View File

@ -62,9 +62,14 @@ $desktop: 1680px;
}
.sectionTwoHome {
background: $mv-dark-blue-color;
padding: 10%;
}
.vote_background {
position: absolute;
right: 0px;
width: 100%;
height: 500px;
background-image: url('/vote.svg');
background-position: top 46% right;
background-position: top right;
background-repeat: no-repeat;
}
.sectionTwoHomeImage {

Write Preview
Loading…
Cancel
Save