Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Reader full post page - add global sidebar and content frame #91990

Merged
merged 16 commits into from
Jun 26, 2024
Merged

Reader full post page - add global sidebar and content frame #91990

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
e17d1fd
add reader sidebar to full post pages
Addison-Stavlo Jun 20, 2024
dd039ed
remove css not conditions for reader-full-post page
Addison-Stavlo Jun 20, 2024
b8560c4
add div around reader full post content for consistency
Addison-Stavlo Jun 20, 2024
e8018c9
make full post content a flex container
Addison-Stavlo Jun 20, 2024
738664f
ensure padding for story content
Addison-Stavlo Jun 20, 2024
a4361b9
hide author details when they don't fit on side
Addison-Stavlo Jun 20, 2024
95c269f
handle back functionality better
Addison-Stavlo Jun 20, 2024
a8a6d93
move tracking for close article to trigger from sidebar as well
Addison-Stavlo Jun 20, 2024
0fea3a5
adjust margins and paddings
Addison-Stavlo Jun 21, 2024
a5ebbcb
fix back button
Addison-Stavlo Jun 21, 2024
2aefa3a
fix back button hiding title at mobile widths
Addison-Stavlo Jun 21, 2024
0f36bf1
fix reader related card meta issues breaking layout
Addison-Stavlo Jun 21, 2024
ad51b29
cleanup commented out goo
Addison-Stavlo Jun 21, 2024
68d5a35
remove need to pass post into the close callback
Addison-Stavlo Jun 21, 2024
234e93f
update margins
Addison-Stavlo Jun 21, 2024
62c8a2e
Few minor style updates
davemart-in Jun 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
347 changes: 173 additions & 174 deletions client/blocks/reader-full-post/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,11 +214,7 @@ export class FullPostView extends Component {

handleBack = ( event ) => {
event.preventDefault();
recordAction( 'full_post_close' );
recordGaEvent( 'Closed Full Post Dialog' );
recordTrackForPost( 'calypso_reader_article_closed', this.props.post );
Comment on lines -217 to -219
Copy link
Contributor Author

@Addison-Stavlo Addison-Stavlo Jun 21, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved these into the controller where the onClose is defined so closing via the sidebar can send them as well.


this.props.onClose && this.props.onClose();
this.props.onClose && this.props.onClose( this.props.post );
};

handleCommentClick = () => {
Expand Down Expand Up @@ -498,191 +494,194 @@ export class FullPostView extends Component {
/*eslint-disable react/no-danger */
/*eslint-disable react/jsx-no-target-blank */
return (
<ReaderMain className={ clsx( classes ) }>
{ site && <QueryPostLikes siteId={ post.site_ID } postId={ post.ID } /> }
{ ! post || post._state === 'pending' ? (
<DocumentHead title={ translate( 'Loading' ) } />
) : (
<DocumentHead title={ `${ post.title } ‹ ${ siteName } ‹ Reader` } />
) }
{ post && post.feed_ID && <QueryReaderFeed feedId={ +post.feed_ID } /> }
{ post && ! post.is_external && post.site_ID && (
<QueryReaderSite siteId={ +post.site_ID } />
) }
{ referral && ! referralPost && <QueryReaderPost postKey={ referral } /> }
{ ! post || ( isLoading && <QueryReaderPost postKey={ postKey } /> ) }
<BackButton onClick={ this.handleBack } />
<div className="reader-full-post__visit-site-container">
<ExternalLink
icon
href={ post.URL }
onClick={ this.handleVisitSiteClick }
target="_blank"
>
<span className="reader-full-post__visit-site-label">
{ translate( 'Visit Site' ) }
</span>
</ExternalLink>
</div>
<div className="reader-full-post__content">
<div className="reader-full-post__sidebar">
{ isLoading && <AuthorCompactProfile author={ null } /> }
{ ! isLoading && post.author && (
<AuthorCompactProfile
author={ post.author }
siteIcon={ get( site, 'icon.img' ) }
feedIcon={ feedIcon }
siteName={ siteName }
siteUrl={ post.site_URL }
feedUrl={ get( post, 'feed_URL' ) }
followCount={ site && site.subscribers_count }
onFollowToggle={ this.openSuggestedFollowsModal }
feedId={ +post.feed_ID }
siteId={ +post.site_ID }
post={ post }
/>
) }
<div className="reader-full-post__sidebar-comment-like">
{ userCan( 'edit_post', post ) && (
<PostEditButton
// add extra div wrapper for consistent content frame layout/styling for reader.
<div>
Comment on lines +497 to +498
Copy link
Contributor Author

@Addison-Stavlo Addison-Stavlo Jun 21, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While the changes here look like a lot, all I have done is wrap everything in an empty div. This makes the structure more consistent with the rest of the reader and able to inherit the content frame styles appropriately.

<ReaderMain className={ clsx( classes ) }>
{ site && <QueryPostLikes siteId={ post.site_ID } postId={ post.ID } /> }
{ ! post || post._state === 'pending' ? (
<DocumentHead title={ translate( 'Loading' ) } />
) : (
<DocumentHead title={ `${ post.title } ‹ ${ siteName } ‹ Reader` } />
) }
{ post && post.feed_ID && <QueryReaderFeed feedId={ +post.feed_ID } /> }
{ post && ! post.is_external && post.site_ID && (
<QueryReaderSite siteId={ +post.site_ID } />
) }
{ referral && ! referralPost && <QueryReaderPost postKey={ referral } /> }
{ ! post || ( isLoading && <QueryReaderPost postKey={ postKey } /> ) }
<BackButton onClick={ this.handleBack } />
<div className="reader-full-post__visit-site-container">
<ExternalLink
icon
href={ post.URL }
onClick={ this.handleVisitSiteClick }
target="_blank"
>
<span className="reader-full-post__visit-site-label">
{ translate( 'Visit Site' ) }
</span>
</ExternalLink>
</div>
<div className="reader-full-post__content">
<div className="reader-full-post__sidebar">
{ isLoading && <AuthorCompactProfile author={ null } /> }
{ ! isLoading && post.author && (
<AuthorCompactProfile
author={ post.author }
siteIcon={ get( site, 'icon.img' ) }
feedIcon={ feedIcon }
siteName={ siteName }
siteUrl={ post.site_URL }
feedUrl={ get( post, 'feed_URL' ) }
followCount={ site && site.subscribers_count }
onFollowToggle={ this.openSuggestedFollowsModal }
feedId={ +post.feed_ID }
siteId={ +post.site_ID }
post={ post }
site={ site }
iconSize={ 20 }
onClick={ this.onEditClick }
/>
) }
<div className="reader-full-post__sidebar-comment-like">
{ userCan( 'edit_post', post ) && (
<PostEditButton
post={ post }
site={ site }
iconSize={ 20 }
onClick={ this.onEditClick }
/>
) }

{ shouldShowComments( post ) && (
<CommentButton
key="comment-button"
commentCount={ commentCount }
onClick={ this.handleCommentClick }
tagName="div"
icon={ ReaderCommentIcon( { iconSize: 20 } ) }
/>
) }

{ shouldShowLikes( post ) && (
<LikeButton
siteId={ +post.site_ID }
postId={ +post.ID }
fullPost
tagName="div"
likeSource="reader"
/>
) }

{ shouldShowComments( post ) && (
<CommentButton
key="comment-button"
commentCount={ commentCount }
onClick={ this.handleCommentClick }
tagName="div"
icon={ ReaderCommentIcon( { iconSize: 20 } ) }
{ isEligibleForUnseen( { isWPForTeamsItem, hasOrganization } ) &&
canBeMarkedAsSeen( { post } ) &&
this.renderMarkAsSenButton() }
</div>
</div>
<article className="reader-full-post__story">
<ReaderFullPostHeader post={ post } referralPost={ referralPost } />

{ post.featured_image && ! isFeaturedImageInContent( post ) && (
<ReaderFeaturedImage
canonicalMedia={ null }
imageUrl={ post.featured_image }
href={ getStreamUrlFromPost( post ) }
imageWidth={ contentWidth }
children={ <div style={ { width: contentWidth } } /> }
/>
) }
{ isLoading && <ReaderFullPostContentPlaceholder /> }
{ post.use_excerpt ? (
<PostExcerpt content={ post.better_excerpt ? post.better_excerpt : post.excerpt } />
) : (
<EmbedContainer>
<AutoDirection>
<div
ref={ this.postContentWrapper }
className="reader-full-post__story-content"
dangerouslySetInnerHTML={ { __html: post.content } }
/>
</AutoDirection>
</EmbedContainer>
) }

{ post.use_excerpt && <PostExcerptLink siteName={ siteName } postUrl={ post.URL } /> }
{ isDailyPostChallengeOrPrompt( post ) && (
<DailyPostButton post={ post } site={ site } />
) }

<ReaderPostActions
post={ post }
site={ site }
onCommentClick={ this.handleCommentClick }
fullPost
/>

{ ! isLoading && <ReaderPerformanceTrackerStop /> }

{ shouldShowLikes( post ) && (
<LikeButton
{ showRelatedPosts && (
<RelatedPostsFromSameSite
siteId={ +post.site_ID }
postId={ +post.ID }
fullPost
tagName="div"
likeSource="reader"
title={ translate( 'More in {{ siteLink /}}', {
components: {
siteLink: (
<a
href={ getStreamUrlFromPost( post ) }
/* eslint-disable wpcalypso/jsx-classname-namespace */
className="reader-related-card__link"
/* eslint-enable wpcalypso/jsx-classname-namespace */
>
{ siteName }
</a>
),
},
} ) }
/* eslint-disable wpcalypso/jsx-classname-namespace */
className="is-same-site"
/* eslint-enable wpcalypso/jsx-classname-namespace */
onPostClick={ this.handleRelatedPostFromSameSiteClicked }
/>
) }

{ isEligibleForUnseen( { isWPForTeamsItem, hasOrganization } ) &&
canBeMarkedAsSeen( { post } ) &&
this.renderMarkAsSenButton() }
</div>
</div>
<article className="reader-full-post__story">
<ReaderFullPostHeader post={ post } referralPost={ referralPost } />

{ post.featured_image && ! isFeaturedImageInContent( post ) && (
<ReaderFeaturedImage
canonicalMedia={ null }
imageUrl={ post.featured_image }
href={ getStreamUrlFromPost( post ) }
imageWidth={ contentWidth }
children={ <div style={ { width: contentWidth } } /> }
/>
) }
{ isLoading && <ReaderFullPostContentPlaceholder /> }
{ post.use_excerpt ? (
<PostExcerpt content={ post.better_excerpt ? post.better_excerpt : post.excerpt } />
) : (
<EmbedContainer>
<AutoDirection>
<div
ref={ this.postContentWrapper }
className="reader-full-post__story-content"
dangerouslySetInnerHTML={ { __html: post.content } }
<div className="reader-full-post__comments-wrapper" ref={ this.commentsWrapper }>
{ shouldShowComments( post ) && (
<Comments
showNestingReplyArrow
post={ post }
initialSize={ startingCommentId ? commentCount : 10 }
pageSize={ 25 }
startingCommentId={ startingCommentId }
commentCount={ commentCount }
maxDepth={ 1 }
commentsFilterDisplay={ COMMENTS_FILTER_ALL }
showConversationFollowButton
shouldPollForNewComments={ config.isEnabled( 'reader/comment-polling' ) }
shouldHighlightNew
/>
</AutoDirection>
</EmbedContainer>
) }

{ post.use_excerpt && <PostExcerptLink siteName={ siteName } postUrl={ post.URL } /> }
{ isDailyPostChallengeOrPrompt( post ) && (
<DailyPostButton post={ post } site={ site } />
) }

<ReaderPostActions
post={ post }
site={ site }
onCommentClick={ this.handleCommentClick }
fullPost
/>
) }
</div>

{ ! isLoading && <ReaderPerformanceTrackerStop /> }

{ showRelatedPosts && (
<RelatedPostsFromSameSite
siteId={ +post.site_ID }
postId={ +post.ID }
title={ translate( 'More in {{ siteLink /}}', {
components: {
siteLink: (
<a
href={ getStreamUrlFromPost( post ) }
/* eslint-disable wpcalypso/jsx-classname-namespace */
className="reader-related-card__link"
/* eslint-enable wpcalypso/jsx-classname-namespace */
>
{ siteName }
</a>
),
},
} ) }
/* eslint-disable wpcalypso/jsx-classname-namespace */
className="is-same-site"
/* eslint-enable wpcalypso/jsx-classname-namespace */
onPostClick={ this.handleRelatedPostFromSameSiteClicked }
/>
) }

<div className="reader-full-post__comments-wrapper" ref={ this.commentsWrapper }>
{ shouldShowComments( post ) && (
<Comments
showNestingReplyArrow
post={ post }
initialSize={ startingCommentId ? commentCount : 10 }
pageSize={ 25 }
startingCommentId={ startingCommentId }
commentCount={ commentCount }
maxDepth={ 1 }
commentsFilterDisplay={ COMMENTS_FILTER_ALL }
showConversationFollowButton
shouldPollForNewComments={ config.isEnabled( 'reader/comment-polling' ) }
shouldHighlightNew
{ showRelatedPosts && (
<RelatedPostsFromOtherSites
siteId={ +post.site_ID }
postId={ +post.ID }
title={ relatedPostsFromOtherSitesTitle }
/* eslint-disable wpcalypso/jsx-classname-namespace */
className="is-other-site"
/* eslint-enable wpcalypso/jsx-classname-namespace */
onPostClick={ this.handleRelatedPostFromOtherSiteClicked }
/>
) }
</div>

{ showRelatedPosts && (
<RelatedPostsFromOtherSites
siteId={ +post.site_ID }
postId={ +post.ID }
title={ relatedPostsFromOtherSitesTitle }
/* eslint-disable wpcalypso/jsx-classname-namespace */
className="is-other-site"
/* eslint-enable wpcalypso/jsx-classname-namespace */
onPostClick={ this.handleRelatedPostFromOtherSiteClicked }
/>
) }
</article>
</div>
{ post.site_ID && (
<ReaderSuggestedFollowsDialog
onClose={ this.onCloseSuggestedFollowModal }
siteId={ +post.site_ID }
postId={ +post.ID }
isVisible={ this.state.isSuggestedFollowsModalOpen }
/>
) }
</ReaderMain>
</article>
</div>
{ post.site_ID && (
<ReaderSuggestedFollowsDialog
onClose={ this.onCloseSuggestedFollowModal }
siteId={ +post.site_ID }
postId={ +post.ID }
isVisible={ this.state.isSuggestedFollowsModalOpen }
/>
) }
</ReaderMain>
</div>
);
}
}
Expand Down
Loading
Loading