@ -0,0 +1,166 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import plotly from 'plotly.js/dist/plotly';
|
||||||
|
import createPlotComponent from 'react-plotly.js/factory';
|
||||||
|
import LoadingScreen from "./LoadingScreen";
|
||||||
|
|
||||||
|
function Bulles (props) {
|
||||||
|
|
||||||
|
// récupération des résultats de l'élection et stockage en tableau
|
||||||
|
const votesBrut = (Object.values(props))[0];
|
||||||
|
|
||||||
|
// déclaration et initialisation des mentions et couleurs
|
||||||
|
const mentionsBrut = ['Passable', 'Assez bien', 'Bien', 'Très bien', 'Excellent'];
|
||||||
|
const couleursBrut = ['#BB9C42', '#AABA44', '#DCDF44', '#B3D849', '#61AD45'];
|
||||||
|
|
||||||
|
//----------- Traitement des données -----------//
|
||||||
|
|
||||||
|
// fonction d'inversement des éléments de tableau
|
||||||
|
function inverse(obj){
|
||||||
|
var retobj = {};
|
||||||
|
for(var key in obj){
|
||||||
|
retobj[obj[key]] = key;
|
||||||
|
}
|
||||||
|
return retobj;
|
||||||
|
}
|
||||||
|
|
||||||
|
// fonction de réduction d'amplitude permettant de conserver une représentation ordinale du nombre de votes sans décalage visuel trop important
|
||||||
|
/*
|
||||||
|
Pattern de calcul :
|
||||||
|
|
||||||
|
Soient Ai, Bi, Ci, Di, Ei les nombres de votes initiaux fournis dans le tableau classé par ordre mélioratif de mention (de Passable à Excellent). Il vient :
|
||||||
|
A = 1
|
||||||
|
B = <{[1 + (Bi/Ai)] / 40} * A>
|
||||||
|
C = <{[1 + (Ci/Bi)] / 40} * B>
|
||||||
|
D = <{[1 + (Di/Ci)] / 40} * C>
|
||||||
|
E = <{[1 + (Ei/Di)] / 40} * D>
|
||||||
|
*/
|
||||||
|
function redAmpli(tab) {
|
||||||
|
var nvTab = [];
|
||||||
|
nvTab[0] = 100;
|
||||||
|
|
||||||
|
for(i = 1; i < tab.length; i++) {
|
||||||
|
nvTab[i] = ( (1 + ((tab[i]/tab[(i-1)]) / 40 ) ) * nvTab[(i-1)]);
|
||||||
|
}
|
||||||
|
return nvTab;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// déclaration de l'objet votes-mention et votes-couleur
|
||||||
|
var votesMentionNonOrdonnes = {};
|
||||||
|
var votesCouleurNonOrdonnes = {};
|
||||||
|
|
||||||
|
// initialisation votes-mention ordonnés croissants
|
||||||
|
for (var i = 0; i < mentionsBrut.length; i++) {
|
||||||
|
votesMentionNonOrdonnes[votesBrut[i]] = mentionsBrut[i];
|
||||||
|
votesCouleurNonOrdonnes[votesBrut[i]] = couleursBrut[i];
|
||||||
|
}
|
||||||
|
|
||||||
|
// déclaration des mentions-votes par ordre croissant
|
||||||
|
var votesMentionOrdonnes = inverse(votesMentionNonOrdonnes);
|
||||||
|
var votesCouleurOrdonnes = inverse(votesCouleurNonOrdonnes);
|
||||||
|
|
||||||
|
// vérification du nombre de votes classés par ordre croissant et passés initialement en propriétés au composant
|
||||||
|
console.log("Les données transmises au composant concernant le nombre de votes par mention sont : ");
|
||||||
|
console.log(votesBrut);
|
||||||
|
|
||||||
|
// vérification des mentions destinées à être associées aux votes et ordonnées initialement par ordre mélioratif
|
||||||
|
console.log("Les mentions des votes sont classées initialement par ordre mélioratif de la façon suivante :");
|
||||||
|
console.log(mentionsBrut);
|
||||||
|
|
||||||
|
// vérification du nombre de votes classés par ordre croissant
|
||||||
|
console.log("Les mentions-votes classées par ordre croissant de votes sont : ");
|
||||||
|
console.log(votesMentionOrdonnes);
|
||||||
|
|
||||||
|
// séparation des mentions et des votes
|
||||||
|
const mentions = Object.keys(votesMentionOrdonnes);
|
||||||
|
const votes = Object.values(votesMentionOrdonnes);
|
||||||
|
const couleurs = Object.keys(votesCouleurOrdonnes);
|
||||||
|
|
||||||
|
// vérification des mentions et des votes prêts à être traités pour la représentation graphique
|
||||||
|
console.log('La liste des mentions issue du classement par ordre croissant de votes est :');
|
||||||
|
console.log(mentions);
|
||||||
|
console.log('La liste du nombre de votes correspondant, classée par ordre croissant, est :');
|
||||||
|
console.log(votes);
|
||||||
|
|
||||||
|
// déclaration et initialisation des rayons de bulle pour la représentation graphique
|
||||||
|
var rayons = [];
|
||||||
|
rayons = redAmpli(votes)
|
||||||
|
|
||||||
|
// vérification des rayons
|
||||||
|
console.log('La liste des rayons à représenter graphiquement est la suivante :');
|
||||||
|
console.log(rayons);
|
||||||
|
|
||||||
|
// déclaration et initialisation des textes des bulles
|
||||||
|
const texteBulle1 = (mentions[0] + "<br>" + votes[0] + " votes").toString();
|
||||||
|
const texteBulle2 = (mentions[1] + "<br>" + votes[1] + " votes").toString();
|
||||||
|
const texteBulle3 = (mentions[2] + "<br>" + votes[2] + " votes").toString();
|
||||||
|
const texteBulle4 = (mentions[3] + "<br>" + votes[3] + " votes").toString();
|
||||||
|
const texteBulle5 = (mentions[4] + "<br>" + votes[4] + " votes").toString();
|
||||||
|
|
||||||
|
// déclaration et initialisation d'une instance de graphique en bulles
|
||||||
|
// const Plot = createPlotComponent(plotly);
|
||||||
|
const Plot = require('react-plotly.js').default;
|
||||||
|
|
||||||
|
//---------------------------------------------//
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//----------- Affichage des données -----------//
|
||||||
|
const [loading, setLoading] = React.useState(true);
|
||||||
|
React.useEffect(() =>{
|
||||||
|
setTimeout(() => setLoading(false), 3000);
|
||||||
|
})
|
||||||
|
return (
|
||||||
|
|
||||||
|
// <div>
|
||||||
|
// {!loading ? (
|
||||||
|
// <React.Fragment>
|
||||||
|
<Plot
|
||||||
|
data={[
|
||||||
|
{
|
||||||
|
x: [0.7, 0.6, 0.5, 0.6, 0.7],
|
||||||
|
y: [0.3, 0.4, 0.5, 0.6, 0.5],
|
||||||
|
hovertemplate:
|
||||||
|
'<b>%{text}</b>' +
|
||||||
|
'<extra></extra>',
|
||||||
|
text: [texteBulle1, texteBulle2, texteBulle3, texteBulle4, texteBulle5],
|
||||||
|
showlegend: false,
|
||||||
|
mode: 'markers',
|
||||||
|
marker: {
|
||||||
|
color: [couleurs[0], couleurs[1], couleurs[2], couleurs[3], couleurs[4]],
|
||||||
|
size: rayons
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
layout={ {
|
||||||
|
width: 600,
|
||||||
|
height: 600,
|
||||||
|
title: 'Nombre de voix par candidat',
|
||||||
|
xaxis: {
|
||||||
|
showgrid: false,
|
||||||
|
showticklabels: false,
|
||||||
|
showline: false,
|
||||||
|
zeroline: false,
|
||||||
|
range: [0, 1]
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
showgrid: false,
|
||||||
|
showticklabels: false,
|
||||||
|
showline: false,
|
||||||
|
zeroline: false,
|
||||||
|
range: [0, 1]
|
||||||
|
}
|
||||||
|
} }
|
||||||
|
config={{
|
||||||
|
displayModeBar: false // this is the line that hides the bar.
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
// </React.Fragment>
|
||||||
|
// ) : (
|
||||||
|
// <LoadingScreen />
|
||||||
|
// )}
|
||||||
|
// </div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Bulles;
|
@ -0,0 +1,41 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import * as d3 from "d3";
|
||||||
|
|
||||||
|
function drawChart(svgRef: React.RefObject<SVGSVGElement>) {
|
||||||
|
const data = [12, 5, 6, 6, 9, 10];
|
||||||
|
const h = 120;
|
||||||
|
const w = 250;
|
||||||
|
const svg = d3.select(svgRef.current);
|
||||||
|
|
||||||
|
svg
|
||||||
|
.attr("width", w)
|
||||||
|
.attr("height", h)
|
||||||
|
.style("margin-top", 50)
|
||||||
|
.style("margin-left", 50);
|
||||||
|
|
||||||
|
svg
|
||||||
|
.selectAll("rect")
|
||||||
|
.data(data)
|
||||||
|
.enter()
|
||||||
|
.append("rect")
|
||||||
|
.attr("x", (d, i) => i * 40)
|
||||||
|
.attr("y", (d, i) => h - 10 * d)
|
||||||
|
.attr("width", 20)
|
||||||
|
.attr("height", (d, i) => d * 10)
|
||||||
|
.attr("fill", "steelblue");
|
||||||
|
}
|
||||||
|
|
||||||
|
const Chart: React.FunctionComponent = () => {
|
||||||
|
const svg = React.useRef<SVGSVGElement>(null);
|
||||||
|
React.useEffect(() => {
|
||||||
|
drawChart(svg);
|
||||||
|
}, [svg]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div id="chart">
|
||||||
|
<svg ref={svg} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Chart;
|
@ -0,0 +1,21 @@
|
|||||||
|
import React, { useRef, useState, useEffect } from 'react';
|
||||||
|
import D3Chart from './D3Chart';
|
||||||
|
|
||||||
|
const ChartWrapper = () => {
|
||||||
|
|
||||||
|
const chartArea = useRef(null);
|
||||||
|
const [chart, setChart] = useState(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!chart) {
|
||||||
|
setChart(new D3Chart(chartArea.current));
|
||||||
|
}
|
||||||
|
}, [chart]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div ref={chartArea}></div>
|
||||||
|
);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ChartWrapper;
|
@ -0,0 +1,38 @@
|
|||||||
|
import * as d3 from 'd3';
|
||||||
|
|
||||||
|
const url = "https://udemy-react-d3.firebaseio.com/tallest_men.json";
|
||||||
|
|
||||||
|
const WIDTH = 800;
|
||||||
|
const HEIGHT = 500;
|
||||||
|
|
||||||
|
export default class D3Chart {
|
||||||
|
constructor(element) {
|
||||||
|
const svg = d3.select(element)
|
||||||
|
.append("svg")
|
||||||
|
.attr("width", 800)
|
||||||
|
.attr("height", 500)
|
||||||
|
|
||||||
|
d3.json(url).then(data => {
|
||||||
|
const max = d3.max(data, d => d.height)
|
||||||
|
const y = d3.scaleLinear()
|
||||||
|
.domain([0, max])
|
||||||
|
.range([0, HEIGHT])
|
||||||
|
|
||||||
|
const x = d3.scaleBand()
|
||||||
|
.domain(data.map(d => d.name))
|
||||||
|
.range([0, WIDTH])
|
||||||
|
.padding(0.4)
|
||||||
|
|
||||||
|
const rects = svg.selectAll("rect")
|
||||||
|
.data(data)
|
||||||
|
|
||||||
|
rects.enter()
|
||||||
|
.append("rect")
|
||||||
|
.attr("x", d => x(d.name))
|
||||||
|
.attr("y", d => HEIGHT - y(d.height))
|
||||||
|
.attr("width", x.bandwidth)
|
||||||
|
.attr("height", d => y(d.height))
|
||||||
|
.attr("fill", "grey")
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,75 @@
|
|||||||
|
import React from "react"
|
||||||
|
import styled from "styled-components"
|
||||||
|
|
||||||
|
const Screen = styled.div`
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
opacity: 0;
|
||||||
|
animation: fade 0.4s ease-in forwards;
|
||||||
|
background: black;
|
||||||
|
|
||||||
|
@keyframes fade {
|
||||||
|
0% {
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Balls = styled.div`
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
|
||||||
|
.ball {
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: red;
|
||||||
|
margin: 0 6px 0 0;
|
||||||
|
animation: oscillate 0.7s ease-in forwards infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.one {
|
||||||
|
animation-delay: 0.5s;
|
||||||
|
}
|
||||||
|
.two {
|
||||||
|
animation-delay: 1s;
|
||||||
|
}
|
||||||
|
.three {
|
||||||
|
animation-delay: 2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes oscillate {
|
||||||
|
0% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const LoadingScreen = () => {
|
||||||
|
return (
|
||||||
|
<Screen>
|
||||||
|
<Balls>
|
||||||
|
|
||||||
|
<div className="ball one"></div>
|
||||||
|
<div className="ball two"></div>
|
||||||
|
<div className="ball three"></div>
|
||||||
|
</Balls>
|
||||||
|
</Screen>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LoadingScreen;
|
@ -0,0 +1,62 @@
|
|||||||
|
import React, { useEffect, useRef, useState } from "react";
|
||||||
|
import ReactDOM from "react-dom";
|
||||||
|
import styled from "styled-components";
|
||||||
|
|
||||||
|
const Modal = ({ show, onClose, children, title }) => {
|
||||||
|
|
||||||
|
const handleCloseClick = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
onClose();
|
||||||
|
};
|
||||||
|
|
||||||
|
const modalContent = show ? (
|
||||||
|
<StyledModalOverlay>
|
||||||
|
<StyledModal>
|
||||||
|
<StyledModalHeader>
|
||||||
|
<a href="#" onClick={handleCloseClick}>
|
||||||
|
x
|
||||||
|
</a>
|
||||||
|
</StyledModalHeader>
|
||||||
|
{title && <StyledModalTitle>{title}</StyledModalTitle>}
|
||||||
|
<StyledModalBody>{children}</StyledModalBody>
|
||||||
|
</StyledModal>
|
||||||
|
</StyledModalOverlay>
|
||||||
|
) : null;
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
modalContent
|
||||||
|
);
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
const StyledModalBody = styled.div`
|
||||||
|
padding-top: 10px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const StyledModalHeader = styled.div`
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
font-size: 25px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const StyledModal = styled.div`
|
||||||
|
background: white;
|
||||||
|
width: 500px;
|
||||||
|
height: 600px;
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 15px;
|
||||||
|
`;
|
||||||
|
const StyledModalOverlay = styled.div`
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
`;
|
||||||
|
|
||||||
|
export default Modal;
|
@ -0,0 +1,37 @@
|
|||||||
|
import React, {Fragment} from 'react';
|
||||||
|
import Head from 'next/head';
|
||||||
|
import dynamic from 'next/dynamic';
|
||||||
|
|
||||||
|
|
||||||
|
const Bulles = dynamic(import('./Bulles'), {
|
||||||
|
ssr: false
|
||||||
|
})
|
||||||
|
|
||||||
|
const nbVotesPassables = 15;
|
||||||
|
const nbVotesAssezBien = 200;
|
||||||
|
const nbVotesBien = 389;
|
||||||
|
const nbVotesTresBien = 12;
|
||||||
|
const nbVotesExcellent = 2;
|
||||||
|
|
||||||
|
const resultats = [nbVotesPassables, nbVotesAssezBien, nbVotesBien, nbVotesTresBien, nbVotesExcellent];
|
||||||
|
|
||||||
|
var totalVotes = 0;
|
||||||
|
|
||||||
|
for(var i = 0; i < resultats.length; i++) {
|
||||||
|
totalVotes += resultats[i];
|
||||||
|
}
|
||||||
|
|
||||||
|
function SystemeVote() {
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
|
||||||
|
<Bulles donnees={resultats} />
|
||||||
|
<p style={{color: '#000000'}}>Le total des votes est de {totalVotes}.</p>
|
||||||
|
|
||||||
|
</Fragment>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SystemeVote;
|
@ -0,0 +1,37 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export default function AddPicture(props) {
|
||||||
|
const [image, setImage] = useState(null);
|
||||||
|
const [createObjectURL, setCreateObjectURL] = useState(null);
|
||||||
|
|
||||||
|
const uploadToClient = (event) => {
|
||||||
|
if (event.target.files && event.target.files[0]) {
|
||||||
|
const i = event.target.files[0];
|
||||||
|
|
||||||
|
setImage(i);
|
||||||
|
setCreateObjectURL(URL.createObjectURL(i));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="ajout-avatar">
|
||||||
|
<div>
|
||||||
|
<div className="avatar-placeholer">
|
||||||
|
<img src={createObjectURL} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="avatar-text">
|
||||||
|
<h4>Photo <span> (facultatif)</span></h4>
|
||||||
|
|
||||||
|
<p>Importer une photo.<br />format : jpg, png, pdf</p>
|
||||||
|
<div className="btn-ajout-avatar">
|
||||||
|
<input type="file" name="myImage" id="myImage" onChange={uploadToClient} />
|
||||||
|
<label className="inputfile" for="myImage">Importer une photo</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
@ -0,0 +1,24 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import { Alert, Button } from 'react-bootstrap';
|
||||||
|
import { faTimes, faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
|
||||||
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
|
export default function AlertDismissibleExample() {
|
||||||
|
const [show, setShow] = useState(true);
|
||||||
|
|
||||||
|
if (show) {
|
||||||
|
return (
|
||||||
|
<Alert className="preventWarning">
|
||||||
|
<Alert.Heading>
|
||||||
|
<div>
|
||||||
|
<FontAwesomeIcon icon={faExclamationCircle} className="mr-2" />
|
||||||
|
<span>2 candidats minimum</span>
|
||||||
|
</div>
|
||||||
|
<FontAwesomeIcon onClick={() => setShow(false)} icon={faTimes} className="mr-2" />
|
||||||
|
</Alert.Heading>
|
||||||
|
|
||||||
|
</Alert>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,61 @@
|
|||||||
|
/* eslint react/prop-types: 0 */
|
||||||
|
import {useState} from "react";
|
||||||
|
import {Collapse, Navbar, NavbarToggler, Nav, NavItem} from "reactstrap";
|
||||||
|
import Link from "next/link";
|
||||||
|
import Head from "next/head";
|
||||||
|
import {useTranslation} from 'next-i18next'
|
||||||
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
||||||
|
import {faRocket} from "@fortawesome/free-solid-svg-icons";
|
||||||
|
import LanguageSelector from "./LanguageSelector";
|
||||||
|
|
||||||
|
|
||||||
|
const Header = () => {
|
||||||
|
const [isOpen, setOpen] = useState(false)
|
||||||
|
|
||||||
|
const toggle = () => setOpen(!isOpen);
|
||||||
|
|
||||||
|
const {t} = useTranslation()
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Head><title>{t("title")}</title></Head>
|
||||||
|
<header>
|
||||||
|
<Navbar color="light" light expand="md">
|
||||||
|
<Link href="/">
|
||||||
|
<a className="navbar-brand">
|
||||||
|
<div className="d-flex flex-row">
|
||||||
|
<div className="align-self-center">
|
||||||
|
<img src="/logos/logo-color.svg" alt="logo" height="32" />
|
||||||
|
</div>
|
||||||
|
<div className="align-self-center ml-2">
|
||||||
|
<div className="logo-text">
|
||||||
|
<h1>
|
||||||
|
{t("Voting platform")}
|
||||||
|
<small>{t("Majority Judgment")}</small>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
<NavbarToggler onClick={toggle} />
|
||||||
|
<Collapse isOpen={isOpen} navbar>
|
||||||
|
<Nav className="ml-auto" navbar>
|
||||||
|
<NavItem>
|
||||||
|
<Link href="/new/">
|
||||||
|
<a className="text-primary nav-link"> <FontAwesomeIcon icon={faRocket} className="mr-2" />
|
||||||
|
{t("Start an election")}
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
</NavItem>
|
||||||
|
<NavItem style={{width: "80px"}}>
|
||||||
|
<LanguageSelector />
|
||||||
|
</NavItem>
|
||||||
|
</Nav>
|
||||||
|
</Collapse>
|
||||||
|
</Navbar>
|
||||||
|
</header>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Header;
|
@ -0,0 +1,47 @@
|
|||||||
|
/* eslint react/prop-types: 0 */
|
||||||
|
import { useState } from "react";
|
||||||
|
import { Container, Row, Col, Nav, NavItem } from "reactstrap";
|
||||||
|
import Link from "next/link";
|
||||||
|
import Head from "next/head";
|
||||||
|
import { useTranslation } from 'next-i18next'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export default function HeaderResultResult() {
|
||||||
|
|
||||||
|
;
|
||||||
|
return (
|
||||||
|
|
||||||
|
<Container className="sectionHeaderResult">
|
||||||
|
|
||||||
|
<Row>
|
||||||
|
<Col className="col-md-3">
|
||||||
|
<Row>
|
||||||
|
<Col className="sectionHeaderResultSideCol">
|
||||||
|
<img src="/calendar.svg" />
|
||||||
|
<p>Clos il y a 2 jours</p></Col>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col className="sectionHeaderResultSideCol"><img src="/avatarBlue.svg" />
|
||||||
|
<p>14 votants</p></Col>
|
||||||
|
</Row>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col className="sectionHeaderResultMiddleCol col-md-6">
|
||||||
|
<h3>Quel est le meilleur candidat pour les éléctions présidentielle ?</h3>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col className="col-md-3">
|
||||||
|
<Row>
|
||||||
|
<Col className="sectionHeaderResultSideCol"><img src="/arrowUpload.svg" /><p>Télécharger les résultats</p></Col>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col className="sectionHeaderResultSideCol"><img src="/arrowL.svg" /><p>Partagez les résultats</p></Col>
|
||||||
|
</Row>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,38 @@
|
|||||||
|
/* eslint react/prop-types: 0 */
|
||||||
|
import { useState } from "react";
|
||||||
|
import { Container, Row, Col, Nav, NavItem } from "reactstrap";
|
||||||
|
import Link from "next/link";
|
||||||
|
import Head from "next/head";
|
||||||
|
import { useTranslation } from 'next-i18next'
|
||||||
|
|
||||||
|
|
||||||
|
export default function HeaderMobileResult() {
|
||||||
|
|
||||||
|
;
|
||||||
|
return (
|
||||||
|
|
||||||
|
<Container className="sectionHeaderResult">
|
||||||
|
|
||||||
|
<Row className="sectionHeaderResultMiddleCol">
|
||||||
|
<h3>Quel est le meilleur candidat pour les éléctions présidentielle ?</h3>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col className="sectionHeaderResultSideCol">
|
||||||
|
<img src="/calendar.svg" />
|
||||||
|
<p>Clos il y a 2 jours</p>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col className="sectionHeaderResultSideCol">
|
||||||
|
<img src="/avatarBlue.svg" />
|
||||||
|
<p>14 votants</p>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</Container >
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,14 @@
|
|||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import HeaderDesktopResult from './HeaderDesktopResult';
|
||||||
|
import HeaderMobileResult from './HeaderMobileResult';
|
||||||
|
import { useMediaQuery } from "react-responsive";
|
||||||
|
|
||||||
|
export default function HeaderResult() {
|
||||||
|
|
||||||
|
const isMobile = useMediaQuery({ query: "(max-width: 800px)" });
|
||||||
|
|
||||||
|
if (isMobile) return <HeaderMobileResult />;
|
||||||
|
|
||||||
|
else return <HeaderDesktopResult />;
|
||||||
|
}
|
@ -0,0 +1,18 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import plotly from 'plotly.js/dist/plotly';
|
||||||
|
import createPlotComponent from 'react-plotly.js/factory';
|
||||||
|
|
||||||
|
// const Plot = createPlotComponent(plotly);
|
||||||
|
const Plot = require('react-plotly.js').default;
|
||||||
|
export default () => (
|
||||||
|
<Plot
|
||||||
|
data={[
|
||||||
|
{
|
||||||
|
type: 'bar',
|
||||||
|
x: ['Taubira', 'Hidalgo', 'Mélenchon'],
|
||||||
|
y: [29,150,85]
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
layout={ { width: 1000, height: 500, title: 'Nombre de voix par candidat' } }
|
||||||
|
/>
|
||||||
|
)
|
@ -0,0 +1,29 @@
|
|||||||
|
import dynamic from 'next/dynamic';
|
||||||
|
import plotly from 'plotly.js/dist/plotly';
|
||||||
|
import createPlotComponent from 'react-plotly.js/factory';
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
//import Plot from 'react-plotly.js';
|
||||||
|
|
||||||
|
class BarChart extends Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Plot
|
||||||
|
data={[
|
||||||
|
{
|
||||||
|
type: 'bar',
|
||||||
|
x: ['Taubira', 'Hidalgo', 'Mélenchon'],
|
||||||
|
y: [29,150,85]
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
layout={ { width: 1000, height: 500, title: 'Nombre de voix par candidat' } }
|
||||||
|
config={{
|
||||||
|
displayModeBar: false // this is the line that hides the bar.
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default BarChart;
|
After Width: | Height: | Size: 165 B |
After Width: | Height: | Size: 2.1 KiB |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 525 B |
After Width: | Height: | Size: 521 B |
After Width: | Height: | Size: 375 B |
After Width: | Height: | Size: 297 B |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 2.7 KiB |
After Width: | Height: | Size: 17 KiB |
After Width: | Height: | Size: 4.5 KiB |
After Width: | Height: | Size: 240 B |
After Width: | Height: | Size: 765 B |
After Width: | Height: | Size: 3.7 KiB |
After Width: | Height: | Size: 20 KiB |
After Width: | Height: | Size: 512 B |
After Width: | Height: | Size: 46 KiB |
After Width: | Height: | Size: 406 B |
After Width: | Height: | Size: 386 B |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 653 B |
After Width: | Height: | Size: 41 KiB |
After Width: | Height: | Size: 14 KiB |
After Width: | Height: | Size: 403 B |
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 1.0 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 11 KiB |
@ -0,0 +1,179 @@
|
|||||||
|
.mobile-header {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.nav-mobile {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
.navbar-header {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
padding: 25px 16px 15px 32px;
|
||||||
|
justify-content: flex-end;
|
||||||
|
|
||||||
|
}
|
||||||
|
.navbar-collapse {
|
||||||
|
background: #0A004C;
|
||||||
|
padding: 10px 20px;
|
||||||
|
height: 100%;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
.navbar-brand img {
|
||||||
|
width: 112px;
|
||||||
|
}
|
||||||
|
.navbar-toggle {
|
||||||
|
width: 50px!important;
|
||||||
|
margin-top: 15px;
|
||||||
|
background: transparent;
|
||||||
|
box-shadow: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.navbar-toggle {
|
||||||
|
|
||||||
|
background: transparent!important;
|
||||||
|
box-shadow: none!important;
|
||||||
|
border: none!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-toggle img {
|
||||||
|
height: 50px!important;
|
||||||
|
width: 50px!important;
|
||||||
|
}
|
||||||
|
.navbar-nav-scroll {
|
||||||
|
max-height: 100vh!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-brand-mobile img {
|
||||||
|
width: 110px;
|
||||||
|
}
|
||||||
|
.navbar-accordion-item, .navbar-accordion-body {
|
||||||
|
background-color: transparent!important;
|
||||||
|
border: none!important;
|
||||||
|
box-shadow: none!important;
|
||||||
|
font-family: "DM Sans", sans-serif!important;
|
||||||
|
}
|
||||||
|
.navbar-accordion button {
|
||||||
|
background-color: transparent!important;
|
||||||
|
color: white!important;
|
||||||
|
margin-left: 15px!important;
|
||||||
|
font-size: 24px!important;
|
||||||
|
line-height: 31.25px;
|
||||||
|
text-align: left!important;
|
||||||
|
padding: 0px!important;
|
||||||
|
border: none!important;
|
||||||
|
box-shadow: none!important;
|
||||||
|
}
|
||||||
|
.navbar-accordion button:after {
|
||||||
|
display: inline-block;
|
||||||
|
width: 0.25rem;
|
||||||
|
height: 0.25rem;
|
||||||
|
margin-left: 0.255em;
|
||||||
|
vertical-align: 0.255em;
|
||||||
|
content: "";
|
||||||
|
border-top: 0.3em solid;
|
||||||
|
border-right: 0.3em solid transparent;
|
||||||
|
border-bottom: 0;
|
||||||
|
border-left: 0.3em solid transparent;
|
||||||
|
}
|
||||||
|
.navbar-my-link {
|
||||||
|
color: white!important;
|
||||||
|
margin-left: 15px!important;
|
||||||
|
font-size: 24px!important;
|
||||||
|
line-height: 31.25px;
|
||||||
|
text-align: left!important;
|
||||||
|
}
|
||||||
|
.navbar-credits-container {
|
||||||
|
margin-top: 25%;
|
||||||
|
text-align: left;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
.navbar-credits-container hr {
|
||||||
|
margin-top: 32px;
|
||||||
|
color: white;
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
.navbar-credits-link, .navbar-credits {
|
||||||
|
color: white!important;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 31.25px;
|
||||||
|
text-align: left!important;
|
||||||
|
margin-left: 0!important;
|
||||||
|
}
|
||||||
|
.navbar-credits {
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
.navbar-jimmy-link {
|
||||||
|
color: white!important;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 25px;
|
||||||
|
margin-left: 5px;
|
||||||
|
text-decoration: none;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
.navbar-close-button {
|
||||||
|
width: auto!important;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
.navbar-close-button img {
|
||||||
|
width: 117px!important;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
.nav-logo {
|
||||||
|
margin-bottom: 100px;
|
||||||
|
}
|
||||||
|
.btn-nav {
|
||||||
|
background: #0A004C;
|
||||||
|
border: 2px solid #FFFFFF;
|
||||||
|
box-shadow: 0px 2px 0px 0px #FFFFFF;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.btn-nav a {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.sharing-mobile {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
.menu-flags {
|
||||||
|
width: 25%;
|
||||||
|
margin-left: 15px;
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
.menu-flags button {
|
||||||
|
border-color: white;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.menu-flags button:after {
|
||||||
|
border-top: 5px solid white;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.menu-flags button[aria-expanded="true"]:after {
|
||||||
|
border-bottom: 5px solid white;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.navbar, body {
|
||||||
|
|
||||||
|
scrollbar-width: none; /* Firefox */
|
||||||
|
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar::-webkit-scrollbar {
|
||||||
|
display: none; // Safari and Chrome
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
body::-webkit-scrollbar {
|
||||||
|
display: none; // Safari and Chrome
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 0; /* Remove scrollbar space */
|
||||||
|
background: transparent; /* Optional: just make scrollbar invisible */
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,259 @@
|
|||||||
|
/** HOMEPAGE **/
|
||||||
|
.homePage {
|
||||||
|
max-width: 100%!important;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
.sectionOneHomeForm {
|
||||||
|
max-width: 100%!important;
|
||||||
|
background-color: #2400FD;
|
||||||
|
}
|
||||||
|
.sectionOneHomeRowOne {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.sectionOneHomeContent {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-content: flex-start;
|
||||||
|
justify-content: space-around;
|
||||||
|
max-width: 60%;
|
||||||
|
padding-left: 8%;
|
||||||
|
padding-right: 8%;
|
||||||
|
flex-basis: auto;
|
||||||
|
}
|
||||||
|
.sectionOneHomeContent img {
|
||||||
|
width: 200px;
|
||||||
|
height: auto;
|
||||||
|
margin: 7% 0%;
|
||||||
|
}
|
||||||
|
.sectionOneHomeContent h2 {
|
||||||
|
margin-bottom: 10%;
|
||||||
|
}
|
||||||
|
.sectionOneHomeInput {
|
||||||
|
height: 48px;
|
||||||
|
background: $mv-blue-color;
|
||||||
|
box-shadow: 0px 2px 0px rgba(255, 255, 255, 0.32);
|
||||||
|
border: none;
|
||||||
|
margin: 8px 0px;
|
||||||
|
font-family: DM Sans;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 17px;
|
||||||
|
line-height: 24px;
|
||||||
|
letter-spacing: -0.5px;
|
||||||
|
color: #C3BFD8;
|
||||||
|
border-radius: 0%;
|
||||||
|
margin-bottom: 35px;
|
||||||
|
}
|
||||||
|
.sectionOneHomeInput:focus {
|
||||||
|
background-color: transparent;
|
||||||
|
box-shadow: 0px 2px 0px rgba(255, 255, 255, 0.32);
|
||||||
|
border: none;
|
||||||
|
border-radius: 0%;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
.sectionOneHomeInput::placeholder {
|
||||||
|
color: #C3BFD8;
|
||||||
|
}
|
||||||
|
.noAds p {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
margin-top: 32px;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
.sectionTwoHome {
|
||||||
|
background: $mv-dark-blue-color;
|
||||||
|
padding: 10%;
|
||||||
|
background-image: url('/vote.svg');
|
||||||
|
background-position: 105% 46%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
.sectionTwoHomeImage {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.sectionTwoRowOne {
|
||||||
|
text-align: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin-bottom: 15%;
|
||||||
|
}
|
||||||
|
.sectionTwoRowOneCol P {
|
||||||
|
margin: auto 20%;
|
||||||
|
}
|
||||||
|
.btn-sectionTwoHome {
|
||||||
|
border: none;
|
||||||
|
box-shadow: 0px 4px 0px #7A64F9;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 85px;
|
||||||
|
}
|
||||||
|
.sharing {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 20%;
|
||||||
|
}
|
||||||
|
.sharing p {
|
||||||
|
margin-right: 15px;
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
.sharing a {
|
||||||
|
margin: 0% 15px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.sharing img {
|
||||||
|
margin: 16px 15px 0px;
|
||||||
|
width: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (min-width: 1300px) {
|
||||||
|
|
||||||
|
.sectionOneHomeForm {
|
||||||
|
background-image: url('/chevron-bicolore.svg');
|
||||||
|
background-size: 40%;
|
||||||
|
background-position: right;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 1024px) and (max-width: 1299px) {
|
||||||
|
.sectionOneHomeForm {
|
||||||
|
background-image: url('/chevron-bicolore.svg');
|
||||||
|
background-size: contain;
|
||||||
|
background-position: 120% center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (min-width: 911px) and (max-width: 1023px) {
|
||||||
|
.sectionOneHomeForm {
|
||||||
|
background-image: url('/chevron-bicolore.svg');
|
||||||
|
background-size: contain;
|
||||||
|
background-position: 140% center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 910px) {
|
||||||
|
.sectionOneHomeContent {
|
||||||
|
flex-basis: auto;
|
||||||
|
margin: auto 30px;
|
||||||
|
max-width: 80%;
|
||||||
|
}
|
||||||
|
.sectionTwoHome {
|
||||||
|
background-position: 110% 54%;
|
||||||
|
}
|
||||||
|
.sectionTwoRowOne {
|
||||||
|
flex-direction: column;
|
||||||
|
margin-bottom: 66%;
|
||||||
|
}
|
||||||
|
.sectionTwoRowOneCol {
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
.sectionTwoRowOneCol h4 {
|
||||||
|
line-height: 28px;
|
||||||
|
}
|
||||||
|
.sectionTwoRowOneCol p {
|
||||||
|
line-height: 18px;
|
||||||
|
margin: 40px 13% 60px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 619px) {
|
||||||
|
.sectionOneHomeForm, .sectionOneHomeContent {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.sectionTwoRowTwoCol h3 {
|
||||||
|
margin-bottom: 70px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 618px) {
|
||||||
|
|
||||||
|
.sectionOneHomeContent {
|
||||||
|
align-content: center;
|
||||||
|
|
||||||
|
justify-content: space-around;
|
||||||
|
max-width: 100%;
|
||||||
|
margin: auto 30px;
|
||||||
|
flex-basis: auto;
|
||||||
|
}
|
||||||
|
.sectionOneHomeInput {
|
||||||
|
margin-top: 30px!important;
|
||||||
|
}
|
||||||
|
.sectionOneHomeContent img {
|
||||||
|
margin: 7% auto;
|
||||||
|
}
|
||||||
|
.sectionOneHomeContent .row {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
.sectionOneHomeContent .row h2 {
|
||||||
|
margin: auto;
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 38px;
|
||||||
|
}
|
||||||
|
.sectionOneHomeContent .row h4 {
|
||||||
|
margin: auto;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
.sectionOneHomeContent .row p {
|
||||||
|
margin: 32px auto;
|
||||||
|
}
|
||||||
|
.sectionOneHomeContent .row button {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sectionTwoHome {
|
||||||
|
background: $mv-dark-blue-color;
|
||||||
|
background-image: none;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
.sectionTwoHomeImage {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: right;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.sectionTwoHomeImage img {
|
||||||
|
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
.sectionTwoRowOne {
|
||||||
|
margin: 70px auto 0px;
|
||||||
|
padding: 10%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sectionTwoRowTwoCol {
|
||||||
|
margin: 30px;
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.sectionTwoRowTwoCol h3 {
|
||||||
|
font-size: 40px;
|
||||||
|
line-height: 42px;
|
||||||
|
}
|
||||||
|
.sectionTwoRowTwoCol h5 {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 18px;
|
||||||
|
}
|
||||||
|
.sectionTwoRowTwoColText p {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 22px!important;
|
||||||
|
margin: 16px auto 50px;
|
||||||
|
}
|
||||||
|
.sectionTwoRowThreeCol {
|
||||||
|
width: 100%;
|
||||||
|
margin: 30px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.sectionTwoRowThreeCol img {
|
||||||
|
margin-right: 6px!important;
|
||||||
|
}
|
||||||
|
.sharing p {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.sharing {
|
||||||
|
margin: 60px 0px 75px;
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,277 @@
|
|||||||
|
.addCandidatePage {
|
||||||
|
max-width: 100%!important;
|
||||||
|
background-color: #17048e;
|
||||||
|
background-image: url('/back.svg');
|
||||||
|
background-size: 100%;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
.stepForm {
|
||||||
|
width: 650px;
|
||||||
|
margin: 50px auto;
|
||||||
|
}
|
||||||
|
.stepForm .col {
|
||||||
|
display: flex;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.stepForm img {
|
||||||
|
width: 24px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.stepForm h4 {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.preventWarning {
|
||||||
|
background: #2407D3!important;
|
||||||
|
padding: 8px!important;
|
||||||
|
}
|
||||||
|
.alert-heading {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 16px;
|
||||||
|
margin: 0px!important;
|
||||||
|
}
|
||||||
|
.alert-heading svg {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.addCandidateCard {
|
||||||
|
background-color: white;
|
||||||
|
padding: 30px;
|
||||||
|
width: 100%;
|
||||||
|
flex-basis: auto;
|
||||||
|
}
|
||||||
|
.addCandidateCard p {
|
||||||
|
color: #0A004C;
|
||||||
|
}
|
||||||
|
.addCandidateForm {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.addCandidateHeader {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.addCandidateHeader h6 {
|
||||||
|
font-size: 28px;
|
||||||
|
line-height: 32px;
|
||||||
|
color:#2400FD;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.addCandidateHeader p {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
color:#0A004C;
|
||||||
|
text-align: left;
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
.addCandidateHeader span {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.addCandidateForm label {
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
.addCandidateText {
|
||||||
|
color: #0A004C;
|
||||||
|
}
|
||||||
|
.addCandidateForm input {
|
||||||
|
width: 100%!important;
|
||||||
|
padding-left: 0px;
|
||||||
|
margin-bottom: 50px!important;
|
||||||
|
box-shadow: 0px 2px 0px 0px #C3BFD8;
|
||||||
|
|
||||||
|
}
|
||||||
|
.addCandidateText::placeholder {
|
||||||
|
color: #C3BFD8;
|
||||||
|
}
|
||||||
|
.cancelButton button {
|
||||||
|
display: flex;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: center;
|
||||||
|
border: 2px solid #0A004C;
|
||||||
|
box-shadow: 0px 4px 0px 0px #0A004C;
|
||||||
|
background: transparent;
|
||||||
|
align-items: center;
|
||||||
|
padding: 16px 24px;
|
||||||
|
}
|
||||||
|
.cancelButton p {
|
||||||
|
margin: auto;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
.removeAddButtons {
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
.removeButton {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
background: transparent;
|
||||||
|
color:#0A004C;
|
||||||
|
border: 2px solid #0A004C;
|
||||||
|
box-shadow: 0px 4px 0px 0px #0A004C;
|
||||||
|
padding: 16px 24px 16px 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.closeModalAddCandidate {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 999;
|
||||||
|
right: 10px;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.addButton {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
background: transparent;
|
||||||
|
color: #2400FD;
|
||||||
|
border: 2px solid #2400FD;
|
||||||
|
box-shadow: 0px 4px 0px 0px #2400FD;
|
||||||
|
padding: 16px 24px 16px 24px;
|
||||||
|
}
|
||||||
|
.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");
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
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-group-text {
|
||||||
|
padding: 0px!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert {
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #f44336;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.closebtn {
|
||||||
|
margin-left: 15px;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
float: right;
|
||||||
|
font-size: 22px;
|
||||||
|
line-height: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 619px) {
|
||||||
|
.stepForm {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 375px) {
|
||||||
|
.removeAddButtons {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.removeAddButtons button {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
margin: 15px auto;
|
||||||
|
}
|
||||||
|
.annuler {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,58 @@
|
|||||||
|
.resultPage {
|
||||||
|
background-image: url('/background-woman-left.svg'), url('/background-woman-right.svg');
|
||||||
|
background-position: left bottom, right bottom;
|
||||||
|
min-height: 100vh;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: auto 300px;
|
||||||
|
padding: 60px 25%;
|
||||||
|
}
|
||||||
|
.resultCard {
|
||||||
|
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
.card-header h4 {
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 24px;
|
||||||
|
color: #2400FD;
|
||||||
|
}
|
||||||
|
.sectionHeaderResult {
|
||||||
|
background-color: white;
|
||||||
|
max-width: 100%;
|
||||||
|
padding: 30px 70px;
|
||||||
|
}
|
||||||
|
.sectionHeaderResultSideCol img {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.sectionHeaderResultSideCol p {
|
||||||
|
color: #8F88BA;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 16px;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
.sectionHeaderResult h3 {
|
||||||
|
color: #0A004C;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 28px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.sectionHeaderResultSideCol {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.sectionHeaderResultMiddleCol {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 500px) {
|
||||||
|
.sectionHeaderResult {
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
.sectionHeaderResult h3 {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.sectionHeaderResult .row {
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
.sectionHeaderResultSideCol {
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
}
|