mirror of
https://github.com/WordPress/five-for-the-future.git
synced 2025-07-10 04:25:44 +03:00
Pledge List: Display pledges in list with sort and search ability (#33)
* Use the post-type when choosing template partial * Add pledge archive templates * Style pledge list page * Style individual pledge * Use pledge featured image for the logo * Fix aspect ratio of image * Add real contributors to the pledges * Enable sorting and searching of pledges * Add pledge sorting markup * Style the page header * Restrict any pledges with no contributors from being shown on the frontend * Update contributor count key name
This commit is contained in:
Kelly Dwan
GitHub
parent
f47024efda
commit
553247cbf7
13 changed files with 398 additions and 10 deletions
72
themes/wporg-5ftf/archive-5ftf_pledge.php
Normal file
72
themes/wporg-5ftf/archive-5ftf_pledge.php
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
<?php
|
||||
|
||||
namespace WordPressdotorg\Five_for_the_Future\Theme;
|
||||
|
||||
use const WordPressDotOrg\FiveForTheFuture\Pledge\CPT_ID;
|
||||
|
||||
// If we don't have any posts to display for the archive, then send a 404 status. See #meta4151.
|
||||
if ( ! have_posts() ) {
|
||||
status_header( 404 );
|
||||
nocache_headers();
|
||||
}
|
||||
|
||||
get_header(); ?>
|
||||
|
||||
<main id="main" class="site-main" role="main">
|
||||
|
||||
<?php if ( have_posts() ) : ?>
|
||||
|
||||
<header class="page-header">
|
||||
<h1 class="page-title"><?php esc_html_e( 'Pledges', 'wordpressorg' ); ?></h1>
|
||||
<div class="page-header-callout">
|
||||
<a class="button" href="/for-organizations/" >
|
||||
<?php esc_html_e( 'Pledge your company', 'wordpressorg' ); ?>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="page-header-controls">
|
||||
<form method="get" action="<?php echo esc_url( get_post_type_archive_link( CPT_ID ) ); ?>">
|
||||
<label for="pledge-sort"><?php esc_html_e( 'Sort pledges by', 'wordpressorg' ); ?></label>
|
||||
<select class="custom-select" id="pledge-sort" name="order">
|
||||
<option value="" <?php selected( $_GET['order'], '' ); ?>>
|
||||
<?php esc_html_e( 'All Pledges', 'wordpressorg' ); ?>
|
||||
</option>
|
||||
<option value="alphabetical" <?php selected( $_GET['order'], 'alphabetical' ); ?>>
|
||||
<?php esc_html_e( 'Alphabetical', 'wordpressorg' ); ?>
|
||||
</option>
|
||||
<option value="contributors" <?php selected( $_GET['order'], 'contributors' ); ?>>
|
||||
<?php esc_html_e( 'Total Contributors', 'wordpressorg' ); ?>
|
||||
</option>
|
||||
</select>
|
||||
<span class="screen-reader-text">
|
||||
<input type="submit" />
|
||||
</span>
|
||||
</form>
|
||||
|
||||
<?php get_search_form(); ?>
|
||||
</div>
|
||||
</header><!-- .page-header -->
|
||||
|
||||
<?php
|
||||
|
||||
while ( have_posts() ) :
|
||||
the_post();
|
||||
|
||||
get_template_part( 'template-parts/content', get_post_type() );
|
||||
|
||||
endwhile;
|
||||
|
||||
the_posts_pagination();
|
||||
|
||||
?>
|
||||
|
||||
<?php else :
|
||||
|
||||
get_template_part( 'template-parts/content', 'none' );
|
||||
|
||||
endif; ?>
|
||||
|
||||
</main><!-- #main -->
|
||||
|
||||
<?php
|
||||
get_footer();
|
||||
|
|
@ -26,23 +26,19 @@ get_header(); ?>
|
|||
while ( have_posts() ) :
|
||||
the_post();
|
||||
|
||||
/*
|
||||
* Include the Post-Format-specific template for the content.
|
||||
* If you want to override this in a child theme, then include a file
|
||||
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
|
||||
*/
|
||||
get_template_part( 'template-parts/content', 'page' );
|
||||
get_template_part( 'template-parts/content', get_post_type() );
|
||||
|
||||
endwhile;
|
||||
|
||||
the_posts_pagination();
|
||||
|
||||
else :
|
||||
?>
|
||||
|
||||
<?php else :
|
||||
|
||||
get_template_part( 'template-parts/content', 'none' );
|
||||
|
||||
endif;
|
||||
?>
|
||||
endif; ?>
|
||||
|
||||
</main><!-- #main -->
|
||||
|
||||
|
|
|
|||
|
|
@ -5,3 +5,4 @@
|
|||
@import "../../../pub/wporg/css/base/lists";
|
||||
@import "../../../pub/wporg/css/base/tables";
|
||||
@import "../../../pub/wporg/css/base/typography";
|
||||
@import "select";
|
||||
|
|
|
|||
40
themes/wporg-5ftf/css/base/_select.scss
Normal file
40
themes/wporg-5ftf/css/base/_select.scss
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
// Remove the browser styling from a select box and create a simple dropdown.
|
||||
// See https://www.filamentgroup.com/lab/select-css.html
|
||||
.custom-select {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
margin: -0.5rem 0;
|
||||
padding: 0.5rem 2rem 0.5rem .8rem;
|
||||
width: auto;
|
||||
|
||||
font-size: 1em;
|
||||
line-height: 1.3;
|
||||
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
border-radius: 0.5em;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
background-color: transparent;
|
||||
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg width="14" height="8" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M2 0L7 5L12 0L14 1L7 8L0 1L2 0Z" fill="%23555D66"/%3E%3C/svg%3E%0A');
|
||||
background-repeat: no-repeat;
|
||||
background-position: right .7em top 50%;
|
||||
background-size: .65em auto;
|
||||
|
||||
&::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
|
||||
box-shadow: 0 0 0 3px -moz-mac-focusring;
|
||||
color: #222;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
& option {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
9
themes/wporg-5ftf/css/components/_archive.scss
Normal file
9
themes/wporg-5ftf/css/components/_archive.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
body.archive {
|
||||
|
||||
.page-title {
|
||||
color: $color__text-heading-darker;
|
||||
font-size: ms(8);
|
||||
font-weight: 300;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
|
@ -20,8 +20,10 @@
|
|||
@import "../../../pub/wporg/css/components/wporg-footer";
|
||||
@import "../../../pub/wporg/css/components/wporg-header";
|
||||
@import "about";
|
||||
@import "archive";
|
||||
@import "entry-content";
|
||||
@import "page";
|
||||
@import "pledge-list";
|
||||
@import "site-content";
|
||||
@import "site-header";
|
||||
@import "site-title";
|
||||
|
|
|
|||
58
themes/wporg-5ftf/css/components/_pledge-list.scss
Normal file
58
themes/wporg-5ftf/css/components/_pledge-list.scss
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
body.archive.post-type-archive-5ftf_pledge {
|
||||
|
||||
// Expand archive content area to full-width of header.
|
||||
.site-content .site-main {
|
||||
padding: 0 10px;
|
||||
max-width: $size__site-main;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
margin: ms(12) 0;
|
||||
|
||||
.page-title {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.page-header-callout {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.page-header-controls {
|
||||
grid-column: 1 / span 2;
|
||||
grid-row: 2;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
margin-top: ms(2);
|
||||
border-top: 1px solid $color-gray-light-500;
|
||||
padding-top: ms(2);
|
||||
|
||||
form:nth-of-type(2n+1) {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
form:nth-of-type(2n) {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-header-controls {
|
||||
font-size: ms(-2);
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
font-size: 1em;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -10,4 +10,5 @@
|
|||
@import "hero";
|
||||
@import "image";
|
||||
@import "pledge-form";
|
||||
@import "pledge";
|
||||
@import "pullquote";
|
||||
|
|
|
|||
74
themes/wporg-5ftf/css/objects/_pledge.scss
Normal file
74
themes/wporg-5ftf/css/objects/_pledge.scss
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
article.type-5ftf_pledge {
|
||||
/* Structure */
|
||||
display: grid;
|
||||
grid-template-columns: 330px auto;
|
||||
margin-bottom: ms(12);
|
||||
|
||||
.entry-image {
|
||||
grid-column: 1;
|
||||
grid-row: 1 / span 2;
|
||||
margin-right: ms(8);
|
||||
}
|
||||
|
||||
.entry-header {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.entry-content {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
/* Styles */
|
||||
|
||||
.entry-image__placeholder {
|
||||
background: $color-gray-light-100;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.entry-image__logo {
|
||||
padding: ms(-2);
|
||||
background: $color-gray-light-100;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
max-height: 100px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.entry-title {
|
||||
margin-top: 0;
|
||||
font-size: ms(2);
|
||||
font-weight: 400;
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.entry-content {
|
||||
font-size: ms(-1);
|
||||
color: $color__text-darker;
|
||||
}
|
||||
|
||||
.pledge-contributors h3 {
|
||||
margin-top: 0;
|
||||
font-size: ms(-1);
|
||||
color: $color__text-lighter;
|
||||
}
|
||||
|
||||
.pledge-contributor__avatar {
|
||||
display: inline-block;
|
||||
background: $color-gray-light-700;
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -9,7 +9,7 @@ get_header(); ?>
|
|||
<?php while ( have_posts() ) :
|
||||
the_post();
|
||||
|
||||
get_template_part( 'template-parts/plugin', 'single' );
|
||||
get_template_part( 'template-parts/content', get_post_type() );
|
||||
endwhile; ?>
|
||||
|
||||
</main><!-- #main -->
|
||||
|
|
|
|||
77
themes/wporg-5ftf/template-parts/content-5ftf_pledge.php
Normal file
77
themes/wporg-5ftf/template-parts/content-5ftf_pledge.php
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
<?php
|
||||
/**
|
||||
* Display pledge data in the archive & single view.
|
||||
*/
|
||||
|
||||
namespace WordPressdotorg\Five_for_the_Future\Theme;
|
||||
|
||||
use WordPressDotOrg\FiveForTheFuture\Contributor;
|
||||
use WordPressDotOrg\FiveForTheFuture\PledgeMeta;
|
||||
|
||||
$data = array();
|
||||
|
||||
foreach ( PledgeMeta\get_pledge_meta_config() as $key => $config ) {
|
||||
$data[ $key ] = get_post_meta( get_the_ID(), PledgeMeta\META_PREFIX . $key, $config['single'] );
|
||||
}
|
||||
|
||||
$contributors = Contributor\get_pledge_contributors( get_the_ID() );
|
||||
$count = count( $contributors );
|
||||
|
||||
$content = apply_filters( 'the_content', $data['org-description'] );
|
||||
|
||||
$contributor_title = sprintf(
|
||||
esc_html(
|
||||
_n( '%1$s has pledged %2$d contributor', '%1$s has pledged %2$d contributors', $count, 'wordpressorg' )
|
||||
),
|
||||
wp_kses_post( get_the_title() ),
|
||||
intval( $count )
|
||||
);
|
||||
?>
|
||||
|
||||
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
|
||||
<div class="entry-image">
|
||||
<?php if ( has_post_thumbnail() ) : ?>
|
||||
<div class="entry-image__logo">
|
||||
<?php the_post_thumbnail(); ?>
|
||||
</div>
|
||||
<?php else : ?>
|
||||
<div class="entry-image__placeholder"></div>
|
||||
<?php endif; ?>
|
||||
</div><!-- .post-thumbnail -->
|
||||
|
||||
<header class="entry-header">
|
||||
<?php if ( is_singular() ) : ?>
|
||||
|
||||
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
|
||||
|
||||
<?php else : ?>
|
||||
|
||||
<?php the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' ); ?>
|
||||
|
||||
<?php endif; ?>
|
||||
</header><!-- .entry-header -->
|
||||
|
||||
<div class="entry-content">
|
||||
<?php
|
||||
echo wp_kses_post( $content );
|
||||
?>
|
||||
|
||||
<div class="pledge-contributors">
|
||||
<?php /* phpcs:ignore -- escaped above */ ?>
|
||||
<h3><?php echo $contributor_title ?></h3>
|
||||
|
||||
<?php
|
||||
foreach ( $contributors as $contrib_post ) {
|
||||
$contrib = get_user_by( 'login', $contrib_post->post_title );
|
||||
if ( $contrib ) {
|
||||
printf(
|
||||
'<span class="pledge-contributor__avatar">%s</span>',
|
||||
get_avatar( $contrib->user_email, 30, 'blank' )
|
||||
);
|
||||
}
|
||||
}
|
||||
?>
|
||||
</div><!-- .pledge-contributors -->
|
||||
|
||||
</div><!-- .entry-content -->
|
||||
</article><!-- #post-## -->
|
||||
Loading…
Add table
Add a link
Reference in a new issue