gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(dropdown): Fix dropdown styles

Browse Source
This commit is contained in:
Stuart Taylor
2018-03-13 21:03:47 +00:00
parent 86b19031e9
commit d67d02a344
3 changed files with 36 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
common/app/Nav/MediumNav.jsx
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import Media from 'react-media'; import Media from 'react-media';
import { Col, Navbar, Row } from 'react-bootstrap'; import { Navbar, Row } from 'react-bootstrap';
import FCCSearchBar from 'react-freecodecamp-search'; import FCCSearchBar from 'react-freecodecamp-search';
import { NavLogo, BinButtons, NavLinks } from './components'; import { NavLogo, BinButtons, NavLinks } from './components';
@ -30,15 +30,13 @@ function MediumNav({ clickOnLogo, clickOnMap, shouldShowMapButton, panes }) {
</div> </div>
</Navbar.Header> </Navbar.Header>
</Row> </Row>
<Row> <Row className='collapse-row'>
<Col xs={ 12 }>
<Navbar.Collapse> <Navbar.Collapse>
<NavLinks <NavLinks
clickOnMap={ clickOnMap } clickOnMap={ clickOnMap }
shouldShowMapButton={ shouldShowMapButton } shouldShowMapButton={ shouldShowMapButton }
/> />
</Navbar.Collapse> </Navbar.Collapse>
</Col>
</Row> </Row>
</div> </div>
) )

28
common/app/Nav/SmallNav.jsx
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import Media from 'react-media'; import Media from 'react-media';
import { Col, Navbar, Row } from 'react-bootstrap'; import { Navbar, Row } from 'react-bootstrap';
import FCCSearchBar from 'react-freecodecamp-search'; import FCCSearchBar from 'react-freecodecamp-search';
import { NavLogo, BinButtons, NavLinks } from './components'; import { NavLogo, BinButtons, NavLinks } from './components';
@ -25,21 +25,19 @@ function SmallNav({ clickOnLogo, clickOnMap, shouldShowMapButton, panes }) {
</div> </div>
</Navbar.Header> </Navbar.Header>
</Row> </Row>
<Row> <Row className='collapse-row'>
<Col xs={ 12 }>
<Navbar.Collapse> <Navbar.Collapse>
<NavLinks <NavLinks
clickOnMap={ clickOnMap } clickOnMap={ clickOnMap }
shouldShowMapButton={ shouldShowMapButton } shouldShowMapButton={ shouldShowMapButton }
> >
<FCCSearchBar <FCCSearchBar
dropdown={ true } dropdown={ true }
placeholder= placeholder=
'&#xf002; Search 8,000+ lessons, articles, and videos' '&#xf002; Search 8,000+ lessons, articles, and videos'
/> />
</NavLinks> </NavLinks>
</Navbar.Collapse> </Navbar.Collapse>
</Col>
</Row> </Row>
</div> </div>
) )

21
common/app/Nav/nav.less
View File

@ -310,3 +310,24 @@ li.nav-avatar {
} }
} }
.collapse-row {
background-color: @brand-primary;
.dropdown-menu {
li a {
display: flex;
justify-content: center;
background-color: #eeeeee;
color: @brand-primary !important;
&:hover {
background-color: @brand-primary !important;
color: #eeeeee !important;
}
}
}
}