Commit ac200f61 authored by Viacheslav Pavlov's avatar Viacheslav Pavlov

Fix TOC navigation

fixed invisible header after toc navigation
js fix replaced with css implementation
removed ScrollToTopOnMount from DescriptorList DisplayPage
parent 566dece5
......@@ -207,8 +207,30 @@ interface IDocumentationSectionProps extends React.ClassAttributes<any> {
class DocumentationSection extends React.Component<IDocumentationSectionProps> {
public state = {
basePath: '',
};
private replaceImgSrc = (content) => {
return content.replace('<img src="images', '<img src="/proxy/api/v1/cms/d/images');
return content.split('<img src="images').join('<img src="/proxy/api/v1/cms/d/images');
}
public componentWillReceiveProps(nextProps) {
if (typeof document !== 'undefined') {
this.setState({basePath: document.location.pathname});
}
}
public componentWillUpdate(nextProps, nextState) {
if (typeof document !== 'undefined' && nextState.basePath !== this.state.basePath) {
this.setState({basePath: document.location.pathname});
}
}
public componentDidMount() {
if (typeof document !== 'undefined') {
this.setState({basePath: document.location.pathname});
}
}
public render() {
......@@ -222,7 +244,7 @@ class DocumentationSection extends React.Component<IDocumentationSectionProps> {
<Grid item sm={ 12 } md={ 3 } className={ classes.tocContainer }>
<div className={ `${classes.toc} ${classes.white}` }>
<div className={ classes.tocHeader }>{ t('cms.public.c.documentationSection.toc') }</div>
<div className={ `${classes.toc} ${classes.white}` } dangerouslySetInnerHTML={ {__html: documentation.toc} }/>
<div className={ `${classes.toc} ${classes.white}` } dangerouslySetInnerHTML={ {__html: documentation.toc.split('href="#').join(`href="${this.state.basePath}#`)} }/>
</div>
</Grid>
</GridContainer>
......
......@@ -14,7 +14,6 @@ import DescriptorList from 'model/catalog/DescriptorList';
import Loading from 'ui/common/Loading';
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import BackButton from 'ui/common/buttons/BackButton';
import { ScrollToTopOnMount } from 'ui/common/page/scrollers';
import PageLayout from 'ui/layout/PageLayout';
import DescriptorListDisplay from './c/DescriptorListDisplay';
......@@ -62,7 +61,6 @@ class DescriptorListPage extends React.Component<IDescriptorListPageProps, any>
return (
<PageLayout>
<ScrollToTopOnMount/>
<ContentHeaderWithButton title={ t('descriptorlists.public.p.display.title') }
buttons={ <BackButton defaultTarget="/descriptorlists"/> }
/>
......
......@@ -49,6 +49,10 @@ const styles = (theme) => ({
},
/* tslint:enable */
},
descriptorCard: {
paddingTop: '83px',
marginTop: '-83px',
},
cardsContainer: {
paddingRight: '1.5rem',
[theme.breakpoints.down('sm')]: {
......@@ -72,6 +76,10 @@ interface IDetailInfoProps extends React.ClassAttributes<any> {
class DetailInfo extends React.Component<IDetailInfoProps, any> {
public state = {
basePath: '',
};
protected onPublish = () => {
const { descriptorList, publishDescriptorList, t } = this.props;
......@@ -182,6 +190,19 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
super(props);
}
public componentWillUpdate(nextProps, nextState) {
if (typeof document !== 'undefined' && nextState.basePath !== this.state.basePath) {
this.setState({basePath: document.location.pathname});
}
}
public componentDidMount() {
if (typeof document !== 'undefined') {
this.setState({basePath: document.location.pathname});
}
}
public render() {
const { classes, descriptorList, review, t } = this.props;
......@@ -299,7 +320,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
<Grid item xs={ 12 } md={ 9 } className={ classes.cardsContainer }>
{ descriptorList.descriptors && descriptorList.descriptors.length > 0 && descriptorList.descriptors.map((descriptor: Descriptor) => (
<div key={ `${descriptor.uuid}` } id={ `d-${descriptor.uuid}` }>
<div key={ `${descriptor.uuid}` } id={ `d-${descriptor.uuid}` } className={ classes.descriptorCard }>
<DescriptorCard
id={ `d-${descriptor.uuid}` }
className={ classes.card }
......@@ -316,7 +337,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
<Grid item xs={ 12 } md={ 3 }>
<Section title={ t('descriptorlists.public.c.descrListsDisplay.table') } className="p-20">
{ descriptorList.descriptors && descriptorList.descriptors.length > 0 && descriptorList.descriptors.map((descriptor: Descriptor) => (
<div key={ `${descriptor.uuid}` }><a href={ `#d-${descriptor.uuid}` }>{ descriptor.title }</a></div>
<div key={ `${descriptor.uuid}` }><a href={ `${this.state.basePath}#d-${descriptor.uuid}` }>{ descriptor.title }</a></div>
)) }
</Section>
</Grid>
......
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