From 1d4162050956a25437882f2423f5b74a68c1c926 Mon Sep 17 00:00:00 2001 From: Sol Park <30510616+solpark@users.noreply.github.com> Date: Wed, 7 Feb 2018 17:16:20 -0500 Subject: [PATCH] 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 --- .all-contributorsrc | 18 ++++++++++++++++++ README.md | 3 ++- .../Collection/Entries/EntryCard.css | 6 ++++++ src/components/Collection/Entries/EntryCard.js | 8 +++++++- .../Collection/Entries/EntryListing.js | 3 ++- src/components/Workflow/WorkflowCard.css | 1 - 6 files changed, 35 insertions(+), 4 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index 830b02a8..4902df2a 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -720,6 +720,24 @@ "design", "doc" ] + }, + { + "login": "solpark", + "name": "Sol Park", + "avatar_url": "https://avatars0.githubusercontent.com/u/30510616?v=4", + "profile": "https://github.com/solpark", + "contributions": [ + "code" + ] + }, + { + "login": "michaelromani", + "name": "Michael Romani", + "avatar_url": "https://avatars0.githubusercontent.com/u/29218846?v=4", + "profile": "https://github.com/michaelromani", + "contributions": [ + "code" + ] } ] } diff --git a/README.md b/README.md index 4949e45a..1e37c354 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Netlify CMS -[![All Contributors](https://img.shields.io/badge/all_contributors-84-orange.svg)](#contributors) +[![All Contributors](https://img.shields.io/badge/all_contributors-86-orange.svg)](#contributors) [![Open Source Helpers](https://www.codetriage.com/netlify/netlify-cms/badges/users.svg)](https://www.codetriage.com/netlify/netlify-cms) [![](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/netlify/netlifycms) @@ -63,6 +63,7 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds | [
Bryan Robinson](http://bryanlrobinson.com)
[📖](https://github.com/netlify/netlify-cms/commits?author=brob "Documentation") | [
Darren](https://github.com/dardub)
[📖](https://github.com/netlify/netlify-cms/commits?author=dardub "Documentation") | [
Richard Pullinger](http://www.richardpullinger.com)
[💻](https://github.com/netlify/netlify-cms/commits?author=rpullinger "Code") | [
Taylor Bryant](https://taylorbryant.blog)
[📖](https://github.com/netlify/netlify-cms/commits?author=taylorbryant "Documentation") | [
kvanerkelens](https://github.com/kvanerkelens)
[📖](https://github.com/netlify/netlify-cms/commits?author=kvanerkelens "Documentation") | [
Patrick Sier](https://patsier.com/)
[💻](https://github.com/netlify/netlify-cms/commits?author=pjsier "Code") | [
Christian Nolte](http://noltech.net)
[💻](https://github.com/netlify/netlify-cms/commits?author=drlogout "Code") | | [
Edward Betts](http://edwardbetts.com/)
[📖](https://github.com/netlify/netlify-cms/commits?author=EdwardBetts "Documentation") | [
Josh Hardman](https://github.com/jhardman0830)
[📖](https://github.com/netlify/netlify-cms/commits?author=jhardman0830 "Documentation") | [
Mantas](https://behance.net/mistermantas)
[📖](https://github.com/netlify/netlify-cms/commits?author=mistermantas "Documentation") | [
Marco Biedermann](https://www.marcobiedermann.com)
[📖](https://github.com/netlify/netlify-cms/commits?author=marcobiedermann "Documentation") | [
Max Stoiber](https://mxstbr.blog/newsletter)
[📖](https://github.com/netlify/netlify-cms/commits?author=mxstbr "Documentation") | [
Vyacheslav Matyukhin](http://berekuk.ru)
[📖](https://github.com/netlify/netlify-cms/commits?author=berekuk "Documentation") | [
jimmaaay](https://jimmythompson.me)
[💻](https://github.com/netlify/netlify-cms/commits?author=jimmaaay "Code") | | [
Luís Miguel](https://github.com/Quicksaver)
[🐛](https://github.com/netlify/netlify-cms/issues?q=author%3AQuicksaver "Bug reports") [💻](https://github.com/netlify/netlify-cms/commits?author=Quicksaver "Code") | [
Chris Swithinbank](http://chrisswithinbank.net/)
[📖](https://github.com/netlify/netlify-cms/commits?author=delucis "Documentation") | [
remmah](https://github.com/remmah)
[📖](https://github.com/netlify/netlify-cms/commits?author=remmah "Documentation") | [
Sumeet Jain](http://sumeetjain.com)
[📖](https://github.com/netlify/netlify-cms/commits?author=sumeetjain "Documentation") | [
Sagar Khatri](https://github.com/ragasirtahk)
[📖](https://github.com/netlify/netlify-cms/commits?author=ragasirtahk "Documentation") [💡](#example-ragasirtahk "Examples") | [
Kevin Doocey](https://www.dooceykev.in)
[💻](https://github.com/netlify/netlify-cms/commits?author=Doocey "Code") | [
Tim Carry](http://www.pixelastic.com/)
[💻](https://github.com/netlify/netlify-cms/commits?author=pixelastic "Code") [🎨](#design-pixelastic "Design") [📖](https://github.com/netlify/netlify-cms/commits?author=pixelastic "Documentation") | +| [
Sol Park](https://github.com/solpark)
[💻](https://github.com/netlify/netlify-cms/commits?author=solpark "Code") | [
Michael Romani](https://github.com/michaelromani)
[💻](https://github.com/netlify/netlify-cms/commits?author=michaelromani "Code") | This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome! diff --git a/src/components/Collection/Entries/EntryCard.css b/src/components/Collection/Entries/EntryCard.css index 8dfc1876..620624d5 100644 --- a/src/components/Collection/Entries/EntryCard.css +++ b/src/components/Collection/Entries/EntryCard.css @@ -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%; } diff --git a/src/components/Collection/Entries/EntryCard.js b/src/components/Collection/Entries/EntryCard.js index e9f3f9fc..0e48b2c9 100644 --- a/src/components/Collection/Entries/EntryCard.js +++ b/src/components/Collection/Entries/EntryCard.js @@ -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 }) => +

{label}

; + 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 ( -

{title}

+ { collectionLabel ? : null } +

{ title }

); } @@ -35,6 +40,7 @@ const EntryCard = ({ return (
+ { collectionLabel ? : null }

{title}

{ diff --git a/src/components/Collection/Entries/EntryListing.js b/src/components/Collection/Entries/EntryListing.js index dff560bb..efde350c 100644 --- a/src/components/Collection/Entries/EntryListing.js +++ b/src/components/Collection/Entries/EntryListing.js @@ -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 ; }); }; diff --git a/src/components/Workflow/WorkflowCard.css b/src/components/Workflow/WorkflowCard.css index cabf7dd5..634b1046 100644 --- a/src/components/Workflow/WorkflowCard.css +++ b/src/components/Workflow/WorkflowCard.css @@ -15,7 +15,6 @@ .nc-workflow-card-collection { font-size: 14px; - font-weight: 16px; color: var(--colorTextLead); text-transform: uppercase; margin-top: 12px;