Commit 23c5b1aa authored by Matija Obreza's avatar Matija Obreza
Browse files

Limit Markdown display by lines not length

parent 5d2f0619
Pipeline #4645 passed with stages
in 5 minutes and 44 seconds
......@@ -42,7 +42,7 @@ const T = (code: string): string => {
interface ICardProps {
complete?: boolean;
compact?: boolean;
textLength?: number;
textRows?: number;
owner?: boolean;
// publisher?: boolean;
crop?: boolean;
......@@ -53,7 +53,7 @@ interface ICardProps {
}
const COMPLETE_DISPLAY = (): ICardProps => ({
textLength: 0,
textRows: 0,
owner: false,
// publisher: true,
crop: true,
......@@ -64,7 +64,7 @@ const COMPLETE_DISPLAY = (): ICardProps => ({
});
const BRIEF_DISPLAY = (): ICardProps => ({
textLength: 0,
textRows: 0,
owner: false,
// publisher: false,
crop: false,
......@@ -159,8 +159,8 @@ const DescriptorCard = ({complete = true, compact, descriptor, classes, classNam
for (const prop of Object.keys(other)) {
displayPref[prop] = other[prop] ? !displayPref[prop] : other[prop];
}
if (other.textLength) {
displayPref.textLength = other.textLength;
if (other.textRows) {
displayPref.textRows = other.textRows;
}
return (
......@@ -171,7 +171,7 @@ const DescriptorCard = ({complete = true, compact, descriptor, classes, classNam
) }
/>
<CardContent>
{ descriptor.description && <Markdown className="mb-20" source={ displayPref.textLength ? descriptor.description.substring(0, displayPref.textLength) : descriptor.description }/> }
{ descriptor.description && <Markdown className="mb-20" rows={ textRows } source={ descriptor.description }/> }
{ descriptor.key && <div className="font-bold">This is a key descriptor for access and utilization of PGR.</div> }
<Grid container spacing={ 0 }>
<Grid item xs={ 12 }>
......
......@@ -127,7 +127,7 @@ class DescriptorPicker extends React.Component<IDescriptorPickerProps, any> {
key={ descriptor.uuid }
descriptor={ descriptor }
compact
textLength={ 100 }
textRows={ 3 }
selectedProps={ {
selectable: true,
onSelect: this.onDescriptorSelected(true),
......@@ -173,7 +173,7 @@ class DescriptorPicker extends React.Component<IDescriptorPickerProps, any> {
className="m-20"
descriptor={ descriptor }
compact
textLength={ 100 }
textRows={ 3 }
onUnselect={ this.onDescriptorSelected(false) }
selectedProps={ {
selectable: false,
......
......@@ -15,7 +15,7 @@ const DescriptorListCard = ({descriptorList, className}: {descriptorList: Descri
<DescriptorListLink to={ descriptorList }>{ descriptorList.title ? <Markdown basic source={ descriptorList.title } /> : 'Untitled' }</DescriptorListLink>
) } />
<CardContent>
<Markdown className="mb-20" textLength={ 200 } source={ descriptorList.description } />
<Markdown className="mb-20" rows={ 3 } source={ descriptorList.description } />
<Properties>
{ descriptorList.crop && <PropertiesItem title="Crop:"><CropLink code={ descriptorList.crop } /></PropertiesItem> }
<PropertiesItem title="Publisher:">{ descriptorList.publisher || <i>Not specified</i> }</PropertiesItem>
......
......@@ -5,31 +5,39 @@ import MarkdownField from './MarkdownField';
interface IMarkdownTextProps extends React.HTMLProps<HTMLElement> {
source: string;
basic?: boolean;
textLength?: number;
rows?: number;
}
// TODO Add textLength attribute to trim text here, not in the parent
function Markdown({source, textLength, style, className, basic}: IMarkdownTextProps) {
function Markdown({source, rows, style, className, basic}: IMarkdownTextProps) {
if (source) {
const trimmedSource: string = textLength === undefined || textLength === null ? source : source.substring(0, textLength) + '...';
const mdStyle: string = rows ? { maxHeight: `${rows + 1.5}rem`, overflow: 'hidden', marginBottom: '.5rem' } : {};
if (basic) {
// the 'markdown-basic' className is used to render the div as inline-block
return (
<div style={ { ...style, ...mdStyle } } className={ `${className ? className : ''}` }>
<MarkdownComponent skipHtml unwrapDisallowed allowedTypes={ [ 'strong', 'emphasis'] }
className={ `markdown-basic ${className ? className : ''}` } source={ trimmedSource } />
className="markdown-basic" source={ source } />
</div>
);
} else {
if (style) {
return (
<div style={ style }><MarkdownComponent skipHtml
className={ `markdown ${className ? className : ''}` } source={ trimmedSource } />
<div style={ { ...style, ...mdStyle } } className={ `${className ? className : ''}` }>
<MarkdownComponent skipHtml className="markdown" source={ source } />
</div>
);
} else {
return <div><MarkdownComponent skipHtml className={ `markdown ${className ? className : ''}` } source={ trimmedSource } /></div>;
return (
<div style={ { ...style, ...mdStyle } } className={ `${className ? className : ''}` }>
<MarkdownComponent skipHtml style={ mdStyle } className="markdown" source={ source } />
</div>
);
}
}
} else {
return null;
}
......
......@@ -36,7 +36,7 @@ class DatasetCard extends React.Component<IDatasetCardProps, any> {
}
/>
<CardContent>
<Markdown className="mb-20" textLength={ 200 } source={ dataset.description } />
<Markdown className="mb-20" rows={ 3 } source={ dataset.description } />
<Properties>
<PropertiesItem title="Data provider:"><PartnerLink to={ dataset.owner } /></PropertiesItem>
<PropertiesItem title="Upload date:"><PrettyDate value={ dataset.createdDate } /></PropertiesItem>
......
......@@ -71,7 +71,7 @@ class PartnerCard extends React.Component<IPartnerCardProps, any> {
subheader={ partner.createdDate && <span>Registered <PrettyDate value={ partner.createdDate } /></span> }
/>
<CardContent>
{ partner.description && <Markdown textLength={ 200 } source={ partner.description } /> }
{ partner.description && <Markdown rows={ 3 } source={ partner.description } /> }
</CardContent>
</Card>
);
......
......@@ -110,7 +110,7 @@ class BrowsePage extends React.Component<IBrowsePageProps & any, any> {
{ stillLoading ? <Loading /> :
paged.content.map((vocabulary: Vocabulary, index) => (
<Grid key={ index } item xs={ 12 }>
<VocabularyCard className={ classes.card } vocabulary={ vocabulary } textLength={ 200 } />
<VocabularyCard className={ classes.card } vocabulary={ vocabulary } textRows={ 3 } />
</Grid>
))
}
......
......@@ -6,12 +6,12 @@ import {Vocabulary} from 'model/vocabulary.model';
import Markdown from 'ui/catalog/markdown';
import Button from 'material-ui/Button';
const VocabularyCard = ({vocabulary, textLength = 0, className = ''}: { vocabulary: Vocabulary, className?: string, textLength?: number }) => vocabulary && (
const VocabularyCard = ({vocabulary, className = '', textRows = 2}: { vocabulary: Vocabulary, className?: string, textRows?: number }) => vocabulary && (
<Card className={ className }>
<CardHeader title={ <Link to={ `/vocabulary/${vocabulary.uuid}` }>{ vocabulary.title }</Link> } />
{ vocabulary.description &&
<CardContent>
<Markdown source={ textLength ? vocabulary.description.substring(0, textLength) + '...' : vocabulary.description } />
<Markdown rows={ textRows } source={ vocabulary.description } />
</CardContent>
}
<CardActions>
......
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