tec3/five-for-the-future
tec3/five-for-the-future
1
0
Fork 0
mirror of https://github.com/WordPress/five-for-the-future.git synced 2025-04-19 01:43:44 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Pledge edit button: Style the dialog on small screens

Browse source
This commit is contained in:
Kelly Dwan 2024-09-02 18:57:21 -04:00
parent be62f41e43
commit c703c7cefa
No known key found for this signature in database
GPG key ID: 8BA5575F3D11575D
3 changed files with 27 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
plugins/wporg-5ftf/assets/js/dialog.js
View file

@ -20,6 +20,13 @@ jQuery( document ).ready( function( $ ) {
const bounds = button.getBoundingClientRect(); const bounds = button.getBoundingClientRect();
const modalWidth = 300; // Modal width is hardcoded, because it's not visible yet. const modalWidth = 300; // Modal width is hardcoded, because it's not visible yet.
if ( button.closest('.wp-block-wporg-pledge-edit-button') ) {
return {
top: bounds.y + offsetTop + bounds.height,
left: bounds.x + offsetLeft,
};
}
return { return {
top: bounds.y + offsetTop + bounds.height, top: bounds.y + offsetTop + bounds.height,
left: bounds.x + offsetLeft + bounds.width - modalWidth, left: bounds.x + offsetLeft + bounds.width - modalWidth,

1
themes/wporg-5ftf-2024/src/pledge-edit-button/index.js
View file

@ -15,7 +15,6 @@ const Edit = () => {
return ( return (
<div { ...blockProps }> <div { ...blockProps }>
<button> <button>
<span className="dashicons dashicons-edit" aria-hidden="true"></span>
Edit Pledge Edit Pledge
</button> </button>
</div> </div>

21
themes/wporg-5ftf-2024/src/pledge-edit-button/style.scss
View file

@ -29,11 +29,25 @@
background: none; background: none;
border: none; border: none;
} }
/* Update layout to floating modal on smaller screens. */
@media (max-width: 889px) {
position: fixed;
top: 80px !important;
right: var(--wp--preset--spacing--30) !important;
left: var(--wp--preset--spacing--30) !important;
width: calc(100% - var(--wp--preset--spacing--30) * 2);
z-index: 251; /* header + 1. */
}
@media (max-width: 600px) {
top: var(--wp--preset--spacing--30) !important;
}
} }
.pledge-dialog__background { .pledge-dialog__background {
position: fixed; position: fixed;
z-index: 99; z-index: 251; /* header + 1. */
top: 0; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
@ -42,4 +56,9 @@
&[hidden] { &[hidden] {
display: none; display: none;
} }
/* Update layout to floating modal on smaller screens. */
@media (max-width: 889px) {
background-color: rgba(0, 0, 0, 0.15);
}
} }