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 React from 'react';
import {Link} from 'react-router-dom';
import styles from './styles.css'; import styles from './styles.css';
function Footer(props) { function Footer() {
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>
),
);
return ( return (
<div className={styles.footer}> <footer className={styles.footer}>
<ul className={styles.routeLinks}>{routeLinks}</ul> <section className={styles.footerRow}>
</div> <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 { .footer {
color: #777; background: #20232a;
margin-top: 30px; border: none;
padding: 10px 15px; color: #202020;
height: 20px; font-size: 15px;
text-align: center; -webkit-font-smoothing: antialiased;
border-top: 1px solid #e6e6e6; -moz-osx-font-smoothing: grayscale;
font-weight: 400;
line-height: 24px;
padding-bottom: 2em;
padding-top: 2em;
position: relative;
} }
.routeLinks { @media only screen and (min-width: 1024px) {
margin: 0; .footer {
padding: 0; 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; list-style: none;
position: absolute; padding-left: 0;
right: 0;
left: 0;
} }
.routeLinks li { .footerListItem {
display: inline; margin: 0.5rem 0;
} }
.routeLinks li a { .footerLink,
color: inherit; .footerLink:visited {
margin: 3px; color: rgba(255, 255, 255, 0.6);
padding: 3px 7px;
text-decoration: none; text-decoration: none;
border: 1px solid transparent;
border-radius: 3px;
} }
.routeLinks li a.selected, .footerLink:hover,
.routeLinks li a:hover { .footerLink:focus {
border-color: rgba(175, 47, 47, 0.1); color: #fff;
} }
.routeLinks li a.selected { .copyright {
border-color: rgba(175, 47, 47, 0.2); color: rgba(255, 255, 255, 0.4);
text-align: center;
} }