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 02:53:43 +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' ) );
$success_message = process_my_pledges_form();
$contributor_posts = get_posts( array(
$contributor_pending_posts = get_posts( array(
'title' => $user->user_login,
'post_type' => CPT_ID,
'post_status' => array( 'pending', 'publish' ),
'post_status' => array( 'pending' ),
'numberposts' => 100,
) );
$confirmed_pledge_ids = array_reduce( $contributor_posts, function( $carry, $post ) {
if ( 'publish' === $post->post_status ) {
$carry[] = $post->ID;
}
$contributor_publish_posts = get_posts( array(
'title' => $user->user_login,
'post_type' => CPT_ID,
'post_status' => array( 'publish' ),
'numberposts' => 100,
) );
return $carry;
}, array() );
$confirmed_pledge_ids = wp_list_pluck( $contributor_publish_posts, 'ID' );
ob_start();
require FiveForTheFuture\get_views_path() . 'list-my-pledges.php';

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

@ -1,11 +1,13 @@
<?php
namespace WordPressDotOrg\FiveForTheFuture\View;
use WordPressDotOrg\FiveForTheFuture;
use WP_User, WP_Post;
/**
* @var WP_User $user
* @var array $contributor_posts
* @var array $contributor_pending_posts
* @var array $contributor_publish_posts
* @var WP_Post $contributor_post
* @var string $success_message
* @var string $pledge_url
@ -13,96 +15,72 @@ use WP_User, WP_Post;
* @var array $confirmed_pledge_ids
*/
$has_contributions = $contributor_pending_posts || $contributor_publish_posts;
?>
<?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>
<?php echo esc_html( sprintf(
_n(
'Pledged %1$s hours a week across %2$s organization',
'Pledged %1$s hours a week across %2$s organizations',
count( $confirmed_pledge_ids ),
'wporg-5ftf'
),
$profile_data['hours_per_week'],
count( $confirmed_pledge_ids )
) ); ?>
</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(
_n(
'Pledged %1$s hours a week across %2$s organization',
'Pledged %1$s hours a week across %2$s organizations',
count( $confirmed_pledge_ids ),
'wporg-5ftf'
),
$profile_data['hours_per_week'],
count( $confirmed_pledge_ids )
) ); ?>
</p>
</header>
<?php if ( $success_message ) : ?>
<div class="notice notice-success notice-alt">
<div class="my-pledges__notice notice notice-success notice-alt">
<p>
<?php echo esc_html( $success_message ); ?>
</p>
</div>
<?php endif; ?>
<?php if ( $contributor_posts ) : ?>
<?php if ( $has_contributions ) : ?>
<div class="fftf_pledges">
<?php foreach ( $contributor_posts as $contributor_post ) : ?>
<?php $pledge = get_post( $contributor_post->post_parent ); ?>
<?php if ( $contributor_publish_posts ) : ?>
<div class="fftf_pledge">
<div class="pledge-logo-container">
<?php echo get_the_post_thumbnail( $pledge->ID, 'pledge-logo' ); ?>
</div>
<div class="my-pledges__list">
<?php
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 class="pledge-title">
<a href="<?php echo esc_url( get_permalink( $pledge->ID ) ); ?>">
<?php echo esc_html( $pledge->post_title ); ?>
</a>
<?php endif; ?>
<?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>
<?php if ( $contributor_pending_posts ) : ?>
<div class="pledge-actions">
<form action="" method="post">
<input type="hidden" name="contributor_post_id" value="<?php echo esc_attr( $contributor_post->ID ); ?>" />
<div class="my-pledges__list is-pending-list">
<h2><?php esc_html_e( 'Pending Pledges', 'wporg-5ftf' ); ?></h2>
<?php if ( 'pending' === $contributor_post->post_status ) : ?>
<?php wp_nonce_field( 'join_decline_organization' ); ?>
<?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>
<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; ?>
</form>
</div>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
<?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 {
// move avatar and "pledge x hours" into place, align, etc
body.page.page-my-pledges {
.avatar {
// Expand archive content area to full-width of header.
.site-content .site-main {
padding: 0 10px;
max-width: $size__site-main;
}
.entry-header {
display: none;
@include breakpoint($breakpoint-tablet) {
display: block;
// round corners
}
}
}
.fftf_pledge {
text-align: center;
margin-bottom: 25px;
.my-pledges__header {
.pledge-logo-container {
display: block;
background-color: #FAFAFA; // todo make var
max-width: 80%;
margin: 0 auto;
.attachment-pledge-logo {
max-height: 100px;
width: auto;
// todo needs tweaking
}
.entry-content & {
margin-top: ms(10);
margin-bottom: ms(10);
border-bottom: 1px solid $color-gray-light-500;
padding-bottom: ms(2);
}
.pledge-title a {
text-decoration: underline;
// font size etc
.my-pledges__title {
font-size: ms(8);
}
.pledge-actions {
input {
display: block;
margin: 1em auto;
&[name="decline_invitation"],
&[name="leave_organization"] {
color: #bf2b2b; // todo var
}
}
.my-pledges__dedication {
color: $color-gray-300;
font-size: ms(-1);
}
.my-pledges__avatar {
display: none;
}
@include breakpoint($breakpoint-tablet) {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas: "logo name actions";
text-align: left;
grid-template-columns: auto 1fr;
grid-template-areas:
"avatar name"
"avatar dedication";
.pledge-logo-container {
grid-area: logo;
.my-pledges__avatar {
display: block;
margin-right: ms(2);
grid-area: avatar;
img {
border-radius: 100%;
}
}
.pledge-title {
.my-pledges__title {
margin: 0;
grid-area: name;
}
.pledge-actions {
grid-area: actions;
.my-pledges__dedication {
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;
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 {
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-100: lighten($color-base-gray,77%);
$color-error-red: #c92c2c;
// Theme colors
$color__background-input: $color-gray-light-200;
$color__text: $color-gray-500;