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-08 05:13:43 +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 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 {
top: bounds.y + offsetTop + bounds.height,
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 (
<div { ...blockProps }>
<button>
<span className="dashicons dashicons-edit" aria-hidden="true"></span>
Edit Pledge
</button>
</div>

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

@ -29,11 +29,25 @@
background: 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 {
position: fixed;
z-index: 99;
z-index: 251; /* header + 1. */
top: 0;
left: 0;
bottom: 0;
@ -42,4 +56,9 @@
&[hidden] {
display: none;
}
/* Update layout to floating modal on smaller screens. */
@media (max-width: 889px) {
background-color: rgba(0, 0, 0, 0.15);
}
}