My pledges: Style my pledge list and header on small screens

Fixes #292
This commit is contained in:
Kelly Dwan 2024-09-09 15:21:53 -04:00
parent 45875f73ca
commit dd10a5ef6b
No known key found for this signature in database
GPG key ID: 8BA5575F3D11575D
4 changed files with 24 additions and 3 deletions

View file

@ -6,8 +6,8 @@
*/
?>
<!-- wp:group {"align":"wide","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|40"},"blockGap":"var:preset|spacing|40"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group alignwide" style="margin-bottom:var(--wp--preset--spacing--40)">
<!-- wp:group {"align":"wide","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|40"},"blockGap":"var:preset|spacing|40"}},"layout":{"type":"flex","flexWrap":"nowrap"},"className":"my-pledges-header"} -->
<div class="wp-block-group alignwide my-pledges-header" style="margin-bottom:var(--wp--preset--spacing--40)">
<!-- wp:group {"style":{"border":{"radius":"50%"}},"backgroundColor":"light-grey-2","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-light-grey-2-background-color has-background" style="border-radius:50%">
<!-- wp:post-featured-image {"aspectRatio":"1","width":"110px","scale":"contain","style":{"border":{"radius":"50%"}}} /-->

View file

@ -45,7 +45,7 @@ $has_profile_data = $profile_data['hours_per_week'] && $profile_data['team_name
<?php
if ( $success_message ) {
render_notice( 'success', $success_message );
echo '<div style="margin-top:var(--wp--preset--spacing--20);height:0" aria-hidden="true" class="wp-block-spacer"></div>';
echo '<div style="margin-top:var(--wp--preset--spacing--40);height:0" aria-hidden="true" class="wp-block-spacer"></div>';
}
?>

View file

@ -11,6 +11,14 @@
margin-top: var(--wp--preset--spacing--20);
}
> h2 {
margin-top: 80px !important;
@media (max-width: 600px) {
margin-top: 40px !important;
}
}
.my-pledges__pledge-actions {
form {
display: flex;

View file

@ -71,3 +71,16 @@ body.is-page-in-menu .wp-block-wporg-local-navigation-bar .wp-block-post-title {
}
}
}
/* Style the my pledges header */
.my-pledges-header {
@media (max-width: 600px) {
flex-direction: column;
margin-block-end: 40px !important;
> .wp-block-group {
align-items: center;
}
}
}