diff --git a/src/components/library-item/library-item.css b/src/components/library-item/library-item.css index fc57d33e282..71d89388a49 100644 --- a/src/components/library-item/library-item.css +++ b/src/components/library-item/library-item.css @@ -116,6 +116,7 @@ .featured-image-container { position: relative; + width: 100%; } .featured-image { @@ -184,9 +185,32 @@ font-weight: bold; } -.featured-extension-metadata-detail img{ +.featured-extension-metadata-detail img { + margin-right: 0.25rem; + width: 20px; + height: 20px; +} + +.credits-outer { + width: 300px; + padding: 0 1.25rem 1rem 1.25rem; + display: flex; + flex-direction: row; + opacity: 0.75; + text-align: left; +} +.credits-inner { + display: flex; + flex-direction: row; +} +.credits-title { margin-right: 0.25rem; } +.credits-list a { + color: inherit !important; + text-decoration: underline; +} + .coming-soon-text { position: absolute; diff --git a/src/components/library-item/library-item.jsx b/src/components/library-item/library-item.jsx index 24772813590..7789a2968eb 100644 --- a/src/components/library-item/library-item.jsx +++ b/src/components/library-item/library-item.jsx @@ -38,6 +38,10 @@ class LibraryItemComponent extends React.PureComponent { ) : null} @@ -58,6 +62,31 @@ class LibraryItemComponent extends React.PureComponent {
{this.props.description} + + {this.props.credits && this.props.credits.length > 0 && ( +
+
+
+ +
+
+ {this.props.credits.map((credit, index) => ( + + {credit} + {index !== this.props.credits.length - 1 && ( + ', ' + )} + + ))} +
+
+
+ )} + {this.props.bluetoothRequired || this.props.internetConnectionRequired || this.props.collaborator ? (
@@ -103,16 +132,6 @@ class LibraryItemComponent extends React.PureComponent {
) : null} - {this.props.incompatibleWithScratch && ( -
- -
- )} ) : ( ( - (dataItem.tags || []) - // Second argument to map sets `this` - .map(String.prototype.toLowerCase.call, String.prototype.toLowerCase) - .concat(dataItem.name ? - (typeof dataItem.name === 'string' ? - // Use the name if it is a string, else use formatMessage to get the translated name - dataItem.name : this.props.intl.formatMessage(dataItem.name.props) - ).toLowerCase() : - null) - .join('\n') // unlikely to partially match newlines - .indexOf(this.state.filterQuery.toLowerCase()) !== -1 - )); + return this.state.data.filter(dataItem => { + if (React.isValidElement(dataItem)) { + return false; + } + const search = [...dataItem.tags]; + if (dataItem.name) { + // Use the name if it is a string, else use formatMessage to get the translated name + if (typeof dataItem.name === 'string') { + search.push(dataItem.name); + } else { + search.push(this.props.intl.formatMessage(dataItem.name.props)); + } + } + if (dataItem.description) { + search.push(dataItem.description); + } + return search + .join('\n') + .toLowerCase() + .includes(this.state.filterQuery.toLowerCase()); + }); } return this.state.data.filter(dataItem => ( dataItem.tags && @@ -233,30 +234,38 @@ class LibraryComponent extends React.Component { ref={this.setFilteredDataRef} > {this.state.loaded ? this.getFilteredData().map((dataItem, index) => ( -