Skip to content

Commit

Permalink
Theme showcase: Update the layout on the Global Site View (#95258)
Browse files Browse the repository at this point in the history 
* 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.
  • Loading branch information
@BogdanUngureanu
BogdanUngureanu authored Oct 23, 2024
1 parent 611fe3d commit 4227743
Show file tree
Hide file tree
Showing 3 changed files with 121 additions and 78 deletions.
40 changes: 21 additions & 19 deletions client/my-sites/themes/theme-showcase-header.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
54 changes: 28 additions & 26 deletions client/my-sites/themes/theme-showcase.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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', {
Expand Down
105 changes: 72 additions & 33 deletions client/my-sites/themes/theme-showcase.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}

Expand Down Expand Up @@ -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);
Expand All @@ -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;
}
}
}
Expand All @@ -560,6 +596,9 @@
.is-global-sidebar-visible & {
padding-top: 40px;
margin-top: -40px;
&.is-sticky {
height: auto;
}
}

&.is-sticky {
Expand Down

0 comments on commit 4227743

Please sign in to comment.