fix: admin candidate modal

pull/89/head
Pierre-Louis Guhur 2 years ago
parent 2c30adaeb9
commit e05ddea3b6

@ -1,3 +1,4 @@
import PropTypes from 'prop-types';
import Image from 'next/image'
import logoWithText from '../public/logos/logo.svg'
import logo from '../public/logos/logo-footer.svg'
@ -23,6 +24,10 @@ const Logo = props => {
)
};
Logo.propTypes = {
title: PropTypes.bool
};
Logo.defaultProps = {
title: true
};

@ -5,7 +5,7 @@ import {useState} from 'react'
import Image from 'next/image'
import TrashButton from "./TrashButton";
import {Row, Col} from "reactstrap";
import {useTranslation} from "react-i18next";
import {useTranslation} from "next-i18next";
import {useElection, useElectionDispatch} from './ElectionContext';
import defaultAvatar from '../../public/avatar.svg'
import addIcon from '../../public/add.svg'

@ -4,22 +4,21 @@ import {
Label,
Input,
InputGroup,
InputGroupAddon,
Button, Modal, ModalHeader, ModalBody, Form
Button,
Modal,
ModalBody,
Form
} from "reactstrap";
import {useTranslation} from "react-i18next";
import Image from 'next/image';
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {
faPlus, faCogs, faCheck, faTrash
faPlus,
faArrowLeft,
} from "@fortawesome/free-solid-svg-icons";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {useTranslation} from "next-i18next";
import Image from 'next/image';
import {useElection, useElectionDispatch} from './ElectionContext';
import ButtonWithConfirm from "./ButtonWithConfirm";
import defaultAvatar from '../../public/avatar.svg'
import HelpButton from "@components/admin/HelpButton";
import AddPicture from "@components/admin/AddPicture";
import addIcon from '../../public/add.svg'
import leftArrowIcon from '../../public/arrow-left.svg'
import defaultAvatar from '../../public/default-avatar.svg'
const CandidateModal = ({isOpen, position, toggle}) => {
@ -30,10 +29,6 @@ const CandidateModal = ({isOpen, position, toggle}) => {
const candidate = election.candidates[position];
const image = candidate && candidate.image ? candidate.image : defaultAvatar;
const removeCandidate = () => {
dispatch({'type': 'candidate-rm', 'value': position})
}
const addCandidate = () => {
dispatch({'type': 'candidate-push', 'value': "default"})
};
@ -44,65 +39,76 @@ const CandidateModal = ({isOpen, position, toggle}) => {
toggle={toggle}
keyboard={true}
>
<div className="modal-header">
<div className="modal-header p-4">
<h4 className="modal-title">
{t('admin.add-candidate')}
</h4>
<button type="button" onClick={toggle} className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<ModalBody>
<ModalBody className='p-4'>
<p>{t('admin.add-candidate-desc')}
</p>
<Col className="addCandidateCard">
<InputGroup className="addCandidateForm">
<Form>
<div className="input-group-prepend">
<div className="ajout-avatar">
<Col>
<InputGroup>
<Form className='container container-fluid'>
<Row className='gx-4 mb-3'>
<Col className='col-auto'>
<Image src={image} height={120} width={120} alt={t('admin.photo')} />
</Col>
<Col className='col-auto'>
<Label className='fw-bold'>{t('admin.photo')} <span className='text-muted'> ({t('admin.optional')})</span></Label>
<p>{t('admin.photo-type')} jpg, png, pdf</p>
<div>
<div className="avatar-placeholer">
</div>
<input type="file" name="image-upload" id="image-upload" />
<label className="inputfile" htmlfor="image-upload">{t('admin.photo-import')}</label>
</div>
<div className="avatar-text">
<h4>{t('admin.photo')} <span> ({t('admin.optional')})</span></h4>
<p>{t('admin.photo-type')} jpg, png, pdf</p>
<div className="btn-ajout-avatar">
<input type="file" name="myImage" id="myImage" />
<label className="inputfile" htmlFor="myImage">{t('admin.photo-import')}</label>
</div>
</div>
</div>
<img src="/avatar.svg" />
</Col>
</Row>
<div className='mb-3'>
<Label className='fw-bold'>{t('common.name')} </Label>
<Input
type="text"
placeholder={t("admin.candidate-name-placeholder")}
tabIndex={position + 1}
maxLength="250"
autoFocus
required
/>
</div>
<div className=''>
<Label className='fw-bold'>{t('common.description')} <span className='text-muted'> ({t('admin.optional')})</span></Label>
<Input
type="text"
defaultValue={candidate.description}
placeholder={t("admin.candidate-desc-placeholder")}
maxLength="250"
/>
</div>
<Label className="addCandidateText">{t('common.name')}</Label>
<Input
type="text"
placeholder={t("admin.candidate-name-placeholder")}
tabIndex={position + 1}
maxLength="250"
autoFocus
className="addCandidateText"
required
/>
<Label>{t('common.description')} <span> ({t('admin.optional')})</span></Label>
<Input
type="text"
defaultValue={candidate.description}
placeholder={t("admin.candidate-desc-placeholder")}
maxLength="250"
/>
<Row>
<Col col='col-auto me-auto'>
<Row className='mt-5 mb-3'>
<Col className='col-auto me-auto'>
<Button onClick={toggle} color='dark' outline={true}>
<Image src={leftArrowIcon} alt={t('common.cancel')} />
{t('common.cancel')}
<Row className='gx-2 align-items-end'>
<Col>
<FontAwesomeIcon icon={faArrowLeft} />
</Col>
<Col>
{t('common.cancel')}
</Col>
</Row>
</Button>
</Col>
<Col col='col-auto '>
<Button outline={true} color="primary" onClick={addCandidate} className="p-3">
<Image src={addIcon} alt={t('common.save')} />
<span>{t('common.save')}</span>
<Col className='col-auto '>
<Button outline={true} color="primary" onClick={addCandidate}>
<Row className='gx-2 align-items-end'>
<Col>
<FontAwesomeIcon icon={faPlus} />
</Col>
<Col>
<span>{t('common.save')}</span>
</Col>
</Row>
</Button>
</Col>
@ -110,7 +116,7 @@ const CandidateModal = ({isOpen, position, toggle}) => {
</Form>
</InputGroup>
</Col>
</ModalBody>
</ModalBody >
</Modal >);
}

@ -1,5 +1,5 @@
import {useState, useEffect, createRef} from 'react'
import {useTranslation} from "react-i18next";
import {useTranslation} from "next-i18next";
import CandidateField from './CandidateField'
import Alert from '@components/Alert'
import {MAX_NUM_CANDIDATES} from '@services/constants';

@ -1,6 +1,5 @@
const {i18n} = require('./next-i18next.config.js')
module.exports = {
i18n,
};

9596
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -11,10 +11,12 @@
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.3",
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/fontawesome-svg-core": "^6.2.0",
"@fortawesome/free-brands-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.1.19",
"@fortawesome/free-regular-svg-icons": "^6.2.0",
"@fortawesome/free-solid-svg-icons": "^6.2.0",
"@fortawesome/react-fontawesome": "^0.2.0",
"@svgr/webpack": "^6.5.1",
"babel-eslint": "^10.1.0",
"bootstrap": "^5.2.2",
"bootstrap-scss": "^5.2.2",
@ -26,6 +28,7 @@
"mailgun.js": "^3.3.2",
"next": "^13.0.0",
"next-i18next": "^12.1.0",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-flags-select": "^2.2.3",

@ -50,11 +50,11 @@ const CreateElectionForm = (props) => {
// at which creation step are we?
const [step, setStep] = useState('candidate');
let form;
let Form;
if (step == 'candidate') {
form = <CandidatesField />;
Form = CandidatesField;
} else if (step == 'confirm') {
form = <ConfirmModal />;
Form = ConfirmModal;
} else {
throw Error(`Unknown step ${step}`);
}
@ -63,7 +63,7 @@ const CreateElectionForm = (props) => {
<ElectionProvider>
<CreationSteps step={step} className='m-5 justify-content-center d-flex' />
{form}
<CandidatesField />
</ElectionProvider>
);

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M20 11.5H4M12 4V20" stroke="#2400FD" stroke-width="2" stroke-linecap="square"/>
</svg>

After

Width:  |  Height:  |  Size: 200 B

@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M20 11.5H4M12 4V20" stroke="white" stroke-width="2" stroke-linecap="square"/>
</svg>

Before

Width:  |  Height:  |  Size: 190 B

After

Width:  |  Height:  |  Size: 198 B

@ -0,0 +1,4 @@
<svg width="112" height="112" viewBox="0 0 112 112" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="112" height="112" fill="#F2F0FF"/>
<path d="M56.0011 71C66.9871 71 76.5961 75.725 81.8221 82.775L76.2961 85.388C72.0421 80.348 64.5421 77 56.0011 77C47.4601 77 39.9601 80.348 35.7061 85.388L30.1831 82.772C35.4091 75.722 45.0151 71 56.0011 71ZM56.0011 26C59.9794 26 63.7947 27.5804 66.6077 30.3934C69.4208 33.2064 71.0011 37.0218 71.0011 41V50C71.0009 53.8654 69.5085 57.5815 66.8351 60.3733C64.1618 63.1652 60.5139 64.8172 56.6521 64.985L56.0011 65C52.0229 65 48.2076 63.4196 45.3945 60.6066C42.5815 57.7936 41.0011 53.9782 41.0011 50V41C41.0013 37.1346 42.4937 33.4185 45.1671 30.6267C47.8404 27.8348 51.4884 26.1828 55.3501 26.015L56.0011 26ZM56.0011 32C53.7055 31.9999 51.4966 32.877 49.8263 34.4519C48.1561 36.0267 47.1508 38.1803 47.0161 40.472L47.0011 41V50C46.9988 52.3427 47.9102 54.594 49.5414 56.2755C51.1727 57.9569 53.3953 58.9361 55.737 59.0048C58.0787 59.0735 60.3549 58.2265 62.082 56.6436C63.8091 55.0607 64.8509 52.8668 64.9861 50.528L65.0011 50V41C65.0011 38.6131 64.0529 36.3239 62.3651 34.636C60.6772 32.9482 58.3881 32 56.0011 32Z" fill="#2400FD"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -32,6 +32,7 @@
"common.support-us": "Support us",
"common.thumbnail": "Thumbnail",
"common.name": "Name",
"common.description": "Description",
"common.cancel": "Cancel",
"error.help": "Ask for our help",
"error.at-least-2-candidates": "At least two candidates are required.",
@ -48,110 +49,10 @@
"admin.add-candidates": "Add the candidates.",
"admin.add-candidate": "Add a candidate.",
"admin.add-candidate-desc": "Add a picture, a name, and a description of the candidate.",
"admin.candidate-name-placeholer": "Add the name or the title of the candidate.",
"admin.candidate-desc-placeholer": "Add the description of the candidate.",
"admin.candidate-name-placeholder": "Add the name or the title of the candidate.",
"admin.candidate-desc-placeholder": "Add the description of the candidate.",
"admin.photo": "Picture",
"admin.optional": "optional",
"admin.photo-import": "Import a picture",
"admin.photo-type": "Supported type:",
"Homepage": "Homepage",
"Source code": "Source code",
"Who are we?": "Who are we?",
"Privacy policy": "Privacy policy",
"resource.legalNotices": "Legal notices",
"FAQ": "FAQ",
"resource.help": "Need help?",
"BetterVote": "BetterVote",
"Voting platform": "Voting platform",
"Majority Judgment": "Majority Judgment",
"Candidate/proposal ...": "Candidate/proposal...",
"Delete?": "Confirm deletion",
"Are you sure to delete": "Are you sure you want to delete",
"the row": "the row",
"resource.candidatePlaceholder": "Candidates or proposal's name",
"resource.writeQuestionHere": "Write here your question or describe your vote (max. 250 characters)",
"Enter the name of your candidate or proposal here (250 characters max.)": "Enter your proposal or the name of your candidate (max. 250 characters)",
"Please add at least 2 candidates.": "Please add at least 2 candidates.",
"resource.eg": "For example:",
"resource.exampleQuestion": "For the role of my representative, I think this candidate is...",
"Add a proposal": "Add a candidate/proposal",
"resource.advancedOptions": "Advanced options",
"Starting date": "Start date",
"Ending date": "End date",
"Defined period": "Defined period",
"Unlimited": "Unlimited",
"Voting time": "Voting time",
"Grades": "Mentions",
"You can select here the number of grades for your election": "Select here the number of mentions of your vote",
"5 = Excellent, Very good, Good, Fair, Passable": "5 = Excellent, Very good, Good, Fair, Poor",
"Participants": "Participants",
"Add here participants' emails": "Add here participants' emails",
"List voters' emails in case the election is not opened": "List participants' emails in case the election is not open",
"Validate": "Confirm",
"Submit my vote": "Submit my vote",
"Confirm your vote": "Confirm your vote",
"The form contains no address.": "The form contains no email addresses.",
"The election will be opened to anyone with the link": "The vote will be open to anyone with the link",
"resource.startVote": "Start the vote",
"Cancel": "Cancel",
"Confirm": "Confirm",
"Successful election creation!": "Vote successfully created!",
"You can now share the election link to participants:": "You can now share the voting link to participants:",
"Copy": "Copy",
"Here is the link for the results in real time:": "Here is the link for real-time results:",
"Keep these links carefully": "Keep these links carefully",
"resource.participateBtn": "Participate now!",
"resource.resultsBtn": "Go to results",
"t": "<0>Warning</0>: you will have no possibility to recover these links, and we will not be able to share them with you. For safekeeping, you can bookmark them in your browser.",
"resource.start": "Start",
"Oops! This election does not exist or it is not available anymore.": "Oops! This vote does not exist or is no longer available.",
"You can start another election.": "You can start another vote.",
"Go back to homepage": "Go back to homepage",
"You have to judge every candidate/proposal!": "Please assess every candidate/proposal.",
"resource.voteSuccess": "Your participation was successfully recorded!",
"resource.thanks": "Thank your for your participation.",
"Ending date:": "Ending date:",
"Excellent": "Excellent",
"Very good": "Very good",
"Good": "Good",
"Fair": "Fair",
"Passable": "Poor",
"Insufficient": "Insufficient",
"To reject": "To be rejected",
"Dates": "Dates",
"The election will take place from": "The vote will take place from",
"at": "at",
"to": "to",
"Voters' list": "List of participants' emails",
"Graph": "Graph",
"Preference profile": "Detailed results",
"Results of the election:": "Results of the vote:",
"Unknown error. Try again please.": "Unknown error. Please try again.",
"If you list voters' emails, only them will be able to access the election": "If you list participants' emails, only they will be able to access the election",
"Voters received a link to vote by email. Each link can be used only once!": "Participants have received a link to vote by email. Each link can be used only once.",
"Oops... The election is unknown.": "Oops... The vote is unknown.",
"The election is still going on. You can't access now to the results.": "The vote is on-going. You cannot access the results at this time.",
"No votes have been recorded yet. Come back later.": "No votes have been recorded yet. Please check in later.",
"The election has not started yet.": "The vote has not started yet.",
"The election is over. You can't vote anymore": "The vote is over. You can no longer participate",
"You need a token to vote in this election": "You need a valid token to participate in this vote",
"You seem to have already voted.": "You seem to have already voted.",
"The parameters of the election are incorrect.": "The parameters of the vote are incorrect.",
"Support us !": "Support us!",
"PayPal - The safer, easier way to pay online!": "PayPal - The safer, easier way to pay online!",
"resource.numVotes": "Number of votes:",
"Access to results": "Results availability",
"Immediately": "Immediately",
"At the end of the election": "At the end of the vote",
"Results available at the close of the vote": "Results available at the close of the vote",
"The results page will not be accessible until all participants have voted.": "The results page will not be accessible until all participants have voted.",
"The results page will not be accessible until the end date is reached.": "The results page will not be accessible until the end date is reached.",
"No one will be able to see the result until the end date is reached or until all participants have voted.": "No one will be able to see the results until the end date is reached or until all participants have voted.",
"Send me this link": "Send me this link",
"Send me these links": "Send me these links",
"Open": "Open",
"Voting address": "Link to the vote",
"Results address": "Link to the results",
"Share election on Facebook": "Share vote on Facebook",
"Share results on Facebook": "Share results on Facebook"
"admin.photo-type": "Supported type:"
}

@ -48,112 +48,11 @@
"admin.step-confirm": "Confirmation",
"admin.add-candidates": "Ajouter les candidats.",
"admin.add-candidate": "Ajouter un candidat.",
"admin.candidate-name-placeholer": "Ajouter le nom ou le titre du candidat.",
"admin.candidate-desc-placeholer": "Ajouter la description du candidat.",
"admin.candidate-name-placeholder": "Ajouter le nom ou le titre du candidat.",
"admin.candidate-desc-placeholder": "Ajouter la description du candidat.",
"admin.add-candidate-desc": "Ajouter une photo, le nom et une description au candidat.",
"admin.photo": "Photo",
"admin.optional": "facultatif",
"admin.photo-import": "Importer une photo",
"admin.photo-type": "Format supporté :",
"Homepage": "Accueil",
"Source code": "Code source",
"Who are we?": "Qui sommes-nous ?",
"Privacy policy": "Politique de confidentialité",
"resource.legalNotices": "Mentions légales",
"FAQ": "FAQ",
"resource.help": "Besoin d'aide ?",
"BetterVote": "MieuxVoter",
"Voting platform": "Plateforme de vote",
"Majority Judgment": "Jugement Majoritaire",
"Start an election": "Lancer un vote",
"resource.candidatePlaceholder": "Nom du candidat/proposition",
"Delete?": "Supprimer ?",
"Are you sure to delete": "Êtes-vous sûr(e) de supprimer",
"the row": "la ligne",
"resource.writeQuestionHere": "Décrire ici votre question ou introduire simplement votre vote (250 caractères max.)",
"Enter the name of your candidate or proposal here (250 characters max.)": "Saisissez ici le nom de votre candidat ou de votre proposition (250 caractères max.)",
"Please add at least 2 candidates.": "Merci d'ajouter au moins 2 candidats.",
"resource.questionLabel": "Question de votre vote",
"resource.writeQuestion": "Ecrire ici la question de votre vote",
"resource.eg": "Par exemple",
"resource.exampleQuestion": "Pour être mon représentant, je juge ce candidat...",
"Add a proposal": "Ajouter une proposition",
"resource.advancedOptions": "Options avancées",
"Starting date": "Date de début",
"Ending date": "Date de fin ",
"Defined period": "Période définie",
"Unlimited": "Illimitée",
"Voting time": "Durée du vote",
"Grades": "Mentions",
"You can select here the number of grades for your election": "You pouvez choisir ici le nombre de mentions de votre vote",
"5 = Excellent, Very good, Good, Fair, Passable": "5 = Excellent, Très bien, Bien, Assez bien, Passable",
"Participants": "Participants",
"Add here participants' emails": "Ajouter ici les emails des participants",
"List voters' emails in case the election is not opened": "Lister ici les emails des électeurs dans le cas où le vote n'est pas ouverte.",
"Validate": "Valider",
"Submit my vote": "Enregistrer mon vote",
"Confirm your vote": "Confirmer votre vote",
"The form contains no address.": "Aucune adresse email n'a été ajoutée.",
"The election will be opened to anyone with the link": "Le vote sera accessible à tous ceux qui disposent du lien",
"resource.startVote": "Démarrer le vote",
"Cancel": "Annuler",
"Confirm": "Valider",
"Successful election creation!": "Le vote a été créé avec succès !",
"You can now share the election link to participants:": "Vous pouvez maintenant partager ce lien à tous les participants",
"Copy": "Copier",
"Here is the link for the results in real time:": "Voici le lien pour afficher les résultats en temps réel :",
"Keep these links carefully": "Gardez ces liens précieusement",
"resource.participateBtn": "Participez maintenant !",
"resource.resultsBtn": "Résultats",
"t": "<0>Attention</0> : vous n'aurez pas d'autres moyens pour récupérer ces liens par la suite, et nous ne serons pas capables de les partager avec vous. Vous pouvez, par exemple, ajouter ces liens à vos favoris dans votre navigateur.",
"resource.start": "Démarrer",
"resource.noAds": "Pas de publicités, ni de cookies publicitaires",
"Oops! This election does not exist or it is not available anymore.": "Oups ! Le vote n'existe pas ou n'est plus disponible.",
"You can start another election.": "Vous pouvez démarrer une autre vote.",
"Go back to homepage": "Revenir à la page d'accueil",
"You have to judge every candidate/proposal!": "Vous devez évaluer tous les candidats/propositions !",
"resource.voteSuccess": "Votre participation a été enregistrée avec succès !",
"resource.thanks": "Merci de votre participation.",
"Excellent": "Excellent",
"Very good": "Très bien",
"Good": "Bien",
"Fair": "Assez bien",
"Passable": "Passable",
"Insufficient": "Insuffisant",
"To reject": "A rejeter",
"Dates": "Dates",
"The election will take place from": "Le vote se déroulera du",
"at": "à",
"to": "au",
"Voters' list": "Listes des électeurs",
"Graph": "Graphique",
"Preference profile": "Profil de mérites",
"Results of the election:": "Résultats du vote",
"Unknown error. Try again please.": "Erreur inconnue. Merci de ré-essayer plus tard.",
"If you list voters' emails, only them will be able to access the election": "Si vous ajoutez des emails, seulement ceux-là seront capables d'accéder au vote",
"Voters received a link to vote by email. Each link can be used only once!": "Les électeurs ont reçu un lien par courriel pour voter. Chaque lien ne peut être utilisé qu'une seule fois.",
"Oops... The election is unknown.": "Oups... Le serveur ne retrouve pas le vote.",
"The election is still going on. You can't access now to the results.": "le vote est encore en cours. Vous ne pouvez pas encore accéder aux résultats.",
"No votes have been recorded yet. Come back later.": "Aucun vote n'a été enregistré. Merci de revenir plus tard.",
"The election has not started yet.": "le vote n'a pas encore commencé.",
"The election is over. You can't vote anymore": "le vote est terminée. Vous ne pouvez plus voter.",
"You need a token to vote in this election": "Vous avez besoin d'un jeton pour participer à ce vote",
"You seem to have already voted.": "Il semble que vous ayez déjà voté.",
"The parameters of the election are incorrect.": "Les paramètres de vote sont incorrects.",
"PayPal - The safer, easier way to pay online!": "PayPal - Le moyen le plus sûr et le plus simple de payer en ligne !",
"resource.numVotes": "Nombre de votes :",
"Access to results": "Accès aux résultats",
"Immediately": "Immédiatement",
"At the end of the election": "A la clôture du vote",
"Results available at the close of the vote": "Résultats disponibles à la clôture du vote",
"The results page will not be accessible until all participants have voted.": "La page de résultats ne sera pas accessible tant que tous les participants n'auront pas voté.",
"The results page will not be accessible until the end date is reached.": "La page de résultats ne sera pas accessible tant que la date de fin ne sera pas atteinte.",
"No one will be able to see the result until the end date is reached or until all participants have voted.": "Personne ne pourra voir le résultat tant que la date de fin n'est pas atteinte ou que tous les participants n'ont pas voté.",
"Send me this link": "Envoyez-moi ce lien",
"Send me these links": "Envoyez-moi ces liens",
"Open": "Ouvrir",
"Voting address": "Adresse du vote",
"Results address": "Adresse des résultats",
"Share election on Facebook": "Partager le vote sur Facebook",
"Share results on Facebook": "Partager ces résultats sur Facebook"
"admin.photo-type": "Format supporté :"
}

@ -33,5 +33,28 @@
position: inherit!important;
padding: 4px;
margin-right: 10px;
}
input[type="file"] {
display: none;
}
.inputfile {
background: transparent;
color: #0a004c;
border: 2px solid #0a004c;
box-shadow: 0px 2px 0px 0px #0a004c;
padding: 8px 20px;
font-size: 14px;
line-height: 24px;
display: inline-block;
cursor: pointer;
}
input[type='text'], input[type='text']:focus {
background: white;
border-radius: 0px;
color: black;
opacity: 0.8;
box-shadow: 0px 2px 0px #C3BFD8;
margin-bottom: 20px;
}

@ -396,3 +396,7 @@ ol.result > li {
border-style: dashed!important;
}
.text-muted {
color: inherit;
opacity: 0.5;
}

@ -59,7 +59,7 @@
border: 2px solid #2400fd;
box-shadow: 0px 5px 0px #7a64f9;
}
.btn:hover {
.btn:not([class*="btn-outline-"]):hover {
background-color: rgb(255, 255, 255, 0.2);
border-color: white;
}

@ -186,52 +186,6 @@
.addButton span {
margin-left: 20px;
}
.ajout-avatar {
display: flex;
}
.avatar-placeholer {
background-image: url("/avatar-blue.svg");
background-repeat: no-repeat;
background-size: 52px;
background-position: center;
background-color: #f2f0ff;
width: 112px;
height: 100%;
}
.avatar-placeholer img {
width: 100%;
height: 100%;
object-fit: cover;
}
.avatar-text {
text-align: left;
margin-left: 22px;
}
.avatar-text h4 {
font-size: 16px;
line-height: 32px;
color: #0a004c;
margin-block-start: -8px;
}
.avatar-text span {
font-size: 16px;
line-height: 32px;
color: #0a004c;
opacity: 0.3;
}
.avatar-text p {
font-size: 13px;
line-height: 16px;
color: #0a004c;
margin-top: 0px;
}
.avatarThumb img {
background-image: url("/avatar.svg");
background-color: #0a004c;
width: 24px;
height: 24px;
object-fit: cover;
}
input[type="file"] {
display: none;
}
@ -271,603 +225,3 @@ input[type="file"] {
.closebtn:hover {
color: black;
}
.candidateButton {
display: flex;
width: 100%;
padding: 12px;
align-content: center;
justify-content: space-between;
border: 1px dashed rgba(255, 255, 255, 0.24);
}
.candidateButton div {
display: flex;
align-content: center;
}
.settings-modal {
background-color: #17048e;
background-image: url("/back.svg");
max-width: 100vw;
margin: 0;
padding: 0px;
}
.settings-modal > .modal-content {
background: transparent;
height: 100%;
}
.modal-header-settings {
justify-content: center;
color: white;
padding: 0px;
border: none;
}
.settings-modal-body {
background: white;
width: 70%;
margin: auto;
color: #0a004c !important;
}
.settings-modal-body > .row {
padding: 30px;
}
.settings {
display: none;
}
.settings-modal-body .col {
margin: auto;
}
.settings-modal-body p {
font-size: 13px;
line-height: 16px;
}
.settings-modal-body label {
font-size: 20px;
line-height: 32px;
font-weight: 500;
}
.custom-switch {
text-align: right;
}
.modal.fade .modal-dialog {
transition: none;
}
.fade {
transition: none;
}
.btn-return-candidates {
color: white;
cursor: pointer;
position: absolute;
left: 50px;
top: 50px;
}
.avatarThumb {
width: 80%;
}
.avatarThumb input {
background-color: transparent;
color: white;
border: none;
}
.avatarThumb input::placeholder {
color: white;
}
.candidateAdded {
background-color: white;
}
.candidateAdded input,
.candidateAdded input::placeholder {
color: #17048e;
font-size: 15px;
line-height: 24px;
font-weight: bold;
}
.trashIcon {
display: none !important;
color: #17048e;
}
.displayTrash {
display: inline !important;
}
.badge {
padding: 4px 8px !important;
border-radius: 0px;
font-size: 14px;
line-height: 24px;
}
.mailMutedText {
padding: 8px;
background-color: #f2f0ff;
width: fit-content;
margin-top: 16px;
}
.numGradesContainer {
display: flex;
}
.numGrades {
cursor: pointer;
background-color: #f2f0ff;
}
.numGrades input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.customCheckmarck {
display: flex;
width: 44px;
height: 44px;
}
.numGrades input:checked ~ .customCheckmarck {
background-color: #2400fd;
}
.numGrades input:checked ~ .customCheckmarck p {
color: white;
opacity: 1;
}
.numGrades input:checked ~ .customCheckmarck::after {
display: block;
color: white;
}
.customCheckmarck::after {
margin: auto;
color: #0a004c40;
}
.numGradeFive::after {
content: "5";
}
.numGradeSix::after {
content: "6";
}
.numGradeSeven::after {
content: "7";
}
.confirm-modal-body {
width: 70%;
margin: auto;
}
.recap-vote {
font-weight: bold;
}
.recap-vote .row {
padding: 0px 25px;
}
.recap-vote-question {
font-size: 18px;
line-height: 28px;
color: #2400fd;
}
.recap-vote-label {
font-size: 14px;
line-height: 16px;
color: #0a004c;
font-weight: bold;
padding-top: 25px !important;
}
.recap-vote-content {
font-size: 15px;
line-height: 24px;
color: #2400fd;
width: 100%;
}
.recap-vote-content .cancelButton {
color: #8f88ba;
}
.modal-footer {
border-top: none;
}
.confirmation-divider,
.confirmation-divider-mobile {
width: 100%;
border-top: solid 1px #0a004c;
}
.btn-copy {
background: white;
width: 100%;
color: #0a004c;
display: flex;
justify-content: space-between;
padding: 16px;
font-size: 14px;
line-height: 16px;
}
.copy {
width: 100%;
}
.success-title h2 {
font-size: 32px;
line-height: 32px;
}
.full-height-container {
min-height: 100vh;
max-width: 100% !important;
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
background-color: #2400fd;
background-image: url("/background-finish-page.svg");
background-repeat: no-repeat;
background-size: cover;
}
.main-animation {
margin: auto;
position: relative;
}
.letter-animation {
position: absolute;
top: 0;
z-index: 5;
}
.star-animation {
position: absolute;
top: 0;
z-index: 3;
}
.urne-front {
position: absolute;
top: 0;
left: 0;
}
.displayNone {
display: none !important;
}
.displayBlock {
display: block !important;
}
input[type="radio"],
input[type="checkbox"] {
display: none;
visibility: hidden;
}
label,
label:before,
.radio-switch,
.radio-switch:before {
-webkit-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
cursor: pointer;
}
.radio-group label {
position: absolute;
width: 120px;
height: 44px;
line-height: 45px;
}
input[type="radio"]:checked + label {
z-index: -1;
}
.radio-switch {
position: absolute;
z-index: 3;
width: 40px;
height: 24px;
padding-left: 2px;
right: 0;
border-radius: 30px;
background-color: #c3bfd8;
}
.radio-switch:before {
position: absolute;
top: 2px;
display: block;
width: 20px;
height: 20px;
content: "";
border-radius: 30px;
background-color: #fff;
}
input[type="radio"]:last-of-type:checked ~ .radio-switch {
background-color: #2708e4;
}
input[type="radio"]:last-of-type:checked ~ .radio-switch:before {
right: 2px;
}
.radio-group > label {
z-index: 5;
}
.componentMobile {
display: none;
}
.to-reject {
color: #8f88ba !important;
text-decoration: line-through;
}
#voting-time-label {
padding: 30px;
}
.customCheckmarckMobile {
width: 100%;
height: 100%;
}
.customCheckmarck p {
margin: auto !important;
color: #0a004c;
opacity: 0.4;
font-weight: 500 !important;
font-size: 16px !important;
line-height: 24px !important;
}
.customCheckmarckMobile p {
margin: auto !important;
color: #0a004c;
opacity: 0.4;
font-weight: 700 !important;
font-size: 24px !important;
line-height: 24px !important;
}
.form-control {
color: #0a004c;
}
.time-container .form-control {
width: fit-content !important;
}
.mobile-title {
display: none;
}
.opacity {
opacity: 0.6;
}
.annuler {
display: flex !important;
}
.trashIcon {
color: #ff3e37 !important;
}
.rightColumn {
padding-left: 15px;
}
.react-multi-email {
border: none !important;
border-bottom: solid 2px #c3bfd8 !important;
border-radius: 0px !important;
}
.react-multi-email [data-tag] {
color: #2400fd !important;
font-weight: 700;
font-size: 14px;
line-height: 24px;
}
.react-datepicker__header {
background: none !important;
border: none !important;
}
.react-datepicker__navigation-icon::before {
top: 12px !important;
border-color: #2400fd !important;
}
.react-datepicker__day--selected {
background-color: #2400fd !important;
border-radius: 0px !important;
color: white !important;
}
.react-datepicker__day {
font-weight: 500 !important;
font-size: 18px !important;
line-height: 100% !important;
color: #0a004c;
width: 44px;
height: 44px;
padding: 11px !important;
}
.react-datepicker__day-name {
font-weight: 700 !important;
font-size: 14px !important;
line-height: 100% !important;
color: #0a004c;
width: 44px;
opacity: 0.4;
padding: 11px !important;
}
.recap-vote-content .badge:first-of-type {
color: #8f88ba !important;
text-decoration: line-through;
}
@media screen and (min-width: 619px) and (max-width: 1120px) {
.btn-return-candidates {
position: unset;
text-align: center;
}
}
@media screen and (max-width: 930px) {
.form {
min-height: 100vh;
}
}
@media screen and (max-width: 619px) {
.stepForm {
width: auto;
padding: 20px 0px;
}
.form-control {
color: #2400fd;
}
.to-reject {
color: black !important;
}
.stepFormCol {
flex-grow: unset;
padding: 0;
margin: 8px;
width: 24px;
justify-content: flex-start !important;
}
.stepForm h4 {
display: none;
}
.ajouterCandidat {
width: 100%;
margin: 10px auto;
}
.addCandidateCard {
padding: 30px 0px;
}
.addCandidateHeader h6 {
font-size: 24px;
line-height: 28px;
}
.addCandidateHeader p {
font-size: 15px;
line-height: 20px;
}
.addCandidateHeader span {
white-space: initial;
}
.btn-return-candidates {
display: none;
}
.modal-header-settings {
justify-content: flex-start;
}
.settings-modal-body > .row,
.confirm-modal-body > .row {
padding: 15px 15px 0px;
}
.settings-modal-body,
.confirm-modal-body,
.settings-modal > .modal-content {
background: transparent;
width: 100%;
}
.row-label {
background-color: white;
padding: 12px;
justify-content: space-between;
}
.row-label > div {
padding: 0px;
margin-right: 0;
}
.settings-modal-body p {
font-size: 12px;
color: white;
padding: 8px 0px;
}
.settings-modal-body label {
font-size: 15px;
line-height: 24px;
}
.settings-modal-body label {
margin-bottom: 0px;
}
#voting-time-label {
width: 100%;
padding: 12px;
}
.settings-divider,
.confirmation-divider {
display: none;
}
.componentDesktop {
display: none;
}
.componentMobile {
display: block;
}
.componentMobile p {
display: block;
}
.grades-mobile {
margin: 0;
}
.grades-mobile > .row-label {
justify-content: space-between;
}
.grades-mobile > .modal-content {
min-height: 100vh;
}
.grades-mobile h5 {
font-size: 24px;
line-height: 28px;
color: #2400fd;
}
.grades-mobile p {
font-size: 15px;
line-height: 20px;
letter-spacing: -0.5px;
color: #0a004c;
margin-bottom: 16px;
}
.grades-mobile .modal-header {
border-bottom: none;
padding: 42px 32px 0px;
}
.grades-mobile .modal-body {
padding: 0px 32px;
}
.numGradesMobile {
width: 15vw;
height: 15vw;
}
.grades-mobile .btn-confirm-mobile {
width: 100%;
margin: 50px 12px;
}
.grades-mobile .close {
position: absolute;
top: 25px;
right: 25px;
font-size: 35px;
font-weight: 100;
}
.btn-confirm-mobile {
width: 100%;
background-color: #2400fd;
box-shadow: 0px 4px 0px 0px #ffffff;
opacity: 1;
}
.time-container {
margin: auto;
}
.mobile-title {
display: block;
font-size: 18px;
line-height: 24px;
color: white;
margin-bottom: 10px;
}
.recap-vote > div {
margin: 15px auto;
}
.recap-vote .row {
padding: 0px 15px;
}
.recap-vote-label {
padding-top: 15px !important;
}
.time-container .form-control {
margin: auto;
}
.rightColumn {
padding: 0px;
}
}
@media screen and (max-width: 375px) {
.removeAddButtons {
flex-direction: column;
}
.removeAddButtons button {
width: 100%;
text-align: center;
margin: 15px auto;
}
.numGradesMobile {
width: 30vw;
height: 30vw;
}
}

@ -11,6 +11,7 @@ $body-color: $mv-light-color;
$modal-content-border-radius: 0px;
$modal-header-border-width: 0px;
$badge-border-radius: 0px;
$theme-colors: (
"primary": $mv-blue-color,
@ -31,6 +32,6 @@ $theme-colors: (
@import "_modal.scss";
@import "_homePage.scss";
@import "_vote.scss";
@import "_newVote.scss";
// @import "_newVote.scss";
@import "_resultVote.scss";
@import "_admin.scss";

Loading…
Cancel
Save