Theme showcase: Update the layout on the Global Site View (#95258)

* Theme showcase: Re-align the layout on global sites view * Theme showcase: Center the search, filters and the theme list * Use clip-path to fix the alignment issues. * Simplify code * Move the scrollbar on the theme list and disable the sticky bar on global view.
Automattic · Oct 23, 2024 · 4227743 · 4227743
1 parent 611fe3d
commit 4227743
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 78 deletions.
diff --git a/client/my-sites/themes/theme-showcase-header.jsx b/client/my-sites/themes/theme-showcase-header.jsx
@@ -82,25 +82,27 @@ export default function ThemeShowcaseHeader( {
 		<>
 			<DocumentHead title={ documentHeadTitle } meta={ metas } />
 			{ isLoggedIn ? (
-				<NavigationHeader
-					compactBreadcrumb={ false }
-					navigationItems={ [] }
-					mobileItem={ null }
-					title={ translate( 'Themes' ) }
-					subtitle={ translate(
-						'Select or update the visual design for your site. {{learnMoreLink}}Learn more{{/learnMoreLink}}.',
-						{
-							components: {
-								learnMoreLink: <InlineSupportLink supportContext="themes" showIcon={ false } />,
-							},
-						}
-					) }
-				>
-					{ showInstallThemeButton && <InstallThemeButton /> }
-					{ isLoggedIn && ! isSiteWooExpressOrEcomFreeTrial && (
-						<PatternAssemblerButton isPrimary onClick={ onPatternAssemblerButtonClick } />
-					) }
-				</NavigationHeader>
+				<div className="themes__header-navigation-container">
+					<NavigationHeader
+						compactBreadcrumb={ false }
+						navigationItems={ [] }
+						mobileItem={ null }
+						title={ translate( 'Themes' ) }
+						subtitle={ translate(
+							'Select or update the visual design for your site. {{learnMoreLink}}Learn more{{/learnMoreLink}}.',
+							{
+								components: {
+									learnMoreLink: <InlineSupportLink supportContext="themes" showIcon={ false } />,
+								},
+							}
+						) }
+					>
+						{ showInstallThemeButton && <InstallThemeButton /> }
+						{ isLoggedIn && ! isSiteWooExpressOrEcomFreeTrial && (
+							<PatternAssemblerButton isPrimary onClick={ onPatternAssemblerButtonClick } />
+						) }
+					</NavigationHeader>
+				</div>
 			) : (
 				<div className="themes__header-logged-out">
 					<div className="themes__page-heading">

diff --git a/client/my-sites/themes/theme-showcase.jsx b/client/my-sites/themes/theme-showcase.jsx
@@ -716,34 +716,36 @@ class ThemeShowcase extends Component {
 									'is-sticky': this.state.shouldThemeControlsSticky,
 								} ) }
 							>
-								<div className="theme__search">
-									<div className="theme__search-input">
-										{ isSearchV2 ? (
-											<SearchThemesV2
-												query={ featureStringFilter + search }
-												onSearch={ this.doSearch }
-											/>
-										) : (
-											<SearchThemes
-												query={ filterString + search }
-												onSearch={ this.doSearch }
-												recordTracksEvent={ this.recordSearchThemesTracksEvent }
-											/>
+								<div className="theme__search-container">
+									<div className="theme__search">
+										<div className="theme__search-input">
+											{ isSearchV2 ? (
+												<SearchThemesV2
+													query={ featureStringFilter + search }
+													onSearch={ this.doSearch }
+												/>
+											) : (
+												<SearchThemes
+													query={ filterString + search }
+													onSearch={ this.doSearch }
+													recordTracksEvent={ this.recordSearchThemesTracksEvent }
+												/>
+											) }
+										</div>
+										{ tabFilters && premiumThemesEnabled && ! isMultisite && (
+											<>
+												<SelectDropdown
+													className="section-nav-tabs__dropdown"
+													onSelect={ this.onTierSelectFilter }
+													selectedText={ translate( 'View: %s', {
+														args: getOptionLabel( tiers, tier ) || '',
+													} ) }
+													options={ tiers }
+													initialSelected={ tier }
+												></SelectDropdown>
+											</>
 										) }
 									</div>
-									{ tabFilters && premiumThemesEnabled && ! isMultisite && (
-										<>
-											<SelectDropdown
-												className="section-nav-tabs__dropdown"
-												onSelect={ this.onTierSelectFilter }
-												selectedText={ translate( 'View: %s', {
-													args: getOptionLabel( tiers, tier ) || '',
-												} ) }
-												options={ tiers }
-												initialSelected={ tier }
-											></SelectDropdown>
-										</>
-									) }
 								</div>
 								<div
 									className={ clsx( 'themes__filters', {

diff --git a/client/my-sites/themes/theme-showcase.scss b/client/my-sites/themes/theme-showcase.scss
@@ -24,45 +24,88 @@
 			box-shadow: 0 0 17.4px 0 rgba(0, 0, 0, 0.05);
 			height: calc(100vh - var(--masterbar-height) - var(--content-padding-top) - var(--content-padding-bottom));
 			max-width: none;
-			overflow-y: auto;
+			@media (max-width: $break-mobile), (max-height: $break-mobile) {
+				overflow-y: auto;
+				overflow-x: hidden;
+			}
 		}
 
+		.theme-showcase {
+			display: flex;
+			flex-direction: column;
+			height: 100%;
+		}
+		.themes__header-navigation-container {
+			margin-left: -14px;
+			margin-right: -14px;
+			@media (min-width: $break-small) {
+				border-block-end: 1px solid var(--color-border-secondary);
+			}
+		}
 		.navigation-header {
 			padding-top: 24px;
-			padding-inline: 16px;
+			max-width: 1400px;
+			margin: 0 auto;
+			padding-inline: 48px;
+			@media (max-width: 402px) {
+				padding-inline: 24px;
+			}
 
 			.navigation-header__main {
 				align-items: center;
+				height: 40px;
 			}
 
-			@include break-medium {
-				border-block-end: 1px solid var(--color-border-secondary);
+			.formatted-header__title {
+				font-size: 1.5rem;
+				font-weight: 500;
+				line-height: 1.25;
+				letter-spacing: -0.5px;
 			}
 
-			@include break-huge {
-				padding-inline: 64px;
+			.formatted-header__subtitle {
+				display: none;
 			}
+		}
 
-			@include break-xhuge {
-				max-width: 100%;
-
-				.navigation-header__main {
-					max-width: 1400px;
-					margin: 0 auto;
-					padding-inline: 64px;
+		.themes__content {
+			display: flex;
+			flex-direction: column;
+			flex-grow: 1;
+			margin-top: 40px;
+			min-height: 0;
+			@media (max-width: $break-small) {
+				margin-top: 10px;
+			}
+			.themes__showcase {
+				flex-grow: 1;
+				min-height: 0;
+			}
+			.themes__controls,
+			.themes__showcase {
+				margin-left: -14px;
+				margin-right: -14px;
+				@media (max-width: $break-small) {
+					padding: 0;
 				}
 			}
 
-			.formatted-header__title {
-				font-size: 1.5rem;
-				line-height: 1.2;
+			.theme-showcase__all-themes {
+				@media (min-width: $break-mobile) and (min-height: $break-mobile) {
+					overflow-y: auto;
+				}
+				height: 100%;
 			}
-		}
 
-		.themes__content {
-			margin-top: 40px;
-			padding-left: 2rem;
-			padding-right: 2rem;
+			.themes__controls .theme__search-container, .themes__controls .themes__filters, .themes__showcase .theme-showcase__all-themes {
+				margin: 0 auto;
+				padding-inline: 48px;
+				@media (max-width: 402px) {
+					padding-inline: 24px;
+				}
+				box-sizing: border-box;
+				max-width: 1400px;
+			}
 		}
 	}
 
@@ -519,7 +562,7 @@
 		}
 	}
 
-	.themes__controls.is-sticky {
+	.themes__controls.is-sticky:not(.is-global-sidebar-visible) {
 		@include break-medium {
 			position: fixed;
 			left: var(--sidebar-width-max);
@@ -532,17 +575,10 @@
 			z-index: 20;
 
 			.is-global-sidebar-visible & {
-				top: calc(var(--masterbar-height) + 16px);
-				width: calc(100% - var(--sidebar-width-max) - 31px);
-				padding: 40px 32px 8px;
-
-
-				// Make the scroll behavior works on the top of the fixed element.
-				pointer-events: none;
-
-				> * {
-					pointer-events: auto;
-				}
+				border-bottom: initial;
+				position: static;
+				width: auto;
+				padding: 0;
 			}
 		}
 	}
@@ -560,6 +596,9 @@
 			.is-global-sidebar-visible & {
 				padding-top: 40px;
 				margin-top: -40px;
+				&.is-sticky {
+					height: auto;
+				}
 			}
 
 			&.is-sticky {