Fix footer layout

This commit is contained in:
Ildar Kamalov 2018-11-16 12:46:18 +03:00
parent 5bf38041c5
commit ced5499083
5 changed files with 86 additions and 26 deletions

View File

@ -0,0 +1,45 @@
.footer__row {
display: flex;
align-items: center;
flex-direction: column;
}
.footer__column {
margin-bottom: 15px;
}
.footer__column--language {
min-width: 220px;
margin-bottom: 0;
}
.footer__link {
display: inline-block;
vertical-align: middle;
margin-right: 15px;
}
.footer__link--report {
position: relative;
top: 1px;
margin-right: 0;
}
@media screen and (min-width: 768px) {
.footer__copyright {
margin-right: 25px;
}
.footer__row {
flex-direction: row;
}
.footer__column {
margin-bottom: 0;
}
.footer__column--language {
min-width: initial;
margin-left: auto;
}
}

View File

@ -3,6 +3,9 @@ import { Trans, withNamespaces } from 'react-i18next';
import { REPOSITORY } from '../../helpers/constants'; import { REPOSITORY } from '../../helpers/constants';
import i18n, { languages } from '../../i18n'; import i18n, { languages } from '../../i18n';
import './Footer.css';
import './Select.css';
class Footer extends Component { class Footer extends Component {
getYear = () => { getYear = () => {
const today = new Date(); const today = new Date();
@ -17,34 +20,28 @@ class Footer extends Component {
return ( return (
<footer className="footer"> <footer className="footer">
<div className="container"> <div className="container">
<div className="row align-items-center flex-row"> <div className="footer__row">
<div className="col-12 col-lg-auto mt-3 mt-lg-0 text-center"> <div className="footer__column">
<div className="row align-items-center justify-content-center"> <div className="footer__copyright">
<div className="col-auto"> <Trans>copyright</Trans> © {this.getYear()} <a href="https://adguard.com/">AdGuard</a>
<Trans>copyright</Trans> © {this.getYear()} <a href="https://adguard.com/">AdGuard</a>
</div>
<div className="col-auto">
<select className="form-control" value={i18n.language} onChange={this.changeLanguage}>
{ languages.map(language => <option
key={language.key} value={language.key}>
{language.name}
</option>) }
</select>
</div>
<div className="col-auto">
<ul className="list-inline text-center mb-0">
<li className="list-inline-item">
<a href={REPOSITORY.URL} target="_blank" rel="noopener noreferrer"><Trans>homepage</Trans></a>
</li>
</ul>
</div>
<div className="col-auto">
<a href={`${REPOSITORY.URL}/issues/new`} className="btn btn-outline-primary btn-sm" target="_blank" rel="noopener noreferrer">
<Trans>report_an_issue</Trans>
</a>
</div>
</div> </div>
</div> </div>
<div className="footer__column">
<a href={REPOSITORY.URL} className="footer__link" target="_blank" rel="noopener noreferrer">
<Trans>homepage</Trans>
</a>
<a href={`${REPOSITORY.URL}/issues/new`} className="btn btn-outline-primary btn-sm footer__link footer__link--report" target="_blank" rel="noopener noreferrer">
<Trans>report_an_issue</Trans>
</a>
</div>
<div className="footer__column footer__column--language">
<select className="form-control select select--language" value={i18n.language} onChange={this.changeLanguage}>
{ languages.map(language => <option
key={language.key} value={language.key}>
{language.name}
</option>) }
</select>
</div>
</div> </div>
</div> </div>
</footer> </footer>

View File

@ -0,0 +1,16 @@
.select.select--language {
height: 45px;
padding: 0 32px 2px 33px;
outline: 0;
border-color: rgba(0, 40, 100, 0.12);
background-image: url("./svg/globe.svg"), url("./svg/chevron-down.svg");
background-repeat: no-repeat, no-repeat;
background-position: left 11px center, right 9px center;
background-size: 14px, 17px 20px;
appearance: none;
cursor: pointer;
}
.select--language::-ms-expand {
opacity: 0;
}

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#9aa0ac" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>

After

Width:  |  Height:  |  Size: 264 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#9aa0ac" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-globe"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>

After

Width:  |  Height:  |  Size: 354 B