Update display to use new design

plugins/wporg-5ftf/assets/css/admin.css

@@ -7,17 +7,17 @@
 	display: inline-block;
 }
 
-.pledge-form .form-field input[type=text],
+.pledge-form .form-field input[type="text"],
-.pledge-form .form-field input[type=url],
+.pledge-form .form-field input[type="url"],
-.pledge-form .form-field input[type=number],
+.pledge-form .form-field input[type="number"],
-.pledge-form .form-field input[type=email],
+.pledge-form .form-field input[type="email"],
 .pledge-form .form-field textarea {
 	display: block;
 	width: 100%;
 	padding: 8px;
 }
 
-.pledge-form .form-field input[type=number] {
+.pledge-form .form-field input[type="number"] {
 	max-width: 10em;
 	height: auto;
 }
@@ -44,13 +44,20 @@
 	color: #c92c2c;
 }
 
-.contributor-list li * {
+.pledge-form .contributor-list-heading {
-	vertical-align: middle;
+	margin: 1rem 0;
 }
 
-.contributor-list .button-link-delete {
+.pledge-form .contributor-list {
-	text-decoration: none;
+	margin-bottom: 1.5rem;
-	margin-right: 8px;
+	table-layout: fixed;
+}
+
+.contributor-list th,
+.contributor-list td,
+.contributor-list th *,
+.contributor-list td * {
+	vertical-align: middle;
 }
 
 .contributor-list .avatar {
@@ -61,6 +68,10 @@
 	font-size: 1.1em;
 }
 
-.contributor-list .button {
+.contributor-list .button-link-delete {
-	float: right;
+	text-decoration: none;
+}
+
+.contributor-list .button-link-delete .dashicons {
+	margin-top: -2px;
 }

plugins/wporg-5ftf/includes/contributor.php

@@ -262,6 +262,8 @@ function get_pledge_contributors_data( $pledge_id ) {
 					'avatar' => get_avatar( $contributor, 32 ),
 					// @todo Add full name, from `$contributor`?
 					'name' => $name,
+					'displayName' => $contributor->display_name,
+					'publishDate' => get_the_date( '', $contributor_post ),
 					'resendLabel' => __( 'Resend Confirmation', 'wporg' ),
 					'removeConfirm' => sprintf( __( 'Remove %s from this pledge?', 'wporg-5ftf' ), $name ),
 					'removeLabel' => sprintf( __( 'Remove %s', 'wporg' ), $name ),

plugins/wporg-5ftf/views/manage-contributors.php

@@ -11,39 +11,64 @@ use function WordPressDotOrg\FiveForTheFuture\get_views_path;
 <script type="text/template" id="tmpl-5ftf-contributor-lists">
 	<# if ( data.publish.length ) { #>
 		<h3 class="contributor-list-heading"><?php esc_html_e( 'Confirmed', 'wporg' ); ?></h3>
-		<ul class="contributor-list publish">{{{ data.publish }}}</ul>
+		<table class="contributor-list publish striped widefat">
+			<thead>
+				<th scope="col"><?php esc_html_e( 'Contributor', 'wporg-5ftf' ); ?></th>
+				<th scope="col"><?php esc_html_e( 'Date Confirmed', 'wporg-5ftf' ); ?></th>
+				<th scope="col"><?php esc_html_e( 'Remove Contributor', 'wporg-5ftf' ); ?></th>
+			</thead>
+			<tbody>{{{ data.publish }}}</tbody>
+		</table>
 	<# } #>
 	<# if ( data.pending.length ) { #>
 		<h3 class="contributor-list-heading"><?php esc_html_e( 'Unconfirmed', 'wporg' ); ?></h3>
-		<ul class="contributor-list pending">{{{ data.pending }}}</ul>
+		<table class="contributor-list pending striped widefat">
+			<thead>
+				<tr>
+					<th scope="col"><?php esc_html_e( 'Contributor', 'wporg-5ftf' ); ?></th>
+					<th scope="col"><?php esc_html_e( 'Resend Confirmation', 'wporg-5ftf' ); ?></th>
+					<th scope="col"><?php esc_html_e( 'Remove Contributor', 'wporg-5ftf' ); ?></th>
+				</tr>
+			</thead>
+			<tbody>{{{ data.pending }}}</tbody>
+		</table>
 	<# } #>
 </script>
 
 <script type="text/template" id="tmpl-5ftf-contributor">
-	<li>
+	<tr>
-		<button
+		<th scope="row">
-			class="button-link button-link-delete"
+			{{{ data.avatar }}}
-			data-action="remove-contributor"
+			<span class="contributor-list__name">
-			data-contributor-post="{{ data.contributorId }}"
+				{{ data.displayName }} ({{ data.name }})
-			data-confirm="{{ data.removeConfirm }}"
+			</span>
-			aria-label="{{ data.removeLabel }}"
+		</th>
-		>
-			<span class="dashicons dashicons-no-alt" aria-hidden="true"></span>
-		</button>
-		{{{ data.avatar }}}
-		<span class="contributor-list__name">
-			{{ data.name }}
-		</span>
 		<# if ( 'pending' === data.status ) { #>
-			<button
+			<td>
-				class="button"
+				<button
-				data-action="resend-contributor-confirmation"
+					class="button"
-				data-contributor-post="{{ data.contributorId }}"
+					data-action="resend-contributor-confirmation"
-			>
+					data-contributor-post="{{ data.contributorId }}"
-				{{ data.resendLabel }}
+				>
-			</button>
+					{{ data.resendLabel }}
+				</button>
+			</td>
+		<# } else { #>
+			<td>{{ data.publishDate }}</td>
 		<# } #>
-	</li>
+		<td>
+			<button
+				class="button-link button-link-delete"
+				data-action="remove-contributor"
+				data-contributor-post="{{ data.contributorId }}"
+				data-confirm="{{ data.removeConfirm }}"
+				aria-label="{{ data.removeLabel }}"
+			>
+				<span class="dashicons dashicons-no-alt" aria-hidden="true"></span>
+				<?php esc_html_e( 'Remove', 'wporg-5ftf' ); ?>
+			</button>
+		</td>
+	</tr>
 </script> 
 
 <div id="5ftf-contributors">
@@ -60,8 +85,6 @@ use function WordPressDotOrg\FiveForTheFuture\get_views_path;
 		<?php endif; ?>
 	</div>
 
-	<hr />
-
 	<?php
 	$data = [ 'pledge-contributors' => '' ];
 	require get_views_path() . 'inputs-pledge-contributors.php';