commit
8fc2ff444d
After Width: | Height: | Size: 19 KiB |
Before Width: | Height: | Size: 145 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,29 @@
|
|||||||
|
/* eslint react/prop-types: 0 */
|
||||||
|
import React from "react";
|
||||||
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
|
import { faFacebookSquare } from "@fortawesome/free-brands-svg-icons";
|
||||||
|
|
||||||
|
const Facebook = props => {
|
||||||
|
const handleClick = () => {
|
||||||
|
const url =
|
||||||
|
"https://www.facebook.com/sharer.php?u=" +
|
||||||
|
props.url +
|
||||||
|
"&t=" +
|
||||||
|
props.title;
|
||||||
|
window.open(
|
||||||
|
url,
|
||||||
|
"",
|
||||||
|
"menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=700"
|
||||||
|
);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<button className={props.className} onClick={handleClick} type="button">
|
||||||
|
<FontAwesomeIcon icon={faFacebookSquare} className="mr-2" />
|
||||||
|
{props.text}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Facebook;
|
||||||
|
|
||||||
|
//i
|
@ -0,0 +1,22 @@
|
|||||||
|
/* eslint react/prop-types: 0 */
|
||||||
|
import React from "react";
|
||||||
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
|
import { faGoogleDrive } from "@fortawesome/free-brands-svg-icons";
|
||||||
|
|
||||||
|
const Gform = props => {
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
className={props.className}
|
||||||
|
href="https://docs.google.com/forms/d/1Y5ocQscSkHFZdniR7Lvc9mbkJYe9ZIC4w0tOvC4rDZo/viewform?edit_requested=true"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon icon={faGoogleDrive} className="mr-2" />
|
||||||
|
Votre avis nous intéresse !
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Gform;
|
||||||
|
|
||||||
|
//https://docs.google.com/forms/d/1Y5ocQscSkHFZdniR7Lvc9mbkJYe9ZIC4w0tOvC4rDZo/viewform?edit_requested=true
|
@ -1,48 +1,97 @@
|
|||||||
/* eslint react/prop-types: 0 */
|
/* eslint react/prop-types: 0 */
|
||||||
import React, { Component } from "react";
|
import React from "react";
|
||||||
import { withTranslation } from "react-i18next";
|
import { withTranslation } from "react-i18next";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import Paypal from "../banner/Paypal";
|
import Paypal from "../banner/Paypal";
|
||||||
|
import { useBbox } from "./useBbox";
|
||||||
|
import "./footer.css";
|
||||||
|
|
||||||
class Footer extends Component {
|
const Footer = props => {
|
||||||
constructor(props) {
|
const linkStyle = { whiteSpace: "nowrap" };
|
||||||
super(props);
|
const { t } = props;
|
||||||
this.state = {};
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
const [bboxLink1, link1] = useBbox();
|
||||||
const linkStyle = { whiteSpace: "nowrap" };
|
const [bboxLink2, link2] = useBbox();
|
||||||
const { t } = this.props;
|
const [bboxLink3, link3] = useBbox();
|
||||||
return (
|
const [bboxLink4, link4] = useBbox();
|
||||||
<footer className="text-center">
|
const [bboxLink5, link5] = useBbox();
|
||||||
<div>
|
const [bboxLink6, link6] = useBbox();
|
||||||
<Link to="/" style={linkStyle}>
|
const [bboxLink7, link7] = useBbox();
|
||||||
{t("Homepage")}
|
|
||||||
</Link>
|
return (
|
||||||
<span className="m-2">-</span>
|
<footer className="text-center">
|
||||||
<a
|
<div>
|
||||||
href="https://github.com/MieuxVoter"
|
<ul className="tacky">
|
||||||
target="_blank"
|
<li
|
||||||
rel="noopener noreferrer"
|
ref={link1}
|
||||||
style={linkStyle}
|
className={bboxLink1.top === bboxLink2.top ? "" : "no-tack"}
|
||||||
>
|
>
|
||||||
{t("Source code")}
|
<Link to="/" style={linkStyle}>
|
||||||
</a>
|
{t("Homepage")}
|
||||||
<span className="m-2">-</span>
|
</Link>
|
||||||
<a
|
</li>
|
||||||
href="https://mieuxvoter.fr/"
|
<li
|
||||||
target="_blank"
|
ref={link2}
|
||||||
rel="noopener noreferrer"
|
className={bboxLink2.top === bboxLink3.top ? "" : "no-tack"}
|
||||||
style={linkStyle}
|
>
|
||||||
>
|
<Link to="/faq" style={linkStyle}>
|
||||||
{t("Who are we?")}
|
{t("FAQ")}
|
||||||
</a>
|
</Link>
|
||||||
</div>
|
</li>
|
||||||
<div className="mt-3">
|
<li
|
||||||
<Paypal btnColor="btn-primary" />
|
ref={link3}
|
||||||
</div>
|
className={bboxLink3.top === bboxLink4.top ? "" : "no-tack"}
|
||||||
</footer>
|
>
|
||||||
);
|
<a href="mailto:app@mieuxvoter.fr?subject=[HELP]" style={linkStyle}>
|
||||||
}
|
{t("Need help?")}
|
||||||
}
|
</a>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
ref={link4}
|
||||||
|
className={bboxLink4.top === bboxLink5.top ? "" : "no-tack"}
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="https://mieuxvoter.fr/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
style={linkStyle}
|
||||||
|
>
|
||||||
|
{t("Who are we?")}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
ref={link5}
|
||||||
|
className={bboxLink5.top === bboxLink6.top ? "" : "no-tack"}
|
||||||
|
>
|
||||||
|
<Link to="/privacy-policy" style={linkStyle}>
|
||||||
|
{t("Privacy policy")}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
ref={link6}
|
||||||
|
className={bboxLink6.top === bboxLink7.top ? "" : "no-tack"}
|
||||||
|
>
|
||||||
|
<Link to="/legal-notices" style={linkStyle}>
|
||||||
|
{t("Legal notices")}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li ref={link7}>
|
||||||
|
{" "}
|
||||||
|
<a
|
||||||
|
href="https://github.com/MieuxVoter"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
style={linkStyle}
|
||||||
|
>
|
||||||
|
{t("Source code")}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div className="mt-3">
|
||||||
|
<Paypal btnColor="btn-primary" />
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
};
|
||||||
export default withTranslation()(Footer);
|
export default withTranslation()(Footer);
|
||||||
|
@ -0,0 +1,25 @@
|
|||||||
|
.tacky {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tacky li {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tacky li:after {
|
||||||
|
content: "-";
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tacky li:last-of-type:after {
|
||||||
|
content: "";
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tacky li.no-tack:after {
|
||||||
|
content: "";
|
||||||
|
margin: 0;
|
||||||
|
display: none;
|
||||||
|
}
|
@ -0,0 +1,20 @@
|
|||||||
|
/* eslint react/prop-types: 0 */
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { useRef } from 'react';
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
|
||||||
|
export const useBbox = () => {
|
||||||
|
const ref = useRef();
|
||||||
|
const [bbox, setBbox] = useState({});
|
||||||
|
|
||||||
|
const set = () =>
|
||||||
|
setBbox(ref && ref.current ? ref.current.getBoundingClientRect() : {});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
set();
|
||||||
|
window.addEventListener('resize', set);
|
||||||
|
return () => window.removeEventListener('resize', set);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return [bbox, ref];
|
||||||
|
};
|
Loading…
Reference in new issue