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

fix: ballot

Browse Source
pull/89/head
Pierre-Louis Guhur 1 year ago
parent 6b780ed656
commit 043033075b
5 changed files with 79 additions and 77 deletions
Show Stats Download Patch File Download Diff File

8
components/PatternedBackground.tsx
Unescape View File

@ -1,5 +1,3 @@
export default ({children}) => {
return <div className="waiting position-absolute w-100">{children}</div>
}
export default ({ children }) => {
return <div className="waiting min-vh-100 min-vw-100">{children}</div>;
};

139
components/WaitingBallot.tsx
Unescape View File

@ -31,9 +31,16 @@ const ButtonResults = ({ election }) => {
if (!election.hideResults || isEnded(election.date_end)) {
return (
<Link href={getUrl(RouteTypes.RESULTS, router, election.ref)}>
<Button className="" icon={faArrowRight} position="right">
{t('vote.go-to-results')}
</Button>
<div className="w-100 d-grid">
<Button
color="light"
className="text-center border border-3 border-dark"
icon={faArrowRight}
position="right"
>
{t('vote.go-to-results')}
</Button>
</div>
</Link>
);
} else {
@ -99,13 +106,18 @@ const Thanks = () => {
);
};
interface InfoInterface extends WaitingBallotInterface {
display: string;
}
const Info = ({ ballot, error, display }: InfoInterface) => {
const Info = ({ ballot, error }: WaitingBallotInterface) => {
const { t } = useTranslation();
const [ballotProperties, setBallot] = useState<CSSProperties>({
display: 'none',
});
useEffect(() => {
setTimeout(() => {
setBallot({ display: 'grid' });
}, 4500);
}, []);
if (!ballot) return null;
if (error) {
@ -115,28 +127,27 @@ const Info = ({ ballot, error, display }: InfoInterface) => {
return (
<div
style={{
display: display,
display: ballotProperties.display,
transition: 'display 2s',
}}
className="d-flex flex-column align-items-center"
>
<div className="d-flex flex-column align-items-center">
<div>
<h4 className="text-center">{t('vote.success-ballot')}</h4>
<ButtonResults election={ballot.election} />
<Container>
<Row className="m-4 row-cols-1 row-cols-md-2 gx-4 justify-content-between">
<DiscoverMajorityJudgment />
<SupportBetterVote />
</Row>
</Container>
<Thanks />
<Share />
</div>
<Container className="d-flex my-4 gap-4">
<DiscoverMajorityJudgment />
<SupportBetterVote />
</Container>
<Thanks />
<Share />
</div>
);
};
export default ({ ballot, error }: WaitingBallotInterface) => {
const AnimationBallot = () => {
const [_, dispatch] = useAppContext();
const [urneProperties, setUrne] = useState<CSSProperties>({
@ -153,9 +164,6 @@ export default ({ ballot, error }: WaitingBallotInterface) => {
const [urneContainerProperties, setUrneContainer] = useState<CSSProperties>({
height: '100vh',
});
const [ballotProperties, setBallot] = useState<CSSProperties>({
display: 'none',
});
useEffect(() => {
dispatch({ type: AppTypes.FULLPAGE, value: true });
@ -166,27 +174,26 @@ export default ({ ballot, error }: WaitingBallotInterface) => {
height: 300,
}));
const timer = setTimeout(() => {
setTimeout(() => {
setStar((star) => ({
...star,
width: 150,
height: 150,
marginLeft: 150,
marginLeft: -150,
marginBottom: 300,
}));
}, 1000);
const timer2 = setTimeout(() => {
// setBallot({display: "block"});
setTimeout(() => {
setUrneContainer((urneContainer) => ({
...urneContainer,
height: '50vh',
height: 250,
}));
setStar((star) => ({
...star,
width: 100,
height: 100,
marginLeft: 100,
marginLeft: -100,
marginBottom: 200,
}));
setUrne((urne) => ({
@ -195,53 +202,49 @@ export default ({ ballot, error }: WaitingBallotInterface) => {
height: 200,
}));
}, 3000);
const timer3 = setTimeout(() => {
setBallot({ display: 'grid' });
}, 4500);
return () => {
clearTimeout(timer);
clearTimeout(timer2);
clearTimeout(timer3);
};
}, []);
return (
<Container className="d-flex h-100 w-100 align-items-center flex-column">
<div
style={{
transition: 'width 2s, height 2s',
height: urneContainerProperties.height,
}}
className="mt-5 flex-fill d-flex align-items-center justify-content-center"
>
<div
className="position-relative"
style={{
transition: 'width 2s, height 2s',
height: urneContainerProperties.height,
transition: 'width 2s, height 2s, margin-bottom 2s',
zIndex: 2,
marginTop: urneProperties.marginBottom,
height: urneProperties.height,
width: urneProperties.width,
}}
className="d-flex align-items-center"
>
<div
className="position-relative"
style={{
transition: 'width 2s, height 2s, margin-bottom 2s',
zIndex: 2,
marginTop: urneProperties.marginBottom,
height: urneProperties.height,
width: urneProperties.width,
}}
>
<Image src={urne} alt="urne" fill={true} />
</div>
<div
className="position-absolute"
style={{
transition: 'width 2s, height 2s, margin-left 2s, margin-bottom 2s',
marginLeft: starProperties.marginLeft,
marginBottom: starProperties.marginBottom,
height: starProperties.height,
width: starProperties.width,
}}
>
<Image src={star} fill={true} alt="urne" />
</div>
<Image src={urne} alt="urne" fill={true} />
</div>
<div
className="position-relative"
style={{
transition: 'width 2s, height 2s, margin-left 2s, margin-bottom 2s',
marginLeft: starProperties.marginLeft,
marginBottom: starProperties.marginBottom,
height: starProperties.height,
width: starProperties.width,
}}
>
<Image src={star} fill={true} alt="urne" />
</div>
<Info ballot={ballot} error={error} display={ballotProperties.display} />
</div>
);
};
export default ({ ballot, error }: WaitingBallotInterface) => {
return (
<Container className="d-flex min-vh-100 min-vw-100 align-items-between justify-content-center flex-column pb-5">
<AnimationBallot />
<Info ballot={ballot} error={error} />
</Container>
);
};

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

@ -11,6 +11,7 @@ import Logo from '@components/Logo';
import { getUrl, RouteTypes } from '@services/routes';
import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
import { displayRef, getLocaleShort } from '@services/utils';
import { MAJORITY_JUDGMENT_LINK } from '@services/constants';
export async function getServerSideProps({ query: { pid, tid }, locale }) {
return {
@ -63,7 +64,7 @@ const GoToBallotConfirmDesktop = ({ electionRef, token }) => {
<p>{t('home.noAds')}</p>
</Row>
<Row>
<Link href="https://mieuxvoter.fr/le-jugement-majoritaire">
<Link href={MAJORITY_JUDGMENT_LINK}>
<Button color="black" outline={true} className="mt-2 mb-5">
{t('common.about-mj')}
</Button>
@ -109,7 +110,7 @@ const GoToBallotConfirmMobile = ({ electionRef, token }) => {
<p>{t('home.noAds')}</p>
</Row>
<Row>
<Link href="https://mieuxvoter.fr/le-jugement-majoritaire">
<Link href={MAJORITY_JUDGMENT_LINK}>
<Button className="btn-black mt-2 mb-5">
{t('common.about-mj')}
</Button>

2
services/routes.ts
Unescape View File

@ -27,7 +27,7 @@ export const getUrl = (
const path = `/${locale}/${type}/${displayRef(ref)}/${token}`;
return new URL(path, getWindowUrl());
}
const path = `/${locale}/${type}/${ref}`;
const path = `/${locale}/${type}/${displayRef(ref)}`;
return new URL(path, getWindowUrl());
}
const path = `/${locale}/${type}`;

2
styles/scss/_homePage.scss
Unescape View File

@ -93,7 +93,7 @@ $desktop: 1680px;
width: 100%;
text-align: center;
justify-content: center;
margin-top: 20%;
margin-top: 3em;
}
.sharing p {
margin-right: 15px;

Write Preview
Loading…
Cancel
Save