From 95dd8124b6cc6865d783fe782a9331f1a139e0a1 Mon Sep 17 00:00:00 2001
From: Pierre-Louis Guhur <pierre-louis.guhur@laposte.net>
Date: Sun, 11 Dec 2022 22:33:11 +0100
Subject: [PATCH] fix: mobile

---
 components/Advantages.tsx         |  12 +-
 components/Experience.tsx         |  80 ++++++-------
 components/Share.tsx              |  11 +-
 pages/_app.tsx                    |  27 ++---
 pages/index.tsx                   | 186 +++++++++++++++++++-----------
 pages/result/[pid]/[[...tid]].tsx |   1 -
 pages/vote/[pid]/[[...tid]].tsx   | 121 +++++++++++++------
 styles/scss/_homePage.scss        |   9 +-
 8 files changed, 275 insertions(+), 172 deletions(-)

diff --git a/components/Advantages.tsx b/components/Advantages.tsx
index fe6e1c8..ddf867c 100644
--- a/components/Advantages.tsx
+++ b/components/Advantages.tsx
@@ -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;
diff --git a/components/Experience.tsx b/components/Experience.tsx
index d3f6520..fea2de3 100644
--- a/components/Experience.tsx
+++ b/components/Experience.tsx
@@ -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;
diff --git a/components/Share.tsx b/components/Share.tsx
index a14226d..36735ab 100644
--- a/components/Share.tsx
+++ b/components/Share.tsx
@@ -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"
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 8744ac7..bbf5566 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -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);
diff --git a/pages/index.tsx b/pages/index.tsx
index 62e9e88..7af6fb2 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -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>
+    </>
   );
 };
 
diff --git a/pages/result/[pid]/[[...tid]].tsx b/pages/result/[pid]/[[...tid]].tsx
index 4119131..839543a 100644
--- a/pages/result/[pid]/[[...tid]].tsx
+++ b/pages/result/[pid]/[[...tid]].tsx
@@ -146,7 +146,6 @@ const ResultBanner = ({ result }) => {
       : 'http://localhost';
   // We hide the token!
   const url = `${origin}${RESULTS}/${displayRef(result.ref)}`;
-  console.log(result);
 
   return (
     <>
diff --git a/pages/vote/[pid]/[[...tid]].tsx b/pages/vote/[pid]/[[...tid]].tsx
index 8a99d4d..50141e9 100644
--- a/pages/vote/[pid]/[[...tid]].tsx
+++ b/pages/vote/[pid]/[[...tid]].tsx
@@ -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>
     </>
   );
diff --git a/styles/scss/_homePage.scss b/styles/scss/_homePage.scss
index 91f9b00..8b01be7 100644
--- a/styles/scss/_homePage.scss
+++ b/styles/scss/_homePage.scss
@@ -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 {