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