+
{ballot.election.grades.map((_, gradeId) => {
@@ -70,7 +70,7 @@ const BallotDesktop = () => {
{t('vote.submit')}
-
+
)
}
diff --git a/components/ballot/BallotMobile.tsx b/components/ballot/BallotMobile.tsx
index 306c884..d93d6f7 100644
--- a/components/ballot/BallotMobile.tsx
+++ b/components/ballot/BallotMobile.tsx
@@ -1,20 +1,32 @@
-import {MouseEvent} from 'react'
+import {MouseEvent, useState} from 'react'
import {useRouter} from 'next/router';
import {useTranslation} from 'next-i18next';
import Button from '@components/Button';
import {Col, Row, Container} from 'reactstrap';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faCalendarDays, faCheck} from '@fortawesome/free-solid-svg-icons';
+import {faCheck, faChevronLeft, faChevronRight} from '@fortawesome/free-solid-svg-icons';
import {useBallot, BallotTypes, BallotProvider} from '@services/BallotContext';
import CandidateCard from '@components/ballot/CandidateCard'
-import TitleBar from '@components/ballot/TitleBar'
import GradeInput from '@components/ballot/GradeInput'
+interface TitleInterface {
+ name: string;
+}
+
+const TitleName = ({name}: TitleInterface) => {
+ return (
+
+ {name}
+
+ )
+}
+
const BallotMobile = () => {
const {t} = useTranslation();
- const [ballot, dispatch] = useBallot();
+ const [ballot, _] = useBallot();
+ const [offset, setOffset] = useState(0);
const numGrades = ballot.election.grades.length;
const disabled = ballot.votes.length !== ballot.election.candidates.length;
@@ -25,40 +37,61 @@ const BallotMobile = () => {
router.push(`/confirm/${ballot.election.id}`);
};
+ const moveRight = (right: boolean) => {
+ if (right) setOffset(o => o - 247);
+ else setOffset(o => o + 247);
+ }
+
return (
-
-
-
{ballot.election.name}
+
+
+
+
{ballot.election.candidates.map((candidate, candidateId) => {
return (
-
-
-
+
+
+ {candidateId !== 0 ?
+
moveRight(false)}
+ >
+
+
: null}
+
+
+ {candidateId !== ballot.election.candidates.length - 1 ?
+
moveRight(true)}>
: null}
+
+
{ballot.election.grades.map((_, gradeId) => {
console.assert(gradeId < numGrades);
return (
-
+
);
})}
);
})}
-
-
-
-
+
+
+
+
)
}
diff --git a/components/ballot/CandidateCard.tsx b/components/ballot/CandidateCard.tsx
index 9ac9463..e265ddb 100644
--- a/components/ballot/CandidateCard.tsx
+++ b/components/ballot/CandidateCard.tsx
@@ -8,7 +8,7 @@ interface CandidateCardInterface {
}
const CandidateCard = ({candidate}: CandidateCardInterface) => {
const {t} = useTranslation();
- return (
+ return (
{
+ return (<>
+ {active ?
+
+
+
: null}
+
+ {name}
+
+ >)
+}
interface GradeInputInterface {
gradeId: number;
candidateId: number;
@@ -20,14 +34,26 @@ const GradeInput = ({gradeId, candidateId}: GradeInputInterface) => {
const active = ballot.votes.some(b => b.gradeId === gradeId && b.candidateId === candidateId)
const color = active ? getGradeColor(gradeId, numGrades) : '#C3BFD8';
- return (
+ return (<>
- {grade.name}
+
+
+
+
+ >
)
}
diff --git a/pages/vote/[pid]/[[...tid]].tsx b/pages/vote/[pid]/[[...tid]].tsx
index a9701a7..dd0be68 100644
--- a/pages/vote/[pid]/[[...tid]].tsx
+++ b/pages/vote/[pid]/[[...tid]].tsx
@@ -52,7 +52,7 @@ const GoToBallotConfirm = ({electionId, token}) => {
-
+
- {t('resource.noAds')}
+ {t('home.noAds')}
diff --git a/services/ElectionContext.tsx b/services/ElectionContext.tsx
index 275ca3c..5b9fb0a 100644
--- a/services/ElectionContext.tsx
+++ b/services/ElectionContext.tsx
@@ -105,14 +105,22 @@ function electionReducer(election: ElectionContextInterface, action) {
const candidate =
action.value === 'default' ? {...defaultCandidate} : action.value;
const candidates = [...election.candidates, candidate];
- return {...election, candidates};
+ console.log("NONACTIVE", candidates.filter(c => !c.active).length)
+ if (candidates.filter(c => !c.active).length === 0) {
+ return {
+ ...election, candidates: [...candidates, {...defaultCandidate}]
+ };
+ }
+ else {
+ return {...election, candidates};
+ }
}
case 'candidate-rm': {
if (typeof action.position !== 'number') {
throw Error(`Unexpected candidate position ${action.position}`);
}
const candidates = [...election.candidates];
- candidates.splice(action.position);
+ candidates.splice(action.position, 1);
return {...election, candidates};
}
case 'candidate-set': {
@@ -126,6 +134,11 @@ function electionReducer(election: ElectionContextInterface, action) {
const candidate = candidates[action.position];
candidate[action.field] = action.value;
candidate['active'] = true;
+ if (candidates.filter(c => !c.active).length === 0) {
+ return {
+ ...election, candidates: [...candidates, {...defaultCandidate}]
+ };
+ }
return {...election, candidates};
}
case 'grade-push': {
diff --git a/styles/scss/_vote.scss b/styles/scss/_vote.scss
index b3adbb5..5b31de9 100644
--- a/styles/scss/_vote.scss
+++ b/styles/scss/_vote.scss
@@ -246,3 +246,11 @@
width: auto;
}
}
+
+
+// EDIT
+.candidate-vote {
+ width: 232px;
+ position: relative;
+ transition: left 1s;
+}