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:
parent
50900d9d4e
commit
fd30c4460e
|
@ -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"
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -0,0 +1,4 @@
|
|||
Significance: patch
|
||||
Type: fix
|
||||
|
||||
Fixed Core Profiler's sticky footer button problem
|
Loading…
Reference in New Issue