3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-06 04:42:40 +02:00
Code Issues Projects Releases Packages Wiki Activity

style(v2): add static footer component (#1019)

Browse source
This commit is contained in:
Yangshun Tay 2018-10-05 00:27:37 -07:00 • committed by Endilie Yacop Sucipto
parent 41aaed64a7
commit bdbbfaee91
2 changed files with 126 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

84
v2/lib/theme/Footer/index.js
View file

@ -1,24 +1,76 @@
import React from 'react';
import {Link} from 'react-router-dom';
import styles from './styles.css';
function Footer(props) {
const {pagesMetadatas, docsMetadatas, location} = props;
const docsFlatMetadatas = Object.values(docsMetadatas);
const routeLinks = [...pagesMetadatas, ...docsFlatMetadatas].map(
data =>
data.permalink !== location.pathname && (
<li key={data.permalink}>
<Link to={data.permalink}>{data.permalink}</Link>
</li>
),
);
function Footer() {
return (
<div className={styles.footer}>
<ul className={styles.routeLinks}>{routeLinks}</ul>
</div>
<footer className={styles.footer}>
<section className={styles.footerRow}>
<div className={styles.footerColumn}>
<h3 className={styles.footerColumnTitle}>Docs</h3>
<ul className={styles.footerList}>
<li className={styles.footerListItem}>
<a className={styles.footerLink} href="/">
Getting Started
</a>
</li>
<li className={styles.footerListItem}>
<a className={styles.footerLink} href="/">
Versioning
</a>
</li>
<li className={styles.footerListItem}>
<a className={styles.footerLink} href="/">
Localization
</a>
</li>
<li className={styles.footerListItem}>
<a className={styles.footerLink} href="/">
Adding Search
</a>
</li>
</ul>
</div>
<div className={styles.footerColumn}>
<h3 className={styles.footerColumnTitle}>Community</h3>
<ul className={styles.footerList}>
<li className={styles.footerListItem}>
<a className={styles.footerLink} href="/">
User Showcase
</a>
</li>
<li className={styles.footerListItem}>
<a className={styles.footerLink} href="/">
Stack Overflow
</a>
</li>
</ul>
</div>
<div className={styles.footerColumn}>
<h3 className={styles.footerColumnTitle}>Social</h3>
<ul className={styles.footerList}>
<li className={styles.footerListItem}>
<a className={styles.footerLink} href="/">
GitHub
</a>
</li>
<li className={styles.footerListItem}>
<a className={styles.footerLink} href="/">
Facebook
</a>
</li>
<li className={styles.footerListItem}>
<a className={styles.footerLink} href="/">
Twitter
</a>
</li>
</ul>
</div>
</section>
<section className={styles.copyright}>
<span>Copyright © {new Date().getFullYear()} Facebook Inc.</span>
</section>
</footer>
);
}

83
v2/lib/theme/Footer/styles.css
View file

@ -1,39 +1,72 @@
.footer {
color: #777;
margin-top: 30px;
padding: 10px 15px;
height: 20px;
text-align: center;
border-top: 1px solid #e6e6e6;
background: #20232a;
border: none;
color: #202020;
font-size: 15px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
line-height: 24px;
padding-bottom: 2em;
padding-top: 2em;
position: relative;
}
.routeLinks {
margin: 0;
padding: 0;
@media only screen and (min-width: 1024px) {
.footer {
flex-shrink: 0;
}
}
.footerRow {
display: flex;
justify-content: space-between;
margin: 0 auto 3em;
max-width: 1080px;
}
@media only screen and (max-width: 735px) {
.footerRow {
display: flex;
flex-direction: column;
margin: 0 2em 3em;
width: calc(100% - 4em);
}
.footerRow > div {
margin-bottom: 18px;
}
}
.footerColumn {
flex: 1;
}
.footerColumnTitle {
color: #fff;
}
.footerList {
list-style: none;
position: absolute;
right: 0;
left: 0;
padding-left: 0;
}
.routeLinks li {
display: inline;
.footerListItem {
margin: 0.5rem 0;
}
.routeLinks li a {
color: inherit;
margin: 3px;
padding: 3px 7px;
.footerLink,
.footerLink:visited {
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
border: 1px solid transparent;
border-radius: 3px;
}
.routeLinks li a.selected,
.routeLinks li a:hover {
border-color: rgba(175, 47, 47, 0.1);
.footerLink:hover,
.footerLink:focus {
color: #fff;
}
.routeLinks li a.selected {
border-color: rgba(175, 47, 47, 0.2);
.copyright {
color: rgba(255, 255, 255, 0.4);
text-align: center;
}