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) => ({ ...@@ -12,18 +12,20 @@ const styles = (theme) => ({
root: { root: {
width: '100%', width: '100%',
minHeight: 'calc(100vh - 365px)', minHeight: 'calc(100vh - 365px)',
margin: 0, margin: 0,
'& > p': { },
text: {
'& p': {
fontFamily: 'Roboto-Light', fontFamily: 'Roboto-Light',
fontSize: '24px', fontSize: '24px',
color: '#4d4c46', color: '#4d4c46',
lineHeight: '36px', lineHeight: '36px',
margin: 0, margin: 0,
}, },
'& > h3': { '& h2, h3, h4': {
fontSize: '24px', fontSize: '24px',
marginTop: '28px', marginTop: '-78px',
paddingBottom: '6px', paddingTop: '100px',
}, },
'& > ul': { '& > ul': {
marginTop: '30px', marginTop: '30px',
...@@ -37,71 +39,32 @@ const styles = (theme) => ({ ...@@ -37,71 +39,32 @@ const styles = (theme) => ({
}, },
'& > div': { '& > div': {
width: '100%', 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': { '& table': {
wordWrap: 'break-word' as 'break-word', wordWrap: 'break-word' as 'break-word',
tableLayout: 'fixed' as 'fixed', tableLayout: 'fixed' as 'fixed',
'& th': { '& th': {
textAlign: 'left' as 'left', 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': { '& caption': {
paddingTop: '8px', paddingTop: '8px',
paddingBottom: '8px', paddingBottom: '8px',
...@@ -115,6 +78,9 @@ const styles = (theme) => ({ ...@@ -115,6 +78,9 @@ const styles = (theme) => ({
backgroundColor: '#f9f2f4', backgroundColor: '#f9f2f4',
borderRadius: '4px', borderRadius: '4px',
fontFamily: 'Menlo, Monaco, Consolas, "Courier New", monospace', fontFamily: 'Menlo, Monaco, Consolas, "Courier New", monospace',
[theme.breakpoints.down('xs')]: {
wordBreak: 'break-all' as 'break-all',
},
}, },
'& pre': { '& pre': {
display: 'block' as 'block', display: 'block' as 'block',
...@@ -154,14 +120,19 @@ const styles = (theme) => ({ ...@@ -154,14 +120,19 @@ const styles = (theme) => ({
color: '#099 !important', color: '#099 !important',
}, },
}, },
'& > .sect1': { },
'& > h2': { white: {
marginTop: '-78px', backgroundColor: 'white',
paddingTop: '100px', padding: '33px 40px 49px 40px',
overflowWrap: 'break-word' as 'break-word', // height: '100%',
wordWrap: 'break-word' as 'break-word', boxSizing: 'border-box' as 'border-box',
} [theme.breakpoints.down('xs')]: {
} padding: '33px 15px 49px 15px',
},
},
header: {
fontSize: '75%',
marginBottom: '4em',
}, },
tocContainer: { tocContainer: {
padding: '0 .5rem', padding: '0 .5rem',
...@@ -170,23 +141,24 @@ const styles = (theme) => ({ ...@@ -170,23 +141,24 @@ const styles = (theme) => ({
overflow: 'hidden' as 'hidden', overflow: 'hidden' as 'hidden',
marginTop: 0, marginTop: 0,
marginBottom: '.8rem', marginBottom: '.8rem',
fontSize: '1.2em', fontSize: '1.6em',
}, },
toc: { tocWrapper: {
width: 'calc(100% - 2.5rem)',
marginLeft: '1rem',
padding: '1.25em 1em', padding: '1.25em 1em',
},
toc: {
'& ul': { '& ul': {
fontSize: '16px',
lineHeight: '1.4em',
marginLeft: 0, marginLeft: 0,
fontFamily: '"Open Sans","DejaVu Sans",sans-serif',
listStyleType: 'none' as 'none', listStyleType: 'none' as 'none',
'& ul': { '& ul': {
paddingLeft: '1em', paddingLeft: '0.8em',
}, },
}, },
'& > ul': { '& > ul': {
fontSize: '15px', fontSize: '16px',
lineHeight: '19px', lineHeight: '1.4em',
marginLeft: '.125em', marginLeft: '.125em',
padding: 0, padding: 0,
}, },
...@@ -237,14 +209,14 @@ class DocumentationSection extends React.Component<IDocumentationSectionProps> { ...@@ -237,14 +209,14 @@ class DocumentationSection extends React.Component<IDocumentationSectionProps> {
const {documentation, classes, t} = this.props; const {documentation, classes, t} = this.props;
return( return(
<GridContainer className={ `${classes.root} container-spacing-vertical` }> <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.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>
<Grid item sm={ 12 } md={ 3 } className={ classes.tocContainer }> <Grid item xs={ 12 } md={ 3 }>
<div className={ `${classes.toc} ${classes.white}` }> <div className={ classes.tocWrapper }>
<div className={ classes.tocHeader }>{ t('cms.public.c.documentationSection.toc') }</div> <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> </div>
</Grid> </Grid>
</GridContainer> </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