Browse Source

feat(static-pages) : hide/show tack(dash) on footer

master
Clement G 2 years ago
parent
commit
d835448206
  1. 119
      src/components/layouts/Footer.jsx
  2. 25
      src/components/layouts/footer.css
  3. 20
      src/components/layouts/useBbox.jsx

119
src/components/layouts/Footer.jsx

@ -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);

25
src/components/layouts/footer.css

@ -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;
}

20
src/components/layouts/useBbox.jsx

@ -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…
Cancel
Save