Commit 1e107c52 authored by Oleksii Savran's avatar Oleksii Savran Committed by Viacheslav Pavlov

Documentation pages styles

Fixed toc navigation
parent c421f54e
......@@ -12,18 +12,20 @@ const styles = (theme) => ({
root: {
width: '100%',
minHeight: 'calc(100vh - 365px)',
margin: 0,
'& > p': {
margin: 0,
},
text: {
'& p': {
fontFamily: 'Roboto-Light',
fontSize: '24px',
color: '#4d4c46',
lineHeight: '36px',
margin: 0,
},
'& > h3': {
'& h2, h3, h4': {
fontSize: '24px',
marginTop: '28px',
paddingBottom: '6px',
marginTop: '-78px',
paddingTop: '100px',
},
'& > ul': {
marginTop: '30px',
......@@ -37,71 +39,32 @@ const styles = (theme) => ({
},
'& > div': {
width: '100%',
}
},
white: {
backgroundColor: 'white',
},
header: {
fontSize: '75%',
marginBottom: '4em',
},
content: {
width: '100%',
boxSizing: 'border-box' as 'border-box',
fontFamily: 'arial, sans-serif',
fontSize: '16px',
lineHeight: 1.4285,
color: '#000',
'& p': {
margin: '0 0 11px',
color: '#4d4c46',
marginTop: '20px',
marginBottom: '0',
fontFamily: 'Roboto-Regular',
'&:first-child': {
[theme.breakpoints.down('sm')]: {
lineHeight: '26px',
fontSize: '20px',
marginTop: '33px',
paddingRight: 0,
},
},
},
'& h2': {
fontSize: '34px',
marginTop: '-78px',
},
'& h3': {
fontSize: '24px',
marginTop: '-89px',
},
'& h4': {
fontSize: '20px',
marginTop: '-72px',
},
'& h2, & h3, & h4': {
marginBottom: '11px',
fontWeight: 700,
lineHeight: '1.1',
color: 'inherit',
paddingTop: '100px',
},
'& img': {
display: 'inline-block' as 'inline-block',
verticalAlign: 'middle' as 'middle',
maxWidth: '100%',
height: 'auto' as 'auto',
textAlign: 'center' as 'center',
border: '0',
},
'& table': {
wordWrap: 'break-word' as 'break-word',
tableLayout: 'fixed' as 'fixed',
'& th': {
textAlign: 'left' as 'left',
},
'& code': {
[theme.breakpoints.down('sm')]: {
// overflowWrap: 'break-word' as 'break-word',
wordBreak: 'break-all' as 'break-all',
hyphens: 'auto' as 'auto',
// wordWrap: 'anywhere' as 'anywhere,'
},
},
'& td': {
'& > p': {
[theme.breakpoints.down('xs')]: {
wordBreak: 'break-word' as 'break-word',
wordWrap: 'break-word' as 'break-word',
hyphens: 'auto' as 'auto',
},
},
}
},
}
,
'& caption': {
paddingTop: '8px',
paddingBottom: '8px',
......@@ -115,6 +78,9 @@ const styles = (theme) => ({
backgroundColor: '#f9f2f4',
borderRadius: '4px',
fontFamily: 'Menlo, Monaco, Consolas, "Courier New", monospace',
[theme.breakpoints.down('xs')]: {
wordBreak: 'break-all' as 'break-all',
},
},
'& pre': {
display: 'block' as 'block',
......@@ -154,14 +120,19 @@ const styles = (theme) => ({
color: '#099 !important',
},
},
'& > .sect1': {
'& > h2': {
marginTop: '-78px',
paddingTop: '100px',
overflowWrap: 'break-word' as 'break-word',
wordWrap: 'break-word' as 'break-word',
}
}
},
white: {
backgroundColor: 'white',
padding: '33px 40px 49px 40px',
// height: '100%',
boxSizing: 'border-box' as 'border-box',
[theme.breakpoints.down('xs')]: {
padding: '33px 15px 49px 15px',
},
},
header: {
fontSize: '75%',
marginBottom: '4em',
},
tocContainer: {
padding: '0 .5rem',
......@@ -170,23 +141,24 @@ const styles = (theme) => ({
overflow: 'hidden' as 'hidden',
marginTop: 0,
marginBottom: '.8rem',
fontSize: '1.2em',
fontSize: '1.6em',
},
toc: {
width: 'calc(100% - 2.5rem)',
marginLeft: '1rem',
tocWrapper: {
padding: '1.25em 1em',
},
toc: {
'& ul': {
fontSize: '16px',
lineHeight: '1.4em',
marginLeft: 0,
fontFamily: '"Open Sans","DejaVu Sans",sans-serif',
listStyleType: 'none' as 'none',
'& ul': {
paddingLeft: '1em',
paddingLeft: '0.8em',
},
},
'& > ul': {
fontSize: '15px',
lineHeight: '19px',
fontSize: '16px',
lineHeight: '1.4em',
marginLeft: '.125em',
padding: 0,
},
......@@ -237,14 +209,14 @@ class DocumentationSection extends React.Component<IDocumentationSectionProps> {
const {documentation, classes, t} = this.props;
return(
<GridContainer className={ `${classes.root} container-spacing-vertical` }>
<Grid item sm={ 12 } md={ 9 } className={ classes.white } >
<Grid item xs={ 12 } md={ 9 } className={ classes.white } >
<div className={ classes.header } dangerouslySetInnerHTML={ {__html: documentation.header} }/>
<div className={ classes.content } dangerouslySetInnerHTML={ {__html: this.replaceImgSrc(documentation.content)} }/>
<div className={ classes.text } dangerouslySetInnerHTML={ {__html: this.replaceImgSrc(documentation.content)} }/>
</Grid>
<Grid item sm={ 12 } md={ 3 } className={ classes.tocContainer }>
<div className={ `${classes.toc} ${classes.white}` }>
<Grid item xs={ 12 } md={ 3 }>
<div className={ classes.tocWrapper }>
<div className={ classes.tocHeader }>{ t('cms.public.c.documentationSection.toc') }</div>
<div className={ `${classes.toc} ${classes.white}` } dangerouslySetInnerHTML={ {__html: documentation.toc.split('href="#').join(`href="${this.state.basePath}#`)} }/>
<div className={ classes.toc } dangerouslySetInnerHTML={ {__html: documentation.toc.split('href="#').join(`href="${this.state.basePath}#`)} }/>
</div>
</Grid>
</GridContainer>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment