Skip to content

Commit a1e83a0

Browse files
taiontaion
committed
Merge pull request react-bootstrap#1501 from taion/docs-tweak
Clean up use of Affix
2 parents efcef9c + e65bc09 commit a1e83a0

7 files changed

Lines changed: 103 additions & 256 deletions

File tree

‎docs/assets/docs.css‎

Lines changed: 8 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -535,8 +535,10 @@ body {
535535
*/
536536

537537
/* By default it's not affixed in mobile views, so undo that */
538-
.bs-docs-sidebar.affix {
539-
position: static;
538+
@media (max-width: 991px) {
539+
.bs-docs-sidebar {
540+
position: static !important;
541+
}
540542
}
541543
@media (min-width: 768px) {
542544
.bs-docs-sidebar {
@@ -628,35 +630,17 @@ body {
628630

629631
/* Show and affix the side nav when space allows it */
630632
@media (min-width: 992px) {
633+
.bs-docs-sidebar-holder {
634+
padding-top: 20px;
635+
}
631636
.bs-docs-sidebar .nav > .active > ul {
632637
display: block;
633638
}
634-
/* Widen the fixed sidebar */
635-
.bs-docs-sidebar.affix,
636-
.bs-docs-sidebar.affix-bottom {
637-
width: 213px;
638-
}
639-
.bs-docs-sidebar.affix {
640-
position: fixed; /* Undo the static from mobile first approach */
641-
top: 20px;
642-
}
643-
.bs-docs-sidebar.affix-bottom {
644-
position: absolute; /* Undo the static from mobile first approach */
645-
}
646-
.bs-docs-sidebar.affix-bottom .bs-docs-sidenav,
647-
.bs-docs-sidebar.affix .bs-docs-sidenav {
639+
.bs-docs-sidebar .bs-docs-sidenav {
648640
margin-top: 0;
649641
margin-bottom: 0;
650642
}
651643
}
652-
@media (min-width: 1200px) {
653-
/* Widen the fixed sidebar again */
654-
.bs-docs-sidebar.affix-bottom,
655-
.bs-docs-sidebar.affix {
656-
width: 263px;
657-
}
658-
}
659-
660644

661645
/*
662646
* Docs sections

‎docs/src/ComponentsPage.js‎

Lines changed: 91 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,7 @@
1-
/* eslint react/no-did-mount-set-state: 0 */
2-
31
import React from 'react';
4-
import ReactDOM from 'react-dom';
5-
import getOffset from 'dom-helpers/query/offset';
6-
import css from 'dom-helpers/style';
2+
import AutoAffix from 'react-overlays/lib/AutoAffix';
73

8-
import Affix from '../../src/Affix';
94
import Nav from '../../src/Nav';
10-
import SubNav from '../../src/SubNav';
115
import NavItem from '../../src/NavItem';
126

137
import NavMain from './NavMain';
@@ -17,32 +11,31 @@ import PageFooter from './PageFooter';
1711
import ReactPlayground from './ReactPlayground';
1812
import Samples from './Samples';
1913
import Anchor from './Anchor';
14+
import SubNav from './SubNav';
2015

2116
const ComponentsPage = React.createClass({
2217
getInitialState() {
2318
return {
24-
activeNavItemHref: null,
25-
navOffsetTop: null
19+
activeNavItemHref: null
2620
};
2721
},
2822

29-
handleNavItemSelect(key, href) {
30-
this.setState({
31-
activeNavItemHref: href
32-
});
23+
getMain() {
24+
return this.refs.main;
25+
},
3326

27+
handleNavItemSelect(key, href) {
3428
window.location = href;
29+
this.setActiveNavItem();
3530
},
3631

3732
componentDidMount() {
38-
let elem = ReactDOM.findDOMNode(this.refs.sideNav);
39-
let sideNavOffsetTop = getOffset(elem).top;
40-
let sideNavMarginTop = parseInt(css(elem.firstChild, 'marginTop'), 10);
41-
let topNavHeight = ReactDOM.findDOMNode(this.refs.topNav).offsetHeight;
33+
this.setActiveNavItem();
34+
},
4235

36+
setActiveNavItem() {
4337
this.setState({
44-
navOffsetTop: sideNavOffsetTop - topNavHeight - sideNavMarginTop,
45-
navOffsetBottom: ReactDOM.findDOMNode(this.refs.footer).offsetHeight
38+
activeNavItemHref: window.location.hash
4639
});
4740
},
4841

@@ -55,7 +48,7 @@ const ComponentsPage = React.createClass({
5548
title="Components"
5649
subTitle="" />
5750

58-
<div className="container bs-docs-container">
51+
<div ref="main" className="container bs-docs-container">
5952
<div className="row">
6053
<div className="col-md-9" role="main">
6154

@@ -986,58 +979,87 @@ const ComponentsPage = React.createClass({
986979
<h4><Anchor id="utilities-fade-props">Props</Anchor></h4>
987980
<PropTable component="Fade"/>
988981
</div>
982+
983+
{/* Missing components */}
984+
<div className="bs-docs-section">
985+
<h1 className="page-header"><Anchor id="missing">Missing components</Anchor></h1>
986+
987+
<p className="lead">We've intentionally omitted a few components from React-Bootstrap. Don't worry, though &ndash; we cover what to do in this section.</p>
988+
</div>
989+
990+
<div className="bs-docs-section">
991+
<h2 className="page-header"><Anchor id="affix">Affix</Anchor></h2>
992+
993+
<p>Use <a href="http://react-bootstrap.github.io/react-overlays/examples/#affixes"><code>{'<AutoAffix>'}</code> or <code>{'<Affix>'}</code> from react-overlays</a>.</p>
994+
<p>There isn't really any additional Bootstrap markup associated with affixes, so we didn't add a Bootstrap-specific affix class. The upstream ones already give you everything you need.</p>
995+
</div>
996+
997+
<div className="bs-docs-section">
998+
<h2 className="page-header"><Anchor id="scrollspy">Scrollspy</Anchor></h2>
999+
1000+
<p>Setting up a scrollspy in idiomatic React requires wiring up a number of components across your entire page, both to handle elements scrolling in and to wire that up to the navigation. It's a poor fit for a component library, because it's not a standalone component.</p>
1001+
<p>To implement this functionality, use a library like <a href="http://brigade.github.io/react-waypoint/">React Waypoint</a> along with a bit of your own state management.</p>
1002+
</div>
9891003
</div>
9901004

9911005

992-
<div className="col-md-3">
993-
<Affix
994-
className="bs-docs-sidebar hidden-print"
995-
role="complementary"
996-
offsetTop={this.state.navOffsetTop}
997-
offsetBottom={this.state.navOffsetBottom}>
998-
<Nav
999-
className="bs-docs-sidenav"
1000-
activeHref={this.state.activeNavItemHref}
1001-
onSelect={this.handleNavItemSelect}
1002-
ref="sideNav">
1003-
<SubNav href="#buttons" key={1} text="Buttons">
1004-
<NavItem href="#btn-groups" key={2}>Button groups</NavItem>
1005-
<NavItem href="#btn-dropdowns" key={3}>Button dropdowns</NavItem>
1006-
<NavItem href="#menu-item" key={25}>Menu Item</NavItem>
1007-
</SubNav>
1008-
<NavItem href="#panels" key={4}>Panels</NavItem>
1009-
<NavItem href="#modals" key={5}>Modals</NavItem>
1010-
<NavItem href="#tooltips" key={6}>Tooltips</NavItem>
1011-
<NavItem href="#popovers" key={7}>Popovers</NavItem>
1012-
<NavItem href="#overlays" key={27}>Overlays</NavItem>
1013-
<NavItem href="#progress" key={8}>Progress bars</NavItem>
1014-
<NavItem href="#navs" key={9}>Navs</NavItem>
1015-
<NavItem href="#navbars" key={10}>Navbars</NavItem>
1016-
<NavItem href="#breadcrumbs" key={30}>Breadcrumbs</NavItem>
1017-
<NavItem href="#tabs" key={11}>Tabs</NavItem>
1018-
<NavItem href="#pager" key={12}>Pager</NavItem>
1019-
<NavItem href="#pagination" key={13}>Pagination</NavItem>
1020-
<NavItem href="#alerts" key={14}>Alerts</NavItem>
1021-
<NavItem href="#carousels" key={15}>Carousels</NavItem>
1022-
<NavItem href="#grids" key={16}>Grids</NavItem>
1023-
<NavItem href="#images" key={29}>Images</NavItem>
1024-
<NavItem href="#thumbnail" key={17}>Thumbnail</NavItem>
1025-
<NavItem href="#listgroup" key={18}>List group</NavItem>
1026-
<NavItem href="#labels" key={19}>Labels</NavItem>
1027-
<NavItem href="#badges" key={20}>Badges</NavItem>
1028-
<NavItem href="#jumbotron" key={21}>Jumbotron</NavItem>
1029-
<NavItem href="#page-header" key={22}>Page Header</NavItem>
1030-
<NavItem href="#responsive-embed" key={31}>Responsive embed</NavItem>
1031-
<NavItem href="#wells" key={23}>Wells</NavItem>
1032-
<NavItem href="#glyphicons" key={24}>Glyphicons</NavItem>
1033-
<NavItem href="#tables" key={25}>Tables</NavItem>
1034-
<NavItem href="#input" key={26}>Input</NavItem>
1035-
<NavItem href="#utilities" key={28}>Utilities</NavItem>
1036-
</Nav>
1037-
<a className="back-to-top" href="#top">
1038-
Back to top
1039-
</a>
1040-
</Affix>
1006+
<div className="col-md-3 bs-docs-sidebar-holder">
1007+
<AutoAffix
1008+
viewportOffsetTop={20}
1009+
container={this.getMain}
1010+
>
1011+
<div
1012+
className="bs-docs-sidebar hidden-print"
1013+
role="complementary"
1014+
>
1015+
<Nav
1016+
className="bs-docs-sidenav"
1017+
activeHref={this.state.activeNavItemHref}
1018+
onSelect={this.handleNavItemSelect}
1019+
>
1020+
<SubNav href="#buttons" key={1} text="Buttons">
1021+
<NavItem href="#btn-groups" key={2}>Button groups</NavItem>
1022+
<NavItem href="#btn-dropdowns" key={3}>Button dropdowns</NavItem>
1023+
<NavItem href="#menu-item" key={25}>Menu Item</NavItem>
1024+
</SubNav>
1025+
<NavItem href="#panels" key={4}>Panels</NavItem>
1026+
<NavItem href="#modals" key={5}>Modals</NavItem>
1027+
<NavItem href="#tooltips" key={6}>Tooltips</NavItem>
1028+
<NavItem href="#popovers" key={7}>Popovers</NavItem>
1029+
<NavItem href="#overlays" key={27}>Overlays</NavItem>
1030+
<NavItem href="#progress" key={8}>Progress bars</NavItem>
1031+
<NavItem href="#navs" key={9}>Navs</NavItem>
1032+
<NavItem href="#navbars" key={10}>Navbars</NavItem>
1033+
<NavItem href="#breadcrumbs" key={30}>Breadcrumbs</NavItem>
1034+
<NavItem href="#tabs" key={11}>Tabs</NavItem>
1035+
<NavItem href="#pager" key={12}>Pager</NavItem>
1036+
<NavItem href="#pagination" key={13}>Pagination</NavItem>
1037+
<NavItem href="#alerts" key={14}>Alerts</NavItem>
1038+
<NavItem href="#carousels" key={15}>Carousels</NavItem>
1039+
<NavItem href="#grids" key={16}>Grids</NavItem>
1040+
<NavItem href="#images" key={29}>Images</NavItem>
1041+
<NavItem href="#thumbnail" key={17}>Thumbnail</NavItem>
1042+
<NavItem href="#listgroup" key={18}>List group</NavItem>
1043+
<NavItem href="#labels" key={19}>Labels</NavItem>
1044+
<NavItem href="#badges" key={20}>Badges</NavItem>
1045+
<NavItem href="#jumbotron" key={21}>Jumbotron</NavItem>
1046+
<NavItem href="#page-header" key={22}>Page Header</NavItem>
1047+
<NavItem href="#responsive-embed" key={31}>Responsive embed</NavItem>
1048+
<NavItem href="#wells" key={23}>Wells</NavItem>
1049+
<NavItem href="#glyphicons" key={24}>Glyphicons</NavItem>
1050+
<NavItem href="#tables" key={25}>Tables</NavItem>
1051+
<NavItem href="#input" key={26}>Input</NavItem>
1052+
<NavItem href="#utilities" key={28}>Utilities</NavItem>
1053+
<SubNav href="#missing" key={32} text="Missing components">
1054+
<NavItem href="#affix" key={33}>Affix</NavItem>
1055+
<NavItem href="#scrollspy" key={34}>Scrollspy</NavItem>
1056+
</SubNav>
1057+
</Nav>
1058+
<a className="back-to-top" href="#top">
1059+
Back to top
1060+
</a>
1061+
</div>
1062+
</AutoAffix>
10411063
</div>
10421064
</div>
10431065
</div>

src/SubNav.js renamed to docs/src/SubNav.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React, { cloneElement } from 'react';
22
import classNames from 'classnames';
33

4-
import ValidComponentChildren from './utils/ValidComponentChildren';
5-
import createChainedFunction from './utils/createChainedFunction';
6-
import SafeAnchor from './SafeAnchor';
4+
import ValidComponentChildren from '../../src/utils/ValidComponentChildren';
5+
import createChainedFunction from '../../src/utils/createChainedFunction';
6+
import SafeAnchor from '../../src/SafeAnchor';
77

88
const SubNav = React.createClass({
99

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@
120120
"invariant": "^2.1.2",
121121
"keycode": "^2.1.0",
122122
"lodash-compat": "^3.10.1",
123-
"react-overlays": "^0.5.0",
123+
"react-overlays": "^0.5.1",
124124
"react-prop-types": "^0.3.0",
125125
"uncontrollable": "^3.1.3",
126126
"warning": "^2.1.0"

‎src/Affix.js‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

0 commit comments

Comments
 (0)