fix: core profiler sticky footer button variable vh breakpoints (#50727)

* fix: core profiler sticky footer button variable vh breakpoints

* lint

* lint
This commit is contained in:
RJ 2024-08-20 07:37:32 +08:00 committed by GitHub
parent 50900d9d4e
commit fd30c4460e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 80 additions and 3 deletions

View File

@ -7,6 +7,7 @@ import interpolateComponents from '@automattic/interpolate-components';
import { Link } from '@woocommerce/components';
import { Extension, ExtensionList } from '@woocommerce/data';
import { useState } from 'react';
import clsx from 'clsx';
/**
* Internal dependencies
@ -146,6 +147,10 @@ export const Plugins = ( {
].includes( plugin.key )
);
const pluginsCardRowCount = Math.ceil(
context.pluginsAvailable.length / 2
);
return (
<div
className="woocommerce-profiler-plugins"
@ -170,7 +175,12 @@ export const Plugins = ( {
{ errorMessage && (
<p className="plugin-error">{ errorMessage }</p>
) }
<div className="woocommerce-profiler-plugins__list">
<div
className={ clsx(
'woocommerce-profiler-plugins__list',
`rows-${ pluginsCardRowCount }`
) }
>
{ context.pluginsAvailable.map( ( plugin ) => {
const learnMoreLink = plugin.learn_more_link ? (
<Link
@ -219,7 +229,12 @@ export const Plugins = ( {
);
} ) }
</div>
<div className="woocommerce-profiler-plugins__footer">
<div
className={ clsx(
'woocommerce-profiler-plugins__footer',
`rows-${ pluginsCardRowCount }`
) }
>
<div className="woocommerce-profiler-plugins-continue-button-container">
<Button
className="woocommerce-profiler-plugins-continue-button"

View File

@ -345,12 +345,44 @@
margin-top: 12px !important;
}
}
$sticky-footer-height: 140px;
.woocommerce-profiler-plugins__list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 16px;
flex: 50%;
@mixin sticky-footer-scroll-padding {
padding-bottom: $sticky-footer-height;
}
@include breakpoint(">782px") {// sticky footer shouldn't apply to mobile layout
// since the height of each card is more or less fixed (actually its variable but we limit text to 2 lines),
// we can estimate the visual breakpoints that are required to "unstick" the footer from the bottom of the page.
&.rows-1 {
@media screen and ( max-height: 520px ) {
@include sticky-footer-scroll-padding;
}
}
&.rows-2 {
@media screen and ( max-height: 650px ) {
@include sticky-footer-scroll-padding;
}
}
&.rows-3 {
@media screen and ( max-height: 780px ) {
@include sticky-footer-scroll-padding;
}
}
&.rows-4 {
@media screen and ( max-height: 910px ) {
@include sticky-footer-scroll-padding;
}
}
}
}
.woocommerce-profiler-plugins-continue-button {
@ -392,12 +424,38 @@
flex-direction: column;
align-items: center;
@media screen and ( max-height: 900px ) {
@mixin plugins-sticky-footer {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 44.69%);
height: 140px;
position: fixed;
bottom: 0;
}
@include breakpoint(">782px") { // sticky footer shouldn't apply to mobile layout
// since the height of each card is more or less fixed (actually its variable but we limit text to 2 lines),
// we can estimate the visual breakpoints that are required to "unstick" the footer from the bottom of the page.
&.rows-1 {
@media screen and ( max-height: 520px ) {
@include plugins-sticky-footer;
}
}
&.rows-2 {
@media screen and ( max-height: 650px ) {
@include plugins-sticky-footer;
}
}
&.rows-3 {
@media screen and ( max-height: 780px ) {
@include plugins-sticky-footer;
}
}
&.rows-4 {
@media screen and ( max-height: 910px ) {
@include plugins-sticky-footer;
}
}
}
}
.woocommerce-profiler-plugins-continue-button-container {

View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
Fixed Core Profiler's sticky footer button problem