parent
ad33191a4d
commit
d835448206
@ -1,60 +1,73 @@
|
||||
/* eslint react/prop-types: 0 */
|
||||
import React, { Component } from "react";
|
||||
import React from "react";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import { Link } from "react-router-dom";
|
||||
import Paypal from "../banner/Paypal";
|
||||
import {useBbox} from "./useBbox";
|
||||
import "./footer.css";
|
||||
|
||||
class Footer extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {};
|
||||
}
|
||||
const Footer = props => {
|
||||
const linkStyle = { whiteSpace: "nowrap" };
|
||||
const { t } = props;
|
||||
|
||||
render() {
|
||||
const linkStyle = { whiteSpace: "nowrap" };
|
||||
const { t } = this.props;
|
||||
return (
|
||||
<footer className="text-center">
|
||||
<div>
|
||||
<Link to="/" style={linkStyle}>
|
||||
{t("Homepage")}
|
||||
</Link>
|
||||
<span className="m-2">-</span>
|
||||
<a
|
||||
href="https://github.com/MieuxVoter"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={linkStyle}
|
||||
>
|
||||
{t("Source code")}
|
||||
</a>
|
||||
<span className="m-2">-</span>
|
||||
<a
|
||||
href="https://mieuxvoter.fr/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={linkStyle}
|
||||
>
|
||||
{t("Who are we?")}
|
||||
</a>
|
||||
</div>
|
||||
<span className="m-2">-</span>
|
||||
<Link to="/legal-notices" style={linkStyle}>
|
||||
{t('Legal notices')}
|
||||
</Link>
|
||||
<span className="m-2">-</span>
|
||||
<Link to="/privacy-policy" style={linkStyle}>
|
||||
{t('Privacy policy')}
|
||||
</Link>
|
||||
<span className="m-2">-</span>
|
||||
<Link to="/faq" style={linkStyle}>
|
||||
{t('faq')}
|
||||
</Link>
|
||||
<div className="mt-3">
|
||||
<Paypal btnColor="btn-primary" />
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
}
|
||||
const [bboxLink1, link1] = useBbox();
|
||||
const [bboxLink2, link2] = useBbox();
|
||||
const [bboxLink3, link3] = useBbox();
|
||||
const [bboxLink4, link4] = useBbox();
|
||||
const [bboxLink5, link5] = useBbox();
|
||||
const [bboxLink6, link6] = useBbox();
|
||||
|
||||
return (
|
||||
<footer className="text-center">
|
||||
<div>
|
||||
<ul className="tacky">
|
||||
<li ref={link1} className={(bboxLink1.top===bboxLink2.top)?"":"no-tack"}>
|
||||
<Link to="/" style={linkStyle} >
|
||||
{t("Homepage")}
|
||||
</Link>
|
||||
</li>
|
||||
<li ref={link2} className={(bboxLink2.top===bboxLink3.top)?"":"no-tack"}>
|
||||
{" "}
|
||||
<a
|
||||
href="https://github.com/MieuxVoter"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={linkStyle}
|
||||
>
|
||||
{t("Source code")}
|
||||
</a>
|
||||
</li>
|
||||
<li ref={link3} className={(bboxLink3.top===bboxLink4.top)?"":"no-tack"}>
|
||||
<a
|
||||
href="https://mieuxvoter.fr/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={linkStyle}
|
||||
>
|
||||
{t("Who are we?")}
|
||||
</a>
|
||||
</li>
|
||||
<li ref={link4} className={(bboxLink4.top===bboxLink5.top)?"":"no-tack"}>
|
||||
<Link to="/privacy-policy" style={linkStyle}>
|
||||
{t("Privacy policy")}
|
||||
</Link>
|
||||
</li>
|
||||
<li ref={link5} className={(bboxLink5.top===bboxLink6.top)?"":"no-tack"}>
|
||||
<Link to="/legal-notices" style={linkStyle}>
|
||||
{t("Legal notices")}
|
||||
</Link>
|
||||
</li>
|
||||
<li ref={link6}>
|
||||
<Link to="/faq" style={linkStyle}>
|
||||
{t("FAQ")}
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<Paypal btnColor="btn-primary" />
|
||||
</div>
|
||||
</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