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 PropTypes from 'prop-types';
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 DefaultLayout from './Default';
@ -61,30 +61,32 @@ const Layout = ({ children }) => (
}) => (
<DefaultLayout>
<Spacer size={2} />
<Row>
<Col
md={4}
smHidden={!displaySideNav}
xsHidden={!displaySideNav}
>
<SideNav
expandedState={expandedState}
pages={pages}
toggleDisplaySideNav={toggleDisplaySideNav}
toggleExpandedState={toggleExpandedState}
/>
</Col>
<Col
className='content'
md={8}
smHidden={displaySideNav}
xsHidden={displaySideNav}
>
<main className='main' id='main' tabIndex='-1'>
{children}
</main>
</Col>
</Row>
<Grid>
<Row>
<Col
md={4}
smHidden={!displaySideNav}
xsHidden={!displaySideNav}
>
<SideNav
expandedState={expandedState}
pages={pages}
toggleDisplaySideNav={toggleDisplaySideNav}
toggleExpandedState={toggleExpandedState}
/>
</Col>
<Col
className='content'
md={8}
smHidden={displaySideNav}
xsHidden={displaySideNav}
>
<main className='main' id='main' tabIndex='-1'>
{children}
</main>
</Col>
</Row>
</Grid>
</DefaultLayout>
)}
</NavigationContext>

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

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