Reader: Remove the sidebar from recent and discover pages and increas…

…e width on all single column feeds (#97373) * Remove the sidebar from Reader recent and discover pages * Set larger width * Widen all single column feeds to 768px
Automattic · Dec 13, 2024 · 7b2aad1 · 7b2aad1
1 parent c172fd4
commit 7b2aad1
Show file tree

Hide file tree

Showing 5 changed files with 4 additions and 43 deletions.
diff --git a/client/reader/conversations/stream.scss b/client/reader/conversations/stream.scss
@@ -1,6 +1,6 @@
 .is-section-reader .conversations__header.navigation-header {
 	margin: 0 auto;
-	max-width: 600px;
+
 	@media only screen and (max-width: 660px) {
 		padding: 0 24px;
 	}

diff --git a/client/reader/discover/discover-stream.js b/client/reader/discover/discover-stream.js
@@ -6,13 +6,9 @@ import NavigationHeader from 'calypso/components/navigation-header';
 import isBloganuary from 'calypso/data/blogging-prompt/is-bloganuary';
 import withDimensions from 'calypso/lib/with-dimensions';
 import wpcom from 'calypso/lib/wp';
-import { READER_DISCOVER_POPULAR_SITES } from 'calypso/reader/follow-sources';
 import Stream, { WIDE_DISPLAY_CUTOFF } from 'calypso/reader/stream';
-import ReaderPopularSitesSidebar from 'calypso/reader/stream/reader-popular-sites-sidebar';
-import ReaderTagSidebar from 'calypso/reader/stream/reader-tag-sidebar';
 import { useSelector } from 'calypso/state';
 import { isUserLoggedIn } from 'calypso/state/current-user/selectors';
-import { getReaderRecommendedSites } from 'calypso/state/reader/recommended-sites/selectors';
 import { getReaderFollowedTags } from 'calypso/state/reader/tags/selectors';
 import DiscoverNavigation from './discover-navigation';
 import {
@@ -58,11 +54,6 @@ const DiscoverStream = ( props ) => {
 	const followedTags = useSelector( getReaderFollowedTags );
 	const isLoggedIn = useSelector( isUserLoggedIn );
 	const selectedTab = props.selectedTab;
-	const recommendedSitesSeed =
-		selectedTab === FIRST_POSTS_TAB ? 'discover-new-sites' : 'discover-recommendations';
-	const recommendedSites = useSelector(
-		( state ) => getReaderRecommendedSites( state, recommendedSitesSeed ) || []
-	);
 	const { data: interestTags = [] } = useQuery( {
 		queryKey: [ 'read/interests', locale ],
 		queryFn: () =>
@@ -97,35 +88,10 @@ const DiscoverStream = ( props ) => {
 	);
 	const streamKey = buildDiscoverStreamKey( selectedTab, recommendedStreamTags );
 
-	const streamSidebar = () => {
-		if ( selectedTab === FIRST_POSTS_TAB && recommendedSites?.length ) {
-			return (
-				<ReaderPopularSitesSidebar
-					items={ recommendedSites }
-					followSource={ READER_DISCOVER_POPULAR_SITES }
-					title={ translate( 'New sites' ) }
-				/>
-			);
-		}
-
-		if ( ( isDefaultTab || selectedTab === 'latest' ) && recommendedSites?.length ) {
-			return (
-				<ReaderPopularSitesSidebar
-					items={ recommendedSites }
-					followSource={ READER_DISCOVER_POPULAR_SITES }
-					title={ translate( 'Popular sites' ) }
-				/>
-			);
-		} else if ( ! ( isDefaultTab || selectedTab === 'latest' ) ) {
-			return <ReaderTagSidebar tag={ selectedTab } showFollow />;
-		}
-	};
-
 	const streamProps = {
 		...props,
 		streamKey,
 		useCompactCards: true,
-		streamSidebar,
 		sidebarTabTitle: isDefaultTab ? translate( 'Sites' ) : translate( 'Related' ),
 		selectedStreamName: selectedTab,
 	};

diff --git a/client/reader/following/main.tsx b/client/reader/following/main.tsx
@@ -9,7 +9,6 @@ import ReaderOnboarding from 'calypso/reader/onboarding';
 import SuggestionProvider from 'calypso/reader/search-stream/suggestion-provider';
 import ReaderStream, { WIDE_DISPLAY_CUTOFF } from 'calypso/reader/stream';
 import Recent from '../recent';
-import ReaderStreamSidebar from './reader-stream-sidebar';
 import { useSiteSubscriptions } from './use-site-subscriptions';
 import { useFollowingView } from './view-preference';
 import ViewToggle from './view-toggle';
@@ -44,11 +43,7 @@ function FollowingStream( { ...props } ) {
 			{ currentView === 'recent' && config.isEnabled( 'reader/recent-feed-overhaul' ) ? (
 				<Recent viewToggle={ viewToggle } />
 			) : (
-				<ReaderStream
-					{ ...props }
-					className="following"
-					streamSidebar={ () => <ReaderStreamSidebar /> }
-				>
+				<ReaderStream { ...props } className="following">
 					<BloganuaryHeader />
 					<NavigationHeader
 						title={ translate( 'Recent' ) }

diff --git a/client/reader/liked-stream/style.scss b/client/reader/liked-stream/style.scss
@@ -1,6 +1,6 @@
 .is-section-reader .navigation-header.liked-stream-header {
 	margin: 0 auto;
-	max-width: 600px;
+
 	@media only screen and (max-width: 660px) {
 		padding: 0 16px;
 

diff --git a/client/reader/stream/style.scss b/client/reader/stream/style.scss
@@ -5,7 +5,7 @@
 // Overrides default 720px width
 .is-reader-page .following.main,
 .is-reader-page .tag-stream__main.main {
-	max-width: 600px;
+	max-width: 768px;
 
 	&.reader-two-column {
 		max-width: 968px;