fix(client): guide layout

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

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,6 +61,7 @@ const Layout = ({ children }) => (
}) => (
<DefaultLayout>
<Spacer size={2} />
<Grid>
<Row>
<Col
md={4}
@ -85,6 +86,7 @@ const Layout = ({ children }) => (
</main>
</Col>
</Row>
</Grid>
</DefaultLayout>
)}
</NavigationContext>

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%;
@ -116,7 +115,6 @@
outline: 0;
}
.navContainer {
display: flex;
align-items: center;
@ -172,10 +170,10 @@
.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;
}
@ -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,13 +282,10 @@
height: calc(var(--h) - 55px);
}
@media (max-width: 992px){
@media (max-width: 992px) {
.content {
overflow-y: hidden;
height: 100%;
min-height: auto;
}
}
.skip-link {