tec3/five-for-the-future
tec3/five-for-the-future
1
0
Fork 0
mirror of https://github.com/WordPress/five-for-the-future.git synced 2025-04-22 19:13:44 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

My Pledges: Update styles and format to match design

Browse source 
- Add a single-pledge view so we can separate out the pending from published
- Update layout and styles of my pledges list
- Adds link and danger button styles
This commit is contained in:
Kelly Dwan 2019-10-30 13:14:42 -05:00
parent 2b7fb6cd21
commit 0b26fad482
No known key found for this signature in database
GPG key ID: 8BA5575F3D11575D
7 changed files with 310 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
plugins/wporg-5ftf/includes/contributor.php
View file

@ -253,20 +253,21 @@ function render_my_pledges() {
$pledge_url = get_permalink( get_page_by_path( 'for-organizations' ) ); $pledge_url = get_permalink( get_page_by_path( 'for-organizations' ) );
$success_message = process_my_pledges_form(); $success_message = process_my_pledges_form();
$contributor_posts = get_posts( array( $contributor_pending_posts = get_posts( array(
'title' => $user->user_login, 'title' => $user->user_login,
'post_type' => CPT_ID, 'post_type' => CPT_ID,
'post_status' => array( 'pending', 'publish' ), 'post_status' => array( 'pending' ),
'numberposts' => 100, 'numberposts' => 100,
) ); ) );
$confirmed_pledge_ids = array_reduce( $contributor_posts, function( $carry, $post ) { $contributor_publish_posts = get_posts( array(
if ( 'publish' === $post->post_status ) { 'title' => $user->user_login,
$carry[] = $post->ID; 'post_type' => CPT_ID,
} 'post_status' => array( 'publish' ),
'numberposts' => 100,
) );
return $carry; $confirmed_pledge_ids = wp_list_pluck( $contributor_publish_posts, 'ID' );
}, array() );
ob_start(); ob_start();
require FiveForTheFuture\get_views_path() . 'list-my-pledges.php'; require FiveForTheFuture\get_views_path() . 'list-my-pledges.php';

96
plugins/wporg-5ftf/views/list-my-pledges.php
View file

@ -1,11 +1,13 @@
<?php <?php
namespace WordPressDotOrg\FiveForTheFuture\View; namespace WordPressDotOrg\FiveForTheFuture\View;
use WordPressDotOrg\FiveForTheFuture;
use WP_User, WP_Post; use WP_User, WP_Post;
/** /**
* @var WP_User $user * @var WP_User $user
* @var array $contributor_posts * @var array $contributor_pending_posts
* @var array $contributor_publish_posts
* @var WP_Post $contributor_post * @var WP_Post $contributor_post
* @var string $success_message * @var string $success_message
* @var string $pledge_url * @var string $pledge_url
@ -13,13 +15,22 @@ use WP_User, WP_Post;
* @var array $confirmed_pledge_ids * @var array $confirmed_pledge_ids
*/ */
$has_contributions = $contributor_pending_posts || $contributor_publish_posts;
?> ?>
<?php if ( is_user_logged_in() ) : ?> <?php if ( is_user_logged_in() ) : ?>
<?php echo get_avatar( $user->ID, 96, 'blank', "{$user->login}'s avatar" ); ?> <header class="my-pledges__header">
<div class="my-pledges__avatar">
<?php echo get_avatar( $user->ID, 96, 'blank', __( 'Your avatar', 'wporg-5ftf' ) ); ?>
</div>
<p> <h1 class="my-pledges__title">
<?php esc_html_e( 'My Pledges', 'wporg-5ftf' ); ?>
</h1>
<p class="my-pledges__dedication">
<?php echo esc_html( sprintf( <?php echo esc_html( sprintf(
_n( _n(
'Pledged %1$s hours a week across %2$s organization', 'Pledged %1$s hours a week across %2$s organization',
@ -31,78 +42,45 @@ use WP_User, WP_Post;
count( $confirmed_pledge_ids ) count( $confirmed_pledge_ids )
) ); ?> ) ); ?>
</p> </p>
</header>
<?php if ( $success_message ) : ?> <?php if ( $success_message ) : ?>
<div class="notice notice-success notice-alt"> <div class="my-pledges__notice notice notice-success notice-alt">
<p> <p>
<?php echo esc_html( $success_message ); ?> <?php echo esc_html( $success_message ); ?>
</p> </p>
</div> </div>
<?php endif; ?> <?php endif; ?>
<?php if ( $contributor_posts ) : ?> <?php if ( $has_contributions ) : ?>
<div class="fftf_pledges"> <?php if ( $contributor_publish_posts ) : ?>
<?php foreach ( $contributor_posts as $contributor_post ) : ?>
<?php $pledge = get_post( $contributor_post->post_parent ); ?>
<div class="fftf_pledge"> <div class="my-pledges__list">
<div class="pledge-logo-container"> <?php
<?php echo get_the_post_thumbnail( $pledge->ID, 'pledge-logo' ); ?> foreach ( $contributor_publish_posts as $contributor_post ) {
$pledge = get_post( $contributor_post->post_parent );
require FiveForTheFuture\get_views_path() . 'single-my-pledge.php';
}
?>
</div> </div>
<div class="pledge-title">
<a href="<?php echo esc_url( get_permalink( $pledge->ID ) ); ?>">
<?php echo esc_html( $pledge->post_title ); ?>
</a>
<?php if ( 'publish' === $contributor_post->post_status ) : ?>
<p>
<?php esc_html_e( sprintf(
__( 'You confirmed this pledge on %s', 'wporg-5ftf' ),
date( get_option( 'date_format' ), strtotime( $contributor_post->post_date ) )
) ); ?>
</p>
<?php endif; ?>
</div>
<div class="pledge-actions">
<form action="" method="post">
<input type="hidden" name="contributor_post_id" value="<?php echo esc_attr( $contributor_post->ID ); ?>" />
<?php if ( 'pending' === $contributor_post->post_status ) : ?>
<?php wp_nonce_field( 'join_decline_organization' ); ?>
<input
type="submit"
name="join_organization"
value="Join Organization"
/>
<input
type="submit"
class="button-link"
name="decline_invitation"
value="Decline Invitation"
/>
<?php elseif ( 'publish' === $contributor_post->post_status ) : ?>
<?php wp_nonce_field( 'leave_organization' ); ?>
<input
type="submit"
name="leave_organization"
value="Leave Organization"
/>
<?php endif; ?> <?php endif; ?>
</form> <?php if ( $contributor_pending_posts ) : ?>
</div>
<div class="my-pledges__list is-pending-list">
<h2><?php esc_html_e( 'Pending Pledges', 'wporg-5ftf' ); ?></h2>
<?php
foreach ( $contributor_pending_posts as $contributor_post ) {
$pledge = get_post( $contributor_post->post_parent );
require FiveForTheFuture\get_views_path() . 'single-my-pledge.php';
}
?>
</div> </div>
<?php endforeach; ?> <?php endif; ?>
</div>
<?php else : ?> <?php else : ?>

77
plugins/wporg-5ftf/views/single-my-pledge.php Normal file
View file

@ -0,0 +1,77 @@
<?php
namespace WordPressDotOrg\FiveForTheFuture\View;
/**
* @var WP_Post $contributor_post
* @var WP_Post $pledge
*/
?>
<div class="my-pledges__pledge">
<div class="entry-image">
<?php if ( has_post_thumbnail( $pledge ) ) : ?>
<div class="entry-image__logo">
<?php echo get_the_post_thumbnail( $pledge->ID, 'pledge-logo' ); ?>
</div>
<?php else : ?>
<div class="entry-image__placeholder"></div>
<?php endif; ?>
</div><!-- .entry-image -->
<div class="my-pledges__pledge-meta">
<a class="my-pledges__pledge-title" href="<?php echo esc_url( get_permalink( $pledge->ID ) ); ?>">
<?php echo esc_html( $pledge->post_title ); ?>
</a>
<p class="my-pledges__pledge-date">
<?php
if ( 'publish' === $contributor_post->post_status ) {
echo esc_html( sprintf(
__( 'You confirmed this pledge on %s', 'wporg-5ftf' ),
date( get_option( 'date_format' ), strtotime( $contributor_post->post_date ) )
) );
} else {
echo esc_html_e( 'This organization would like to pledge your time', 'wporg-5ftf' );
}
?>
</p>
</div>
<div class="my-pledges__pledge-actions">
<form action="" method="post">
<input type="hidden" name="contributor_post_id" value="<?php echo esc_attr( $contributor_post->ID ); ?>" />
<?php if ( 'pending' === $contributor_post->post_status ) : ?>
<?php wp_nonce_field( 'join_decline_organization' ); ?>
<input
type="submit"
class="button button-default"
name="join_organization"
value="Join Organization"
/>
<input
type="submit"
class="button button-danger button-link"
name="decline_invitation"
value="Decline Invitation"
/>
<?php elseif ( 'publish' === $contributor_post->post_status ) : ?>
<?php wp_nonce_field( 'leave_organization' ); ?>
<input
type="submit"
class="button button-danger"
name="leave_organization"
value="Leave Organization"
/>
<?php endif; ?>
</form>
</div>
</div>

177
themes/wporg-5ftf/css/components/_my-pledges.scss
View file

@ -1,67 +1,158 @@
body.page-my-pledges .entry-content { body.page.page-my-pledges {
// move avatar and "pledge x hours" into place, align, etc
.avatar { // Expand archive content area to full-width of header.
display: none; .site-content .site-main {
padding: 0 10px;
@include breakpoint($breakpoint-tablet) { max-width: $size__site-main;
display: block;
// round corners
} }
.entry-header {
display: none;
} }
} }
.fftf_pledge { .my-pledges__header {
text-align: center;
margin-bottom: 25px;
.pledge-logo-container { .entry-content & {
display: block; margin-top: ms(10);
background-color: #FAFAFA; // todo make var margin-bottom: ms(10);
max-width: 80%; border-bottom: 1px solid $color-gray-light-500;
margin: 0 auto; padding-bottom: ms(2);
.attachment-pledge-logo {
max-height: 100px;
width: auto;
// todo needs tweaking
}
} }
.pledge-title a { .my-pledges__title {
text-decoration: underline; font-size: ms(8);
// font size etc
} }
.pledge-actions { .my-pledges__dedication {
input { color: $color-gray-300;
display: block; font-size: ms(-1);
margin: 1em auto;
&[name="decline_invitation"],
&[name="leave_organization"] {
color: #bf2b2b; // todo var
}
}
} }
.my-pledges__avatar {
display: none;
}
@include breakpoint($breakpoint-tablet) { @include breakpoint($breakpoint-tablet) {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: auto 1fr;
grid-template-areas: "logo name actions"; grid-template-areas:
text-align: left; "avatar name"
"avatar dedication";
.pledge-logo-container { .my-pledges__avatar {
grid-area: logo; display: block;
margin-right: ms(2);
grid-area: avatar;
img {
border-radius: 100%;
}
} }
.pledge-title { .my-pledges__title {
margin: 0;
grid-area: name; grid-area: name;
} }
.pledge-actions { .my-pledges__dedication {
grid-area: actions; margin: 0;
grid-area: dedication;
}
}
}
.my-pledges__notice.notice {
margin-bottom: ms(4);
}
.my-pledges__list {
&.is-pending-list {
margin-top: ms(8);
border-top: 1px solid $color-gray-light-500;
padding-top: ms(8);
> h2 {
margin-top: 0;
margin-bottom: ms(5);
}
}
}
.my-pledges__pledge {
margin-bottom: ms(6);
.entry-image {
margin-bottom: ms(2);
}
.my-pledges__pledge-meta {
margin-bottom: ms(2);
}
.my-pledges__pledge-title {
display: inline-block;
margin-bottom: ms(-4);
font-size: ms(2);
text-decoration: underline;
}
.my-pledges__pledge-date {
margin: 0;
font-size: ms(-1);
}
.my-pledges__pledge-actions {
.button {
display: inline-block;
font-size: ms(-3);
}
.button + .button {
margin-left: 1em;
}
.button-link {
text-align: right;
}
}
@include breakpoint($breakpoint-tablet) {
display: grid;
grid-template-columns: 300px 1fr auto;
grid-template-areas: "logo name actions";
align-items: center;
text-align: left;
.entry-image {
grid-area: logo;
margin-bottom: 0;
margin-right: ms(2);
}
.my-pledges__pledge-meta {
grid-area: name;
margin-bottom: 0;
margin-right: ms(2);
}
.my-pledges__pledge-actions {
grid-area: actions;
.button {
display: block;
}
.button + .button {
margin-top: 0.5em;
margin-left: 0;
}
.button-link {
width: 100%;
}
} }
} }
} }

37
themes/wporg-5ftf/css/objects/_buttons.scss
View file

@ -15,3 +15,40 @@ input[type="submit"] {
color: $color__link-button; color: $color__link-button;
text-decoration: none; text-decoration: none;
} }
// Add "danger" button styles, red text on grey background.
.button.button-danger {
color: $color-error-red;
&:visited {
color: $color-error-red;
}
&.hover,
&:hover,
&.focus,
&:focus {
color: $color-error-red;
}
&.focus,
&:focus {
border-color: rgba($color-error-red, 0.6);
box-shadow: 0 0 3px $color-error-red;
}
}
.button.button-link {
padding: 0;
margin-left: 0;
margin-right: 0;
border: none;
background-color: transparent;
box-shadow: none;
text-decoration: underline;
&.focus,
&:focus {
box-shadow: none;
}
}

3
themes/wporg-5ftf/css/objects/_pledge.scss
View file

@ -1,4 +1,5 @@
article.type-5ftf_pledge { article.type-5ftf_pledge,
.my-pledges__pledge {
.entry-image__placeholder { .entry-image__placeholder {
background: $color-gray-light-100; background: $color-gray-light-100;

2
themes/wporg-5ftf/css/settings/_colors.scss
View file

@ -29,6 +29,8 @@ $color-gray-light-300: lighten($color-base-gray,72%);
$color-gray-light-200: lighten($color-base-gray,74%); $color-gray-light-200: lighten($color-base-gray,74%);
$color-gray-light-100: lighten($color-base-gray,77%); $color-gray-light-100: lighten($color-base-gray,77%);
$color-error-red: #c92c2c;
// Theme colors // Theme colors
$color__background-input: $color-gray-light-200; $color__background-input: $color-gray-light-200;
$color__text: $color-gray-500; $color__text: $color-gray-500;