From 03a62f57e8e2a2338306eb913c6bfb26252c80fc Mon Sep 17 00:00:00 2001
From: Pierre-Louis Guhur <pierre-louis.guhur@laposte.net>
Date: Fri, 6 Jan 2023 08:18:33 +0100
Subject: [PATCH] fix: minor improvement mobile

---
 components/Advantages.tsx              |  2 +-
 components/admin/AccessResults.tsx     | 19 ++++----
 components/admin/CandidateModalSet.tsx | 24 +++++++++-
 components/admin/CandidatesField.tsx   |  4 +-
 components/admin/Grades.tsx            |  4 +-
 components/admin/LimitDate.tsx         | 17 ++++---
 components/admin/Order.tsx             | 14 +++---
 components/admin/Private.tsx           |  6 +--
 components/admin/TitleModal.tsx        | 65 +++++++++++++++++---------
 pages/faq.tsx                          | 22 +++++++--
 10 files changed, 118 insertions(+), 59 deletions(-)

diff --git a/components/Advantages.tsx b/components/Advantages.tsx
index 0947f0f..b69e75c 100644
--- a/components/Advantages.tsx
+++ b/components/Advantages.tsx
@@ -36,7 +36,7 @@ const AdvantagesRow = () => {
               src={item.src}
               alt={item.alt}
               height="128"
-              className="d-block mx-auto"
+              className="d-block mx-auto mb-2"
             />
             <h4>{item.name}</h4>
             <p>{item.desc}</p>
diff --git a/components/admin/AccessResults.tsx b/components/admin/AccessResults.tsx
index ebca47a..ec685cb 100644
--- a/components/admin/AccessResults.tsx
+++ b/components/admin/AccessResults.tsx
@@ -1,10 +1,10 @@
-import {useTranslation} from 'next-i18next';
-import {ElectionTypes, useElection} from '@services/ElectionContext';
-import {Container} from 'reactstrap';
+import { useTranslation } from 'next-i18next';
+import { ElectionTypes, useElection } from '@services/ElectionContext';
+import { Container } from 'reactstrap';
 import Switch from '@components/Switch';
 
 const AccessResults = () => {
-  const {t} = useTranslation();
+  const { t } = useTranslation();
   const [election, dispatch] = useElection();
 
   const toggle = () => {
@@ -18,12 +18,15 @@ const AccessResults = () => {
   return (
     <Container className="bg-white p-3 p-md-4">
       <div className="d-flex">
-        <div className="me-auto">
-          <h4 className="text-dark mb-0">{t('admin.access-results')}</h4>
-          {election.hideResults ?
+        <div className="me-auto d-flex flex-row justify-content-center">
+          <h5 className="mb-0 text-dark d-flex align-items-center">
+            {t('admin.access-results')}
+          </h5>
+          {election.hideResults ? (
             <p className="text-muted d-none d-md-block">
               {t('admin.access-results-desc')}
-            </p> : null}
+            </p>
+          ) : null}
         </div>
         <Switch toggle={toggle} state={!election.hideResults} />
       </div>
diff --git a/components/admin/CandidateModalSet.tsx b/components/admin/CandidateModalSet.tsx
index a24c0c7..995f090 100644
--- a/components/admin/CandidateModalSet.tsx
+++ b/components/admin/CandidateModalSet.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, KeyboardEvent } from 'react';
 import { Row, Col, Label, Input, Modal, ModalBody, Form } from 'reactstrap';
 import { faPlus, faArrowLeft } from '@fortawesome/free-solid-svg-icons';
 import { useTranslation } from 'next-i18next';
@@ -27,6 +27,8 @@ const CandidateModal = ({ isOpen, position, toggle }) => {
   // to manage the hidden ugly file input
   const hiddenFileInput = useRef(null);
 
+  const inputRef = useRef(null);
+
   const names = election.candidates
     .filter((_, i) => i != position)
     .map((c) => c.name);
@@ -36,6 +38,23 @@ const CandidateModal = ({ isOpen, position, toggle }) => {
     setState(election.candidates[position]);
   }, [election]);
 
+  useEffect(() => {
+    // When isOpen got active, we put the focus on the input field
+    setTimeout(() => {
+      console.log(inputRef.current);
+      if (isOpen && inputRef && inputRef.current) {
+        inputRef.current.focus();
+      }
+    }, 100);
+  }, [isOpen]);
+
+  // check if key down is enter
+  const handleKeyDown = (e: KeyboardEvent<HTMLFormElement>) => {
+    if (e.key == 'Enter') {
+      save(e);
+    }
+  };
+
   const save = (e) => {
     e.preventDefault();
 
@@ -107,7 +126,7 @@ const CandidateModal = ({ isOpen, position, toggle }) => {
       <ModalBody className="p-4">
         <p>{t('admin.add-candidate-desc')}</p>
         <Col>
-          <Form className="container container-fluid">
+          <Form className="container container-fluid" onKeyDown={handleKeyDown}>
             <Label className="fw-bold">
               {t('admin.photo')}{' '}
               <span className="text-muted"> ({t('admin.optional')})</span>
@@ -150,6 +169,7 @@ const CandidateModal = ({ isOpen, position, toggle }) => {
                 maxLength={250}
                 autoFocus={true}
                 required={true}
+                ref={inputRef}
               />
             </div>
             <div className="">
diff --git a/components/admin/CandidatesField.tsx b/components/admin/CandidatesField.tsx
index bba8b7c..a627b44 100644
--- a/components/admin/CandidatesField.tsx
+++ b/components/admin/CandidatesField.tsx
@@ -64,7 +64,7 @@ const CandidatesField = ({ onSubmit }) => {
     }
   };
 
-  const handleKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
     if (e.key == 'Enter' && !disabled) {
       onSubmit();
     }
@@ -129,7 +129,7 @@ const CandidatesField = ({ onSubmit }) => {
                 className={`bg-blue${disabled ? ' disabled' : ''}`}
                 icon={faArrowRight}
                 position="right"
-                onKeyPress={handleKeyPress}
+                onKeyDown={handleKeyDown}
               >
                 {t('admin.candidates-submit')}
               </Button>
diff --git a/components/admin/Grades.tsx b/components/admin/Grades.tsx
index 94717d7..56c3ffe 100644
--- a/components/admin/Grades.tsx
+++ b/components/admin/Grades.tsx
@@ -95,7 +95,9 @@ const Grades = () => {
   return (
     <Container className="bg-white p-3 p-md-4 mt-1">
       <div className="d-flex justify-content-between">
-        <h4 className="text-dark mb-0">{t('admin.grades-title')}</h4>
+        <h5 className="mb-0 text-dark d-flex align-items-center">
+          {t('admin.grades-title')}
+        </h5>
         <Switch toggle={toggle} state={visible} />
       </div>
       {visible && (
diff --git a/components/admin/LimitDate.tsx b/components/admin/LimitDate.tsx
index 844e9cd..6d92a0e 100644
--- a/components/admin/LimitDate.tsx
+++ b/components/admin/LimitDate.tsx
@@ -1,17 +1,16 @@
-import {useState} from 'react';
-import {useTranslation} from 'next-i18next';
-import {Container, Row, Col} from 'reactstrap';
+import { useState } from 'react';
+import { useTranslation } from 'next-i18next';
+import { Container, Row, Col } from 'reactstrap';
 import DatePicker from '@components/DatePicker';
 import Switch from '@components/Switch';
-import {ElectionTypes, useElection} from '@services/ElectionContext';
+import { ElectionTypes, useElection } from '@services/ElectionContext';
 
 const LimitDate = () => {
-  const {t} = useTranslation();
+  const { t } = useTranslation();
   const defaultEndDate = new Date();
   defaultEndDate.setUTCDate(defaultEndDate.getUTCDate() + 15);
   const [endDate, setEndDate] = useState(defaultEndDate);
 
-
   const [election, dispatch] = useElection();
   const hasDate = election.dateEnd !== null;
 
@@ -31,8 +30,8 @@ const LimitDate = () => {
   return (
     <Container className="bg-white p-3 p-md-4 mt-1">
       <div className="d-flex">
-        <div className="me-auto">
-          <h4 className="text-dark mb-0">
+        <div className="me-auto d-flex flex-row justify-content-center">
+          <h5 className="mb-0 text-dark d-flex align-items-center">
             {t('admin.limit-duration')}
             {hasDate ? (
               <>
@@ -44,7 +43,7 @@ const LimitDate = () => {
                 </div>{' '}
               </>
             ) : null}
-          </h4>
+          </h5>
           {desc === '' ? null : <p className="text-muted">{desc}</p>}
         </div>
         <div className="col-auto d-flex align-items-center">
diff --git a/components/admin/Order.tsx b/components/admin/Order.tsx
index 8b0ad31..1f817f2 100644
--- a/components/admin/Order.tsx
+++ b/components/admin/Order.tsx
@@ -1,13 +1,13 @@
 /**
  * A field to set the order of candidates in the ballot vote.
  */
-import {useTranslation} from 'next-i18next';
-import {Container} from 'reactstrap';
+import { useTranslation } from 'next-i18next';
+import { Container } from 'reactstrap';
 import Switch from '@components/Switch';
-import {ElectionTypes, useElection} from '@services/ElectionContext';
+import { ElectionTypes, useElection } from '@services/ElectionContext';
 
 const Order = () => {
-  const {t} = useTranslation();
+  const { t } = useTranslation();
 
   const [election, dispatch] = useElection();
 
@@ -23,10 +23,10 @@ const Order = () => {
     <>
       <Container className="bg-white  p-3 p-md-4 mt-1">
         <div className="d-flex">
-          <div className="me-auto">
-            <h4 className="mb-0 text-dark">
+          <div className="me-auto d-flex flex-column justify-content-center">
+            <h5 className="mb-0 text-dark d-flex align-items-center">
               {t('admin.order-title')}
-            </h4>
+            </h5>
             <p className="text-muted d-none d-md-block">
               {t('admin.order-desc')}
             </p>
diff --git a/components/admin/Private.tsx b/components/admin/Private.tsx
index 37c0cf4..60b3175 100644
--- a/components/admin/Private.tsx
+++ b/components/admin/Private.tsx
@@ -47,8 +47,8 @@ const Private = () => {
     <>
       <Container className="bg-white  p-3 p-md-4 mt-1">
         <div className="d-flex">
-          <div className="me-auto">
-            <h4 className="mb-0 text-dark">
+          <div className="me-auto d-flex flex-column justify-content-center">
+            <h5 className="mb-0 text-dark d-flex align-items-center">
               {t('admin.private-title')}
               {election.restricted ? (
                 <>
@@ -64,7 +64,7 @@ const Private = () => {
                   </div>{' '}
                 </>
               ) : null}
-            </h4>
+            </h5>
             <p className="text-muted d-none d-md-block">
               {isCreating
                 ? t('admin.private-desc-creating')
diff --git a/components/admin/TitleModal.tsx b/components/admin/TitleModal.tsx
index 1338b9a..f3a5974 100644
--- a/components/admin/TitleModal.tsx
+++ b/components/admin/TitleModal.tsx
@@ -1,36 +1,47 @@
-import {useState, useEffect} from 'react';
-import {Label, Input, Modal, ModalBody, Form} from 'reactstrap';
-import {faPlus, faArrowLeft} from '@fortawesome/free-solid-svg-icons';
-import {useTranslation} from 'next-i18next';
-import {ElectionTypes, useElection} from '@services/ElectionContext';
+import { useState, useEffect, useRef, KeyboardEvent, ChangeEvent } from 'react';
+import { Label, Modal, ModalBody, Form } from 'reactstrap';
+import { faPlus, faArrowLeft } from '@fortawesome/free-solid-svg-icons';
+import { useTranslation } from 'next-i18next';
+import { ElectionTypes, useElection } from '@services/ElectionContext';
 import Button from '@components/Button';
-import {checkName} from '@services/ElectionContext';
-import {AppTypes, useAppContext} from '@services/context';
-import {useRouter} from 'next/router';
+import { checkName } from '@services/ElectionContext';
+import { AppTypes, useAppContext } from '@services/context';
+import { useRouter } from 'next/router';
 
-
-const TitleModal = ({isOpen, toggle}) => {
-  const {t} = useTranslation();
+const TitleModal = ({ isOpen, toggle }) => {
+  const { t } = useTranslation();
   const router = useRouter();
   const [election, dispatch] = useElection();
   const [_, dispatchApp] = useAppContext();
   const [name, setName] = useState(election.name);
-  const disabled = name === "";
+  const disabled = name === '';
+
+  const inputRef = useRef(null);
 
   useEffect(() => {
     setName(election.name);
-  }, [election.name])
+  }, [election.name]);
+
+  useEffect(() => {
+    // When isOpen got active, we put the focus on the input field
+    setTimeout(() => {
+      console.log(inputRef.current);
+      if (isOpen && inputRef && inputRef.current) {
+        inputRef.current.focus();
+      }
+    }, 100);
+  }, [isOpen]);
 
   const save = (e) => {
-    e.preventDefault()
+    e.preventDefault();
 
-    if (name === "") {
+    if (name === '') {
       dispatchApp({
         type: AppTypes.TOAST_ADD,
-        status: "error",
-        message: t("error.empty-name")
-      })
-      return
+        status: 'error',
+        message: t('error.empty-name'),
+      });
+      return;
     }
 
     dispatch({
@@ -42,6 +53,13 @@ const TitleModal = ({isOpen, toggle}) => {
     toggle();
   };
 
+  // check if key down is enter
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key == 'Enter') {
+      save(e);
+    }
+  };
+
   const handleName = (e) => {
     setName(e.target.value);
   };
@@ -65,16 +83,17 @@ const TitleModal = ({isOpen, toggle}) => {
       </div>
 
       <ModalBody className="p-4">
-        <Form className="container container-fluid">
+        <Form className="container container-fluid" onKeyDown={handleKeyDown}>
           <div className="mb-3">
             <Label className="fw-bold">{t('common.name')} </Label>
-            <Input
+            <input
               type="text"
               placeholder={t('home.writeQuestion')}
               value={name}
               onChange={handleName}
-              autoFocus
               required
+              className="form-control"
+              ref={inputRef}
             />
           </div>
           <div className="mt-5 gap-2 d-grid mb-3 d-md-flex">
@@ -89,7 +108,7 @@ const TitleModal = ({isOpen, toggle}) => {
             </Button>
             <div onClick={save}>
               <Button
-                color={disabled ? "light" : "primary"}
+                color={disabled ? 'light' : 'primary'}
                 disabled={disabled}
                 icon={faPlus}
               >
diff --git a/pages/faq.tsx b/pages/faq.tsx
index d7ced52..f4d253a 100644
--- a/pages/faq.tsx
+++ b/pages/faq.tsx
@@ -15,8 +15,8 @@ const FAQ = () => {
   const { t } = useTranslation();
   return (
     <div className="min-vw-100 min-vh-100 bg-secondary pt-3 pb-5">
-      <Container style={{ maxWidth: '700px' }} className="mb-5">
-        <div className="d-flex w-100 justify-content-center">
+      <Container style={{ maxWidth: '700px' }} className="my-5">
+        <div className="d-none d-md-flex w-100 justify-content-center">
           <video width="640" height="480" controls={true}>
             <source
               src="/video/Le_Jugement_Majoritaire_en_1_minute.mp4"
@@ -32,13 +32,29 @@ const FAQ = () => {
             />
           </video>
         </div>
+        <div className="d-flex d-md-none w-100 justify-content-center">
+          <video height="100%" width="100%" controls={true}>
+            <source
+              src="/video/Le_Jugement_Majoritaire_en_1_minute.mp4"
+              type="video/mp4"
+            />
+            <source
+              src="/video/Le_Jugement_Majoritaire_en_1_minute.webm"
+              type="video/webm"
+            />
+            <source
+              src="/video/Le_Jugement_Majoritaire_en_1_minute.3gpp"
+              type="video/3gpp"
+            />
+          </video>
+        </div>
         <div className="mt-5 text-center">
           <h1>{t('faq.title')}</h1>
         </div>
         {[...Array(18)].map((_, i) => (
           <>
             <h4 className="bold mt-5">{t(`faq.sec-${i + 1}-title`)}</h4>
-            <p>{t(`faq.sec-${i + 1}-desc`)}</p>
+            <p className="text-justify">{t(`faq.sec-${i + 1}-desc`)}</p>
           </>
         ))}