From 9bf64788cbd2d9d48ba38e0e4d6eff860c9dbe93 Mon Sep 17 00:00:00 2001 From: bluefuton Date: Wed, 16 Nov 2016 16:30:55 +1300 Subject: [PATCH 1/4] Discover: show full post excerpt in stream for picks --- client/blocks/reader-post-card/index.jsx | 20 ++++++++++++++++---- client/blocks/reader-post-card/style.scss | 20 +++++++++++++------- client/reader/discover/helper.js | 12 ++++++++++-- client/reader/stream/refresh-post.jsx | 4 +++- 4 files changed, 42 insertions(+), 14 deletions(-) diff --git a/client/blocks/reader-post-card/index.jsx b/client/blocks/reader-post-card/index.jsx index b75d5495a04c6..b42d45ccbcf4a 100644 --- a/client/blocks/reader-post-card/index.jsx +++ b/client/blocks/reader-post-card/index.jsx @@ -31,13 +31,15 @@ export default class RefreshPostCard extends React.Component { onClick: PropTypes.func, onCommentClick: PropTypes.func, showPrimaryFollowButton: PropTypes.bool, - originalPost: PropTypes.object // used for Discover only + originalPost: PropTypes.object, // used for Discover only + showEntireExcerpt: PropTypes.bool }; static defaultProps = { onClick: noop, onCommentClick: noop, - isSelected: false + isSelected: false, + showEntireExcerpt: false }; propagateCardClick = () => { @@ -88,14 +90,24 @@ export default class RefreshPostCard extends React.Component { } render() { - const { post, originalPost, site, feed, onCommentClick, showPrimaryFollowButton, isSelected } = this.props; + const { + post, + originalPost, + site, + feed, + onCommentClick, + showPrimaryFollowButton, + isSelected, + showEntireExcerpt + } = this.props; const isPhotoOnly = !! ( post.display_type & DisplayTypes.PHOTO_ONLY ); const isGallery = !! ( post.display_type & DisplayTypes.GALLERY ); const classes = classnames( 'reader-post-card', { 'has-thumbnail': !! post.canonical_media, 'is-photo': isPhotoOnly, 'is-gallery': isGallery, - 'is-selected': isSelected + 'is-selected': isSelected, + 'is-showing-entire-excerpt': showEntireExcerpt } ); const showExcerpt = ! isPhotoOnly; let title = truncate( post.title, { diff --git a/client/blocks/reader-post-card/style.scss b/client/blocks/reader-post-card/style.scss index d1f019e66ffee..56c40f5315d92 100644 --- a/client/blocks/reader-post-card/style.scss +++ b/client/blocks/reader-post-card/style.scss @@ -350,15 +350,21 @@ $reader-post-card-breakpoint-small: "( max-width: 550px )"; font-weight: 100; margin-top: 9px; word-break: break-word; - overflow: hidden; - max-height: 15px * 1.6 * 3; position: relative; +} - &::before { - @include long-content-fade( $size: 15px * 1.6 * 5 ); - top: inherit; - height: 15px * 1.6; - } +// If we're not showing the entire excerpt, clamp to 3 lines +.reader-post-card.card:not(.is-showing-entire-excerpt) { + .reader-post-card__excerpt { + overflow: hidden; + max-height: 15px * 1.6 * 3; + + &::before { + @include long-content-fade( $size: 15px * 1.6 * 5 ); + top: inherit; + height: 15px * 1.6; + } + } } // Action buttons in post card diff --git a/client/reader/discover/helper.js b/client/reader/discover/helper.js index a63d24dbdef92..87a14807c05b7 100644 --- a/client/reader/discover/helper.js +++ b/client/reader/discover/helper.js @@ -13,6 +13,11 @@ const debug = Debug( 'calypso:reader:discover' ); // eslint-disable-line import userUtils from 'lib/user/utils'; import { getSiteUrl as readerRouteGetSiteUrl } from 'reader/route'; +function hasDiscoverSlug( post, searchSlug ) { + const metaData = get( post, 'discover_metadata.discover_fp_post_formats' ); + return !! ( metaData && find( metaData, { slug: searchSlug } ) ); +} + export function isDiscoverEnabled() { return userUtils.getLocaleSlug() === 'en'; } @@ -21,9 +26,12 @@ export function isDiscoverPost( post ) { return !! ( get( post, 'discover_metadata' ) || get( post, 'site_ID' ) === config( 'discover_blog_id' ) ); } +export function isDiscoverPick( post ) { + return hasDiscoverSlug( post, 'pick' ); +} + export function isDiscoverSitePick( post ) { - const metaData = get( post, 'discover_metadata.discover_fp_post_formats' ); - return !! ( metaData && find( metaData, { slug: 'site-pick' } ) ); + return hasDiscoverSlug( post, 'site-pick' ); } export function isInternalDiscoverPost( post ) { diff --git a/client/reader/stream/refresh-post.jsx b/client/reader/stream/refresh-post.jsx index 0ae32ad1bfee1..dffe4f949c699 100644 --- a/client/reader/stream/refresh-post.jsx +++ b/client/reader/stream/refresh-post.jsx @@ -40,6 +40,7 @@ class ReaderPostCardAdapter extends React.Component { site_ID: siteId, is_external: isExternal } = this.props.post; + const isDiscoverPick = this.props.post && DiscoverHelper.isDiscoverPick( this.props.post ); // only query the site if the feed id is missing. feed queries end up fetching site info // via a meta query, so we don't need both. @@ -52,7 +53,8 @@ class ReaderPostCardAdapter extends React.Component { onClick={ this.onClick } onCommentClick={ this.onCommentClick } isSelected={ this.props.isSelected } - showPrimaryFollowButton={ this.props.showPrimaryFollowButtonOnCards }> + showPrimaryFollowButton={ this.props.showPrimaryFollowButtonOnCards } + showEntireExcerpt={ isDiscoverPick }> { feedId && } { ! isExternal && siteId && } From 89db341036677117881945c793147f246eef7acf Mon Sep 17 00:00:00 2001 From: bluefuton Date: Thu, 17 Nov 2016 15:11:13 +1300 Subject: [PATCH 2/4] Show standard excerpt for all Discover posts --- client/blocks/reader-post-card/index.jsx | 11 +++++++---- .../rule-create-better-excerpt-refresh.js | 4 ++++ client/reader/discover/helper.js | 4 ---- client/reader/stream/refresh-post.jsx | 5 +++-- 4 files changed, 14 insertions(+), 10 deletions(-) diff --git a/client/blocks/reader-post-card/index.jsx b/client/blocks/reader-post-card/index.jsx index b42d45ccbcf4a..d9581be7432a1 100644 --- a/client/blocks/reader-post-card/index.jsx +++ b/client/blocks/reader-post-card/index.jsx @@ -32,14 +32,16 @@ export default class RefreshPostCard extends React.Component { onCommentClick: PropTypes.func, showPrimaryFollowButton: PropTypes.bool, originalPost: PropTypes.object, // used for Discover only - showEntireExcerpt: PropTypes.bool + showEntireExcerpt: PropTypes.bool, + excerptAttribute: PropTypes.string }; static defaultProps = { onClick: noop, onCommentClick: noop, isSelected: false, - showEntireExcerpt: false + showEntireExcerpt: false, + excerptAttribute: 'better_excerpt_no_html' }; propagateCardClick = () => { @@ -98,7 +100,8 @@ export default class RefreshPostCard extends React.Component { onCommentClick, showPrimaryFollowButton, isSelected, - showEntireExcerpt + showEntireExcerpt, + excerptAttribute } = this.props; const isPhotoOnly = !! ( post.display_type & DisplayTypes.PHOTO_ONLY ); const isGallery = !! ( post.display_type & DisplayTypes.GALLERY ); @@ -144,7 +147,7 @@ export default class RefreshPostCard extends React.Component {

{ title }

- { showExcerpt &&
{ post.better_excerpt_no_html }
} + { showExcerpt &&
{ post[ excerptAttribute ] }
} { isDailyPostChallengeOrPrompt( post ) && } { post && + showEntireExcerpt={ isDiscoverPost } + excerptAttribute={ isDiscoverPost ? 'excerpt_no_html' : 'better_excerpt_no_html' }> { feedId && } { ! isExternal && siteId && } From 234517556aa09e82bf08feab9f4b13b14175842a Mon Sep 17 00:00:00 2001 From: bluefuton Date: Mon, 21 Nov 2016 10:53:59 +1300 Subject: [PATCH 3/4] Fix tabs --- client/blocks/reader-post-card/style.scss | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/client/blocks/reader-post-card/style.scss b/client/blocks/reader-post-card/style.scss index 56c40f5315d92..08700013c32d4 100644 --- a/client/blocks/reader-post-card/style.scss +++ b/client/blocks/reader-post-card/style.scss @@ -238,10 +238,10 @@ $reader-post-card-breakpoint-small: "( max-width: 550px )"; } .reader-post-card__tag { - overflow: hidden; - position: relative; - height: 20px; - width: 100%; + overflow: hidden; + position: relative; + height: 20px; + width: 100%; &::after { @include long-content-fade( $size: 10% ); @@ -249,10 +249,10 @@ $reader-post-card-breakpoint-small: "( max-width: 550px )"; } .reader-post-card__tag .gridicons-tag { - height: 18px; - margin: -4px 5px 0 0; - position: relative; - top: 5px; + height: 18px; + margin: -4px 5px 0 0; + position: relative; + top: 5px; width: 15px; fill: lighten( $gray, 10% ); } @@ -356,7 +356,7 @@ $reader-post-card-breakpoint-small: "( max-width: 550px )"; // If we're not showing the entire excerpt, clamp to 3 lines .reader-post-card.card:not(.is-showing-entire-excerpt) { .reader-post-card__excerpt { - overflow: hidden; + overflow: hidden; max-height: 15px * 1.6 * 3; &::before { @@ -364,7 +364,7 @@ $reader-post-card-breakpoint-small: "( max-width: 550px )"; top: inherit; height: 15px * 1.6; } - } + } } // Action buttons in post card From 88ea09bc4f505986ad514cc48423274a9ef00748 Mon Sep 17 00:00:00 2001 From: bluefuton Date: Mon, 21 Nov 2016 13:41:04 +1300 Subject: [PATCH 4/4] Add useBetterExcerpt prop --- client/blocks/reader-post-card/index.jsx | 7 ++++--- client/reader/stream/refresh-post.jsx | 2 +- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/client/blocks/reader-post-card/index.jsx b/client/blocks/reader-post-card/index.jsx index d9581be7432a1..b9d17da526320 100644 --- a/client/blocks/reader-post-card/index.jsx +++ b/client/blocks/reader-post-card/index.jsx @@ -33,7 +33,7 @@ export default class RefreshPostCard extends React.Component { showPrimaryFollowButton: PropTypes.bool, originalPost: PropTypes.object, // used for Discover only showEntireExcerpt: PropTypes.bool, - excerptAttribute: PropTypes.string + useBetterExcerpt: PropTypes.bool }; static defaultProps = { @@ -41,7 +41,7 @@ export default class RefreshPostCard extends React.Component { onCommentClick: noop, isSelected: false, showEntireExcerpt: false, - excerptAttribute: 'better_excerpt_no_html' + useBetterExcerpt: true }; propagateCardClick = () => { @@ -101,7 +101,7 @@ export default class RefreshPostCard extends React.Component { showPrimaryFollowButton, isSelected, showEntireExcerpt, - excerptAttribute + useBetterExcerpt } = this.props; const isPhotoOnly = !! ( post.display_type & DisplayTypes.PHOTO_ONLY ); const isGallery = !! ( post.display_type & DisplayTypes.GALLERY ); @@ -113,6 +113,7 @@ export default class RefreshPostCard extends React.Component { 'is-showing-entire-excerpt': showEntireExcerpt } ); const showExcerpt = ! isPhotoOnly; + const excerptAttribute = useBetterExcerpt ? 'better_excerpt_no_html' : 'excerpt_no_html'; let title = truncate( post.title, { length: 140, separator: /,? +/ diff --git a/client/reader/stream/refresh-post.jsx b/client/reader/stream/refresh-post.jsx index 8cbc810f485b0..527793ff19a4a 100644 --- a/client/reader/stream/refresh-post.jsx +++ b/client/reader/stream/refresh-post.jsx @@ -55,7 +55,7 @@ class ReaderPostCardAdapter extends React.Component { isSelected={ this.props.isSelected } showPrimaryFollowButton={ this.props.showPrimaryFollowButtonOnCards } showEntireExcerpt={ isDiscoverPost } - excerptAttribute={ isDiscoverPost ? 'excerpt_no_html' : 'better_excerpt_no_html' }> + useBetterExcerpt={ ! isDiscoverPost }> { feedId && } { ! isExternal && siteId && }