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

fix(client): guide layout

Browse Source
This commit is contained in:
Valeriy 2019-01-15 00:16:53 +03:00 committed by Stuart Taylor
parent 7f5758d58a
commit ce902c7475
2 changed files with 46 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
client/src/components/layouts/GuideLayout.js
View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { StaticQuery, graphql } from 'gatsby'; import { StaticQuery, graphql } from 'gatsby';
import { Col, Row } from '@freecodecamp/react-bootstrap'; import { Grid, Col, Row } from '@freecodecamp/react-bootstrap';
import { NavigationContext } from '../../contexts/GuideNavigationContext'; import { NavigationContext } from '../../contexts/GuideNavigationContext';
import DefaultLayout from './Default'; import DefaultLayout from './Default';
@ -61,30 +61,32 @@ const Layout = ({ children }) => (
}) => ( }) => (
<DefaultLayout> <DefaultLayout>
<Spacer size={2} /> <Spacer size={2} />
<Row> <Grid>
<Col <Row>
md={4} <Col
smHidden={!displaySideNav} md={4}
xsHidden={!displaySideNav} smHidden={!displaySideNav}
> xsHidden={!displaySideNav}
<SideNav >
expandedState={expandedState} <SideNav
pages={pages} expandedState={expandedState}
toggleDisplaySideNav={toggleDisplaySideNav} pages={pages}
toggleExpandedState={toggleExpandedState} toggleDisplaySideNav={toggleDisplaySideNav}
/> toggleExpandedState={toggleExpandedState}
</Col> />
<Col </Col>
className='content' <Col
md={8} className='content'
smHidden={displaySideNav} md={8}
xsHidden={displaySideNav} smHidden={displaySideNav}
> xsHidden={displaySideNav}
<main className='main' id='main' tabIndex='-1'> >
{children} <main className='main' id='main' tabIndex='-1'>
</main> {children}
</Col> </main>
</Row> </Col>
</Row>
</Grid>
</DefaultLayout> </DefaultLayout>
)} )}
</NavigationContext> </NavigationContext>

52
client/src/components/layouts/guide.css
View File

@ -61,14 +61,14 @@
} }
.breadcrumb > .active { .breadcrumb > .active {
color: #555 color: #555;
} }
/* Layout */ /* Layout */
.content { .content {
overflow-y: auto; /* 100vh - (navbar height) - (spacer height) */
height: 92vh; min-height: calc(100vh - 38px - 60px);
} }
.content img { .content img {
@ -93,7 +93,6 @@
width: 60%; width: 60%;
} }
@media (max-width: 400px) { @media (max-width: 400px) {
.fcc_searchBar .ais-Hits { .fcc_searchBar .ais-Hits {
width: 80%; width: 80%;
@ -113,10 +112,9 @@
} }
.main { .main {
outline: 0; outline: 0;
} }
.navContainer { .navContainer {
display: flex; display: flex;
align-items: center; align-items: center;
@ -172,15 +170,15 @@
.navbar-toggle { .navbar-toggle {
border: 1px solid #fff; border: 1px solid #fff;
margin-left: 10px; margin-left: 10px;
margin-right: 0px; margin-right: 0;
} }
.navbar-toggle .icon-bar{ .navbar-toggle .icon-bar {
background-color: #fff; background-color: #fff;
} }
@media (max-width: 992px) { @media (max-width: 992px) {
.navbar-toggle { .navbar-toggle {
display: block; display: block;
} }
} }
@ -242,30 +240,21 @@
.navPanelUl { .navPanelUl {
list-style: none; list-style: none;
margin-bottom: 0px; margin-bottom: 0;
} }
.panelStyle { .panelStyle {
border: none !important; border: none !important;
border-radius: 0px; border-radius: 0;
box-shadow: none; box-shadow: none;
color: #006400; color: #006400;
padding: 0; padding: 0;
} }
.sideNav { .sideNav {
overflow-y: scroll;
max-height: 90vh;
position: relative; position: relative;
} }
@media (max-width: 992px) {
.sideNav {
overflow-y: auto;
max-height: none;
}
}
.stubbed { .stubbed {
color: #777; color: #777;
} }
@ -283,7 +272,7 @@
.title { .title {
background-color: white; background-color: white;
border: none; border: none;
border-radius: 0px; border-radius: 0;
cursor: pointer; cursor: pointer;
} }
@ -293,27 +282,24 @@
height: calc(var(--h) - 55px); height: calc(var(--h) - 55px);
} }
@media (max-width: 992px){ @media (max-width: 992px) {
.content { .content {
overflow-y: hidden; min-height: auto;
height: 100%;
} }
} }
.skip-link { .skip-link {
background-color: white; background-color: white;
left: 0; left: 0;
padding: 5px 10px; padding: 5px 10px;
top: 0; top: 0;
z-index: 9; z-index: 9;
} }
.skip-link:focus { .skip-link:focus {
position: absolute; position: absolute;
} }
.article { .article {
outline: 0; outline: 0;
} }