fix(client): guide layout
This commit is contained in:
parent
7f5758d58a
commit
ce902c7475
@ -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>
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user