Update display to use new design

This commit is contained in:
Kelly Dwan 2019-11-13 16:26:48 -05:00
parent 5a72ff8b53
commit 5d4d1b7f4c
No known key found for this signature in database
GPG key ID: 8BA5575F3D11575D
3 changed files with 74 additions and 38 deletions

View file

@ -7,17 +7,17 @@
display: inline-block;
}
.pledge-form .form-field input[type=text],
.pledge-form .form-field input[type=url],
.pledge-form .form-field input[type=number],
.pledge-form .form-field input[type=email],
.pledge-form .form-field input[type="text"],
.pledge-form .form-field input[type="url"],
.pledge-form .form-field input[type="number"],
.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 * {
vertical-align: middle;
.pledge-form .contributor-list-heading {
margin: 1rem 0;
}
.contributor-list .button-link-delete {
text-decoration: none;
margin-right: 8px;
.pledge-form .contributor-list {
margin-bottom: 1.5rem;
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 {
float: right;
.contributor-list .button-link-delete {
text-decoration: none;
}
.contributor-list .button-link-delete .dashicons {
margin-top: -2px;
}

View file

@ -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 ),

View file

@ -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>
<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>
</button>
{{{ data.avatar }}}
<span class="contributor-list__name">
{{ data.name }}
</span>
<tr>
<th scope="row">
{{{ data.avatar }}}
<span class="contributor-list__name">
{{ data.displayName }} ({{ data.name }})
</span>
</th>
<# if ( 'pending' === data.status ) { #>
<button
class="button"
data-action="resend-contributor-confirmation"
data-contributor-post="{{ data.contributorId }}"
>
{{ data.resendLabel }}
</button>
<td>
<button
class="button"
data-action="resend-contributor-confirmation"
data-contributor-post="{{ data.contributorId }}"
>
{{ 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';