Add collection label next to search results (#1068)
* add collection name next to title Co-authored-by: Mike Romani <29218846+MichaelRomani@users.noreply.github.com> * only show collection name when entries are searched Co-authored-by: Mike Romani <29218846+MichaelRomani@users.noreply.github.com> * add simple design to collection label Co-authored-by: Mike Romani <29218846+MichaelRomani@users.noreply.github.com> * remove from higher components. Add props passing down directly from EntryListing * fix design of collection label to top left corner * update collection label styling to match workflow
This commit is contained in:
@ -56,6 +56,12 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.nc-entryListing-listCard-collection-label {
|
||||
font-size: 12px;
|
||||
color: var(--colorTextLead);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.nc-entryListing-cardBody-full {
|
||||
height: 100%;
|
||||
}
|
||||
|
@ -7,11 +7,15 @@ import history from 'Routing/history';
|
||||
import { resolvePath } from 'Lib/pathHelper';
|
||||
import { VIEW_STYLE_LIST, VIEW_STYLE_GRID } from 'Constants/collectionViews';
|
||||
|
||||
const CollectionLabel = ({ label }) =>
|
||||
<h2 className="nc-entryListing-listCard-collection-label">{label}</h2>;
|
||||
|
||||
const EntryCard = ({
|
||||
collection,
|
||||
entry,
|
||||
inferedFields,
|
||||
publicFolder,
|
||||
collectionLabel,
|
||||
viewStyle = VIEW_STYLE_LIST,
|
||||
}) => {
|
||||
const label = entry.get('label');
|
||||
@ -26,7 +30,8 @@ const EntryCard = ({
|
||||
if (viewStyle === VIEW_STYLE_LIST) {
|
||||
return (
|
||||
<Link to={path} className="nc-entryListing-listCard">
|
||||
<h2 className="nc-entryListing-listCard-title">{title}</h2>
|
||||
{ collectionLabel ? <CollectionLabel label={collectionLabel}/> : null }
|
||||
<h2 className="nc-entryListing-listCard-title">{ title }</h2>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
@ -35,6 +40,7 @@ const EntryCard = ({
|
||||
return (
|
||||
<Link to={path} className="nc-entryListing-gridCard">
|
||||
<div className={c('nc-entryListing-cardBody', { 'nc-entryListing-cardBody-full': !image })}>
|
||||
{ collectionLabel ? <CollectionLabel label={collectionLabel}/> : null }
|
||||
<h2 className="nc-entryListing-cardHeading">{title}</h2>
|
||||
</div>
|
||||
{
|
||||
|
@ -45,8 +45,9 @@ export default class EntryListing extends React.Component {
|
||||
return entries.map((entry, idx) => {
|
||||
const collectionName = entry.get('collection');
|
||||
const collection = collections.find(coll => coll.get('name') === collectionName);
|
||||
const collectionLabel = collection.get('label');
|
||||
const inferedFields = this.inferFields(collection);
|
||||
const entryCardProps = { collection, entry, inferedFields, publicFolder, key: idx };
|
||||
const entryCardProps = { collection, entry, inferedFields, publicFolder, key: idx, collectionLabel };
|
||||
return <EntryCard {...entryCardProps}/>;
|
||||
});
|
||||
};
|
||||
|
@ -15,7 +15,6 @@
|
||||
|
||||
.nc-workflow-card-collection {
|
||||
font-size: 14px;
|
||||
font-weight: 16px;
|
||||
color: var(--colorTextLead);
|
||||
text-transform: uppercase;
|
||||
margin-top: 12px;
|
||||
|
Reference in New Issue
Block a user