3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-10 15:47:23 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(v2): use new pagination nav CSS (#1520)

Browse source
This commit is contained in:
Yangshun Tay 2019-05-26 20:19:16 -07:00 • committed by GitHub
parent c75cec76ec
commit b8965dcf38
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 40 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

20
packages/docusaurus-plugin-content-blog/src/theme/BlogListPaginator/index.js
View file

@ -13,22 +13,26 @@ function BlogListPaginator(props) {
const {previousPage, nextPage} = metadata; const {previousPage, nextPage} = metadata;
return ( return (
<div className="row"> <nav className="pagination-nav">
<div className="col col--6"> <div className="pagination-nav__item">
{previousPage && ( {previousPage && (
<Link className="button button--secondary" to={previousPage}> <Link className="pagination-nav__link" to={previousPage}>
Newer entries <h4 className="pagination-nav__link--label">
&laquo; Newer Entries
</h4>
</Link> </Link>
)} )}
</div> </div>
<div className="col col--6 text--right"> <div className="pagination-nav__item pagination-nav__item-next">
{nextPage && ( {nextPage && (
<Link className="button button--secondary" to={nextPage}> <Link className="pagination-nav__link" to={nextPage}>
Older entries <h4 className="pagination-nav__link--label">
Older Entries &raquo;
</h4>
</Link> </Link>
)} )}
</div> </div>
</div> </nav>
); );
} }

22
packages/docusaurus-plugin-content-blog/src/theme/BlogPostPaginator/index.js
View file

@ -12,22 +12,28 @@ function BlogPostPaginator(props) {
const {nextItem, prevItem} = props; const {nextItem, prevItem} = props;
return ( return (
<div className="row"> <nav className="pagination-nav">
<div className="col col--6"> <div className="pagination-nav__item">
{prevItem && ( {prevItem && (
<Link className="button button--secondary" to={prevItem.permalink}> <Link className="pagination-nav__link" to={prevItem.permalink}>
{prevItem.title} <h5 className="pagination-nav__link--sublabel">Previous Post</h5>
<h4 className="pagination-nav__link--label">
&laquo; {prevItem.title}
</h4>
</Link> </Link>
)} )}
</div> </div>
<div className="col col--6 text--right"> <div className="pagination-nav__item pagination-nav__item--next">
{nextItem && ( {nextItem && (
<Link className="button button--secondary" to={nextItem.permalink}> <Link className="pagination-nav__link" to={nextItem.permalink}>
{nextItem.title} <h5 className="pagination-nav__link--sublabel">Next Post</h5>
<h4 className="pagination-nav__link--label">
{nextItem.title} &raquo;
</h4>
</Link> </Link>
)} )}
</div> </div>
</div> </nav>
); );
} }

25
packages/docusaurus-plugin-content-docs/src/theme/DocPaginator/index.js
View file

@ -15,29 +15,32 @@ function DocPaginator(props) {
} = props; } = props;
return ( return (
<div className="row"> <nav className="pagination-nav">
<div className="col col--6"> <div className="pagination-nav__item">
{metadata.previous && docs[metadata.previous] && ( {metadata.previous && docs[metadata.previous] && (
<Link <Link
className="button button--secondary" className="pagination-nav__link"
to={docs[metadata.previous].permalink}> to={docs[metadata.previous].permalink}>
<i className="fas fa-arrow-left" /> <h5 className="pagination-nav__link--sublabel">Previous</h5>
&nbsp;&nbsp; <h4 className="pagination-nav__link--label">
{metadata.previous_title} &laquo; {metadata.previous_title}
</h4>
</Link> </Link>
)} )}
</div> </div>
<div className="col col--6 text--right"> <div className="pagination-nav__item pagination-nav__item--next">
{metadata.next && docs[metadata.next] && ( {metadata.next && docs[metadata.next] && (
<Link <Link
className="button button--secondary" className="pagination-nav__link"
to={docs[metadata.next].permalink}> to={docs[metadata.next].permalink}>
{metadata.next_title}&nbsp;&nbsp; <h5 className="pagination-nav__link--sublabel">Next</h5>
<i className="fas fa-arrow-right" /> <h4 className="pagination-nav__link--label">
{metadata.next_title} &raquo;
</h4>
</Link> </Link>
)} )}
</div> </div>
</div> </nav>
); );
} }