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

Fixes #292
WordPress · Sep 9, 2024 · dd10a5e · dd10a5e
1 parent 45875f7
commit dd10a5e
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 3 deletions.
diff --git a/themes/wporg-5ftf-2024/patterns/my-pledges.php b/themes/wporg-5ftf-2024/patterns/my-pledges.php
@@ -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%"}}} /-->

diff --git a/themes/wporg-5ftf-2024/src/my-pledge-list/render.php b/themes/wporg-5ftf-2024/src/my-pledge-list/render.php
@@ -45,7 +45,7 @@
 	<?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>';
 	}
 	?>
 

diff --git a/themes/wporg-5ftf-2024/src/my-pledge-list/style.scss b/themes/wporg-5ftf-2024/src/my-pledge-list/style.scss
@@ -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;

diff --git a/themes/wporg-5ftf-2024/src/style/style.scss b/themes/wporg-5ftf-2024/src/style/style.scss
@@ -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;
+		}
+	}
+}