mirror of
https://github.com/WordPress/five-for-the-future.git
synced 2025-04-16 16:43:42 +03:00
Pledge form: Style the form
This commit is contained in:
Kelly Dwan
parent
942de224c3
commit
5d76b97557
|
|
@ -26,10 +26,10 @@ require __DIR__ . '/partial-result-messages.php';
|
|||
require get_views_path() . 'inputs-pledge-org-email.php';
|
||||
?>
|
||||
|
||||
<div>
|
||||
<div class="wp-block-button">
|
||||
<input
|
||||
type="submit"
|
||||
class="button button-primary"
|
||||
class="button button-primary wp-block-button__link"
|
||||
id="5ftf-pledge-submit"
|
||||
name="action"
|
||||
value="<?php esc_attr_e( 'Update Pledge', 'wporg-5ftf' ); ?>"
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<?php
|
||||
namespace WordPressDotOrg\FiveForTheFuture\View;
|
||||
|
||||
use function WordPressDotOrg\FiveForTheFuture\get_views_path;
|
||||
use WP_Post;
|
||||
use function WordPressDotOrg\FiveForTheFuture\get_views_path;
|
||||
|
||||
/**
|
||||
* @var array $messages
|
||||
|
|
@ -54,10 +54,10 @@ require __DIR__ . '/partial-result-messages.php';
|
|||
require get_views_path() . 'inputs-pledge-new-misc.php';
|
||||
?>
|
||||
|
||||
<div>
|
||||
<div class="wp-block-button">
|
||||
<input
|
||||
type="submit"
|
||||
class="button"
|
||||
class="button wp-block-button__link"
|
||||
id="5ftf-pledge-submit"
|
||||
name="action"
|
||||
value="<?php esc_attr_e( 'Submit Pledge', 'wporg-5ftf' ); ?>"
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ namespace WordPressDotOrg\FiveForTheFuture\View;
|
|||
|
||||
?>
|
||||
|
||||
<hr />
|
||||
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
|
||||
|
||||
<form class="pledge-form" id="5ftf-form-pledge-remove" action="" method="post">
|
||||
<h2><?php esc_html_e( 'Remove Pledge', 'wporg-5ftf' ); ?></h2>
|
||||
|
|
@ -24,8 +24,15 @@ namespace WordPressDotOrg\FiveForTheFuture\View;
|
|||
<input type="hidden" name="action" value="remove-pledge" />
|
||||
<input type="hidden" name="auth_token" value="<?php echo esc_attr( $auth_token ); ?>" />
|
||||
<input type="hidden" name="pledge_id" value="<?php echo absint( $pledge_id ); ?>" />
|
||||
<button type="submit" class="button button-danger" id="5ftf-pledge-remove">
|
||||
<?php esc_html_e( 'Remove Pledge', 'wporg-5ftf' ); ?>
|
||||
</button>
|
||||
|
||||
<div class="wp-block-button is-style-outline is-small is-destructive">
|
||||
<button
|
||||
type="submit"
|
||||
class="button button-danger wp-block-button__link"
|
||||
id="5ftf-pledge-remove"
|
||||
>
|
||||
<?php esc_html_e( 'Remove Pledge', 'wporg-5ftf' ); ?>
|
||||
</button>
|
||||
</div>
|
||||
</p>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,11 @@ use function WordPressDotOrg\FiveForTheFuture\get_views_path;
|
|||
/** @var array $contributors */
|
||||
/** @var int $pledge_id */
|
||||
/** @var bool $readonly */
|
||||
?>
|
||||
|
||||
add_action(
|
||||
is_admin() ? 'admin_footer' : 'wp_footer',
|
||||
function () use ( $readonly ) {
|
||||
?>
|
||||
<script type="text/template" id="tmpl-5ftf-contributor-lists">
|
||||
<# if ( data.publish.length ) { #>
|
||||
<h3 class="contributor-list-heading"><?php esc_html_e( 'Confirmed', 'wporg-5ftf' ); ?></h3>
|
||||
|
|
@ -51,36 +55,44 @@ use function WordPressDotOrg\FiveForTheFuture\get_views_path;
|
|||
</th>
|
||||
<# if ( 'pending' === data.status ) { #>
|
||||
<td class="resend-confirm">
|
||||
<button
|
||||
class="button"
|
||||
data-action="resend-contributor-confirmation"
|
||||
data-contributor-post="{{ data.contributorId }}"
|
||||
>
|
||||
{{ data.resendLabel }}
|
||||
</button>
|
||||
<div class="wp-block-button is-style-outline is-small">
|
||||
<button
|
||||
class="button wp-block-button__link"
|
||||
data-action="resend-contributor-confirmation"
|
||||
data-contributor-post="{{ data.contributorId }}"
|
||||
>
|
||||
{{ data.resendLabel }}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
<# } else { #>
|
||||
<td>{{ data.publishDate }}</td>
|
||||
<# } #>
|
||||
<?php if ( ! $readonly ) : ?>
|
||||
<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>
|
||||
<div class="wp-block-button is-style-outline is-small is-destructive">
|
||||
<button
|
||||
class="button-link button-link-delete wp-block-button__link"
|
||||
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>
|
||||
</div>
|
||||
</td>
|
||||
<?php endif; ?>
|
||||
</tr>
|
||||
</script>
|
||||
</script>
|
||||
<?php
|
||||
}
|
||||
);
|
||||
?>
|
||||
|
||||
<div id="5ftf-contributors">
|
||||
<div class="pledge-contributors pledge-status__<?php echo esc_attr( get_post_status( $pledge_id ) ); ?>">
|
||||
<div class="pledge-contributors pledge-status__<?php echo esc_attr( get_post_status( $pledge_id ) ); ?> wp-block-table">
|
||||
<?php if ( ! empty( $contributors ) ) : ?>
|
||||
<?php
|
||||
printf(
|
||||
|
|
@ -101,11 +113,13 @@ use function WordPressDotOrg\FiveForTheFuture\get_views_path;
|
|||
|
||||
<div id="add-contrib-message" role="alert" aria-atomic="true"></div>
|
||||
|
||||
<button
|
||||
class="button button-secondary"
|
||||
data-action="add-contributor"
|
||||
>
|
||||
<?php esc_html_e( 'Add new contributors', 'wporg-5ftf' ); ?>
|
||||
</button>
|
||||
<div class="wp-block-button is-style-outline is-small">
|
||||
<button
|
||||
class="button button-secondary wp-block-button__link"
|
||||
data-action="add-contributor"
|
||||
>
|
||||
<?php esc_html_e( 'Add new contributors', 'wporg-5ftf' ); ?>
|
||||
</button>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
|
|
|||
142
themes/wporg-5ftf-2024/src/style/_pledge-form.scss
Normal file
142
themes/wporg-5ftf-2024/src/style/_pledge-form.scss
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
.pledge-form {
|
||||
.form-field {
|
||||
margin-bottom: var(--wp--preset--spacing--20);
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: calc(var(--wp--preset--spacing--10) / 2);
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="url"],
|
||||
input[type="number"],
|
||||
input[type="email"],
|
||||
textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
max-width: 10em;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[id*="help"] p,
|
||||
p[id*="help"] {
|
||||
margin-top: calc(var(--wp--preset--spacing--10) / 2);
|
||||
font-size: var(--wp--preset--font-size--extra-small);
|
||||
line-height: var(--wp--custom--body--extra-small--typography--line-height);
|
||||
}
|
||||
}
|
||||
|
||||
.form-field__logo {
|
||||
label {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
|
||||
&::file-selector-button {
|
||||
padding-inline: var(--wp--custom--form--padding--inline);
|
||||
padding-block: var(--wp--custom--form--padding--block);
|
||||
background: var(--wp--custom--form--color--background);
|
||||
border:
|
||||
var(--wp--custom--form--border--width)
|
||||
var(--wp--custom--form--border--style)
|
||||
var(--wp--custom--form--border--color);
|
||||
border-radius: var(--wp--custom--form--border--radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-field__agree {
|
||||
display: flex;
|
||||
gap: var(--wp--preset--spacing--10);
|
||||
align-items: flex-start;
|
||||
|
||||
input {
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
line-height: var(--wp--custom--body--short-text--typography--line-height);
|
||||
}
|
||||
}
|
||||
|
||||
.contributor-list-heading {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.contributor-list {
|
||||
margin-bottom: 1.5rem;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
|
||||
th,
|
||||
td,
|
||||
th *,
|
||||
td * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
thead {
|
||||
background-color: #fff;
|
||||
color: inherit;
|
||||
|
||||
th {
|
||||
border-bottom: 1px solid var(--wp--preset--color--light-grey-1);
|
||||
}
|
||||
}
|
||||
|
||||
tr > * {
|
||||
border-top: 1px solid var(--wp--preset--color--light-grey-1);
|
||||
|
||||
&:first-child {
|
||||
border-left: 1px solid var(--wp--preset--color--light-grey-1);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-right: 1px solid var(--wp--preset--color--light-grey-1);
|
||||
}
|
||||
}
|
||||
|
||||
tr:last-child > * {
|
||||
border-bottom: 1px solid var(--wp--preset--color--light-grey-1);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.button-link-delete {
|
||||
text-decoration: none;
|
||||
|
||||
.dashicons {
|
||||
margin-top: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pledge-contributors.pledge-status__draft .resend-confirm {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wp-block-button.is-destructive {
|
||||
--wp--custom--button--outline--color--text: #d63638;
|
||||
|
||||
--wp--custom--button--outline--hover--color--text: var(--wp--preset--color--white);
|
||||
--wp--custom--button--outline--hover--color--background: var(--wp--custom--button--outline--color--text);
|
||||
--wp--custom--button--outline--hover--border--color: var(--wp--custom--button--outline--color--text);
|
||||
|
||||
.wp-block-button__link:focus {
|
||||
background-color: var(--wp--custom--button--outline--color--text);
|
||||
color: var(--wp--preset--color--white);
|
||||
outline-color: var(--wp--custom--button--outline--hover--border--color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -3,6 +3,8 @@
|
|||
* templates or theme.json settings.
|
||||
*/
|
||||
|
||||
@import "pledge-form";
|
||||
|
||||
/* Add default focus style. */
|
||||
:where(main) a:where(:not(.wp-element-button,.wp-block-wporg-link-wrapper)):focus,
|
||||
:where(main) button:where(:not([class*="wp-block-button"])):focus {
|
||||
|
|
|
|||
Loading…
Reference in a new issue