diff --git a/src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx b/src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx index 893e1dee4..3ba3e8e88 100644 --- a/src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx +++ b/src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx @@ -38,7 +38,7 @@ export class GalleryCardComponent extends React.Component - {this.props.data.description.substr(0, GalleryCardComponent.cardDescriptionMaxChars)} + {this.renderTruncatedDescription()} - {this.generateIconText("RedEye", this.props.data.views.toString())} - {this.generateIconText("Download", this.props.data.downloads.toString())} - {this.props.isFavorite !== undefined && + {this.props.data.views !== undefined && this.generateIconText("RedEye", this.props.data.views.toString())} + {this.props.data.downloads !== undefined && + this.generateIconText("Download", this.props.data.downloads.toString())} + {this.props.data.favorites !== undefined && this.generateIconText("Heart", this.props.data.favorites.toString())} @@ -148,6 +149,14 @@ export class GalleryCardComponent extends React.Component { + let truncatedDescription = this.props.data.description.substr(0, GalleryCardComponent.cardDescriptionMaxChars); + if (this.props.data.description.length > GalleryCardComponent.cardDescriptionMaxChars) { + truncatedDescription = `${truncatedDescription} ...`; + } + return truncatedDescription; + }; + private generateIconText = (iconName: string, text: string): JSX.Element => { return ( { + private renderFavouriteButton = (): JSX.Element => { + return ( + + {this.props.isFavorite !== undefined ? ( + <> + + {this.props.data.favorites} likes + + ) : ( + <> + {this.props.data.favorites} likes + + )} + + ); + }; + public render(): JSX.Element { const options: Intl.DateTimeFormatOptions = { year: "numeric", @@ -49,19 +69,7 @@ export class NotebookMetadataComponent extends React.Component - - - {this.props.isFavorite !== undefined && ( - <> - - {this.props.data.favorites} likes - - )} - - + {this.renderFavouriteButton()} {this.props.downloadButtonText && ( diff --git a/src/Explorer/Panes/PublishNotebookPaneComponent.tsx b/src/Explorer/Panes/PublishNotebookPaneComponent.tsx index 4d6278d27..559bf3b09 100644 --- a/src/Explorer/Panes/PublishNotebookPaneComponent.tsx +++ b/src/Explorer/Panes/PublishNotebookPaneComponent.tsx @@ -301,9 +301,9 @@ export class PublishNotebookPaneComponent extends React.Component