mirror of
https://github.com/WordPress/five-for-the-future.git
synced 2025-07-05 10:25:45 +03:00
Single Pledge: Add intro message to pledges for clarity.
This commit is contained in:
Ian Dunn
parent
325a6d71e2
commit
7174ae2fb6
16 changed files with 222 additions and 166 deletions
|
|
@ -7,11 +7,12 @@ WordPress theme for [the Five for the Future subsite](https://wordpress.org/five
|
|||
|
||||
```
|
||||
npm install
|
||||
grunt watch
|
||||
npm start
|
||||
```
|
||||
|
||||
Make CSS changes in the `css/` folder, and `css/style.css` will be rebuilt automatically.
|
||||
|
||||
See `./css/README.md` for docs on how SASS files are structured.
|
||||
|
||||
## Committing
|
||||
|
||||
|
|
@ -20,6 +21,4 @@ Before committing changes to `css/`, please run `grunt build` to keep the file s
|
|||
|
||||
## Miscellaneous
|
||||
|
||||
The canonical source for this project is [github.com/WordPress/five-for-the-future](https://github.com/WordPress/five-for-the-future). The contents are synced to the dotorg SVN repo to run on production, because we don't deploy directly from GitHub, for reliability reasons.
|
||||
|
||||
The production copy lives in `themes/` instead of `themes/pub`, because it's already open in GitHub, and we don't want to clutter the Meta repo logs and Slack channels with noise from "Syncing w/ Git repository..." commits.
|
||||
See the root README for information on syncing changes from Git to SVN.
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ body.page.page-my-pledges {
|
|||
|
||||
// Expand archive content area to full-width of header.
|
||||
.site-content .site-main {
|
||||
padding: 0 10px;
|
||||
max-width: $size__site-main;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,10 +14,10 @@ body.page:not(.home) {
|
|||
}
|
||||
|
||||
.entry-content {
|
||||
padding: 0 0 ms( 10 );
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.entry-footer {
|
||||
padding: ms( 10 ) 0;
|
||||
padding: ms( 10 ) ms(2);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
.pledge-contributors {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
|
|
@ -6,60 +10,20 @@
|
|||
color: $color__text-lighter;
|
||||
}
|
||||
|
||||
li {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 0 1em 1em 0;
|
||||
}
|
||||
|
||||
.pledge-contributor__avatar {
|
||||
display: inline-block;
|
||||
background: $color-gray-light-700;
|
||||
margin-right: 4px;
|
||||
margin-bottom: 4px;
|
||||
border-radius: $avatar__border-radius;
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-contrib-names {
|
||||
margin: ms(2) 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 20px 40px 0;
|
||||
width: calc( 50% - 15px );
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@include breakpoint( $breakpoint-small ) {
|
||||
margin-right: 48px;
|
||||
width: calc( 33% - 33px );
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
margin-right: 48px;
|
||||
}
|
||||
|
||||
&:nth-of-type(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li:first-child:last-child {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
|
||||
a {
|
||||
max-width: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
.pledge-contributor__avatar {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.pledge-contributor__name {
|
||||
display: block;
|
||||
text-align: center;
|
||||
border-radius: $avatar__border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ body.search.search-results {
|
|||
|
||||
// Expand archive content area to full-width of header.
|
||||
.site-content .site-main {
|
||||
padding: 0 10px;
|
||||
max-width: $size__site-main;
|
||||
}
|
||||
|
||||
|
|
@ -82,7 +81,7 @@ body.search.search-results {
|
|||
grid-row: 2;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include breakpoint( $breakpoint-tablet ) {
|
||||
grid-template-columns: 330px auto;
|
||||
}
|
||||
|
|
@ -92,4 +91,20 @@ body.search.search-results {
|
|||
font-size: ms(2);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.pledge-contributors {
|
||||
li {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0 5px 5px 0;
|
||||
}
|
||||
|
||||
.pledge-contributor__avatar {
|
||||
border-radius: calc( #{$avatar__border-radius} / 3.75 );
|
||||
|
||||
img {
|
||||
border-radius: calc( #{$avatar__border-radius} / 3.75 );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,33 +2,38 @@ body.single.single-5ftf_pledge {
|
|||
|
||||
// Expand archive content area to full-width of header.
|
||||
.site-content .site-main {
|
||||
padding: 0 10px;
|
||||
max-width: $size__site-main;
|
||||
}
|
||||
|
||||
.entry-header {
|
||||
margin: ms(12) 0;
|
||||
margin: 0;
|
||||
padding-bottom: ms(4);
|
||||
border-bottom: 1px solid $color-gray-light-500;
|
||||
text-align: center;
|
||||
|
||||
@include breakpoint( $breakpoint-mobile ) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> div {
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
.entry-image {
|
||||
max-width: 330px;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint( 0, $breakpoint-mobile ) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.entry-image {
|
||||
margin-top: ms(2);
|
||||
.pledge-introduction {
|
||||
background-color: $color-gray-light-200;
|
||||
padding: 1em;
|
||||
font-size: 1.5em;
|
||||
|
||||
p {
|
||||
max-width: 525px; /* Keep it on two lines, ala https://stackoverflow.com/q/61923996/450127 */
|
||||
margin: 1em auto;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -46,12 +51,53 @@ body.single.single-5ftf_pledge {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.entry-image__logo {
|
||||
background: transparent;
|
||||
.has-post-thumbnail .pledge-introduction {
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
|
||||
.pledge-company-description {
|
||||
max-width: $size__content-width;
|
||||
.has-post-thumbnail .pledge-company-summary {
|
||||
position: relative;
|
||||
top: -30px;
|
||||
}
|
||||
|
||||
.entry-image__logo {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
|
||||
img {
|
||||
background-color: white;
|
||||
max-width: 330px;
|
||||
border-radius: 10px;
|
||||
border: 5px solid white;
|
||||
}
|
||||
}
|
||||
|
||||
.entry-content {
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@include breakpoint( $breakpoint-tablet ) {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"about contributions"
|
||||
"contributors contributors"
|
||||
;
|
||||
grid-template-columns: calc( 50% - 40px ) calc( 50% - 40px );
|
||||
grid-gap: 80px;
|
||||
|
||||
.pledge-company-description {
|
||||
grid-area: about;
|
||||
}
|
||||
|
||||
.pledge-company-contributions {
|
||||
grid-area: contributions;
|
||||
}
|
||||
|
||||
.pledge-company-contributors {
|
||||
grid-area: contributors;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.team-grid {
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@
|
|||
|
||||
.site-main {
|
||||
margin: 0 auto ms(8);
|
||||
padding: 0 ms( 2 );
|
||||
padding: 0 ms( 4 );
|
||||
max-width: calc( #{ $size__content-width } + #{ ms( 2 ) * 2 } );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,13 +7,12 @@
|
|||
flex-wrap: wrap;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 0 1em;
|
||||
width: 25%;
|
||||
min-width: 10em;
|
||||
margin: 0 1em .5em 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div.dashicons {
|
||||
|
|
@ -26,9 +25,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
@include breakpoint( 0, $breakpoint-small ) {
|
||||
@include breakpoint( 30em ) {
|
||||
li {
|
||||
width: 100%;
|
||||
width: calc( 50% - 1em);
|
||||
min-width: 10em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
1
themes/wporg-5ftf/css/settings/_images.scss
Normal file
1
themes/wporg-5ftf/css/settings/_images.scss
Normal file
|
|
@ -0,0 +1 @@
|
|||
$avatar__border-radius: 30px;
|
||||
|
|
@ -4,5 +4,6 @@
|
|||
@import "../../../pub/wporg/css/settings/typography";
|
||||
@import "colors";
|
||||
@import "icons";
|
||||
@import "images";
|
||||
@import "structure";
|
||||
@import "typography";
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
@import "../../../pub/wporg/css/tools/breakpoint";
|
||||
@import "../../../pub/wporg/css/tools/functions";
|
||||
@import "../../../pub/wporg/css/tools/kube";
|
||||
@import "../../../pub/wporg/css/tools/modular-scale";
|
||||
|
|
|
|||
10
themes/wporg-5ftf/css/utilities/_alignfull.scss
Normal file
10
themes/wporg-5ftf/css/utilities/_alignfull.scss
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
html {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.alignfull {
|
||||
margin-left: calc(50% - 50vw);
|
||||
margin-right: calc(50% - 50vw);
|
||||
max-width: 100vw;
|
||||
width: 100vw;
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
@import "alignfull";
|
||||
@import "colors";
|
||||
@import "columns";
|
||||
@import "paragraph";
|
||||
|
|
|
|||
|
|
@ -30,7 +30,27 @@ get_header();
|
|||
|
||||
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
|
||||
<header class="entry-header">
|
||||
<div>
|
||||
<div class="pledge-introduction alignfull">
|
||||
<p>
|
||||
<?php esc_html_e( 'This organization contributes 5% of their resources to the WordPress project.', 'wporg-5ftf' ); ?>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="<?php echo esc_url( home_url() ); ?>">
|
||||
<?php esc_html_e( 'More about Five for the Future', 'wporg-5ftf' ); ?>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="pledge-company-summary">
|
||||
<?php if ( has_post_thumbnail() ) : ?>
|
||||
<div class="entry-image">
|
||||
<div class="entry-image__logo">
|
||||
<?php the_post_thumbnail( 'pledge-logo' ); ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ( DEACTIVE_STATUS === get_post_status() ) : ?>
|
||||
<span class="pledge-status"><?php esc_html_e( 'deactivated', 'wporg-5ftf' ); ?></span>
|
||||
<?php endif; ?>
|
||||
|
|
@ -44,21 +64,13 @@ get_header();
|
|||
?>
|
||||
</span>
|
||||
</div>
|
||||
<div class="entry-image">
|
||||
<?php if ( has_post_thumbnail() ) : ?>
|
||||
<div class="entry-image__logo">
|
||||
<?php the_post_thumbnail( 'pledge-logo' ); ?>
|
||||
</div>
|
||||
<?php else : ?>
|
||||
<div class="entry-image__placeholder"></div>
|
||||
<?php endif; ?>
|
||||
</div><!-- .entry-image -->
|
||||
|
||||
</header>
|
||||
|
||||
<div class="entry-content">
|
||||
<h2><?php esc_html_e( 'About', 'wporg-5ftf' ); ?></h2>
|
||||
|
||||
<div class="pledge-company-description">
|
||||
<h2><?php esc_html_e( 'About', 'wporg-5ftf' ); ?></h2>
|
||||
|
||||
<?php
|
||||
// phpcs:ignore WordPress.Security.EscapeOutput -- wp_kses_data escapes the content.
|
||||
echo wpautop( wp_kses_data( $post->{ META_PREFIX . 'org-description' } ) );
|
||||
|
|
@ -66,68 +78,56 @@ get_header();
|
|||
</div>
|
||||
|
||||
<?php if ( ! empty( $contributors ) ) : ?>
|
||||
<h2><?php esc_html_e( 'Contributions', 'wporg-5ftf' ); ?></h2>
|
||||
<div class="pledge-company-contributions">
|
||||
<h2><?php esc_html_e( 'Contributions', 'wporg-5ftf' ); ?></h2>
|
||||
|
||||
<p>
|
||||
<?php
|
||||
echo wp_kses_post( sprintf(
|
||||
__( '%1$s sponsors %2$s for a total of <strong>%3$s</strong> hours per week.', 'wporg-5ftf' ),
|
||||
get_the_title(),
|
||||
sprintf(
|
||||
_n( '<strong>%d</strong> contributor', '<strong>%d</strong> contributors', $contribution_data['contributors'], 'wporg-5ftf' ),
|
||||
number_format_i18n( absint( $contribution_data['contributors'] ) )
|
||||
),
|
||||
number_format_i18n( absint( $contribution_data['hours'] ) )
|
||||
) );
|
||||
?>
|
||||
</p>
|
||||
<p>
|
||||
<?php
|
||||
echo wp_kses_post( sprintf(
|
||||
__( 'Contributors from %s work on the following teams:', 'wporg-5ftf' ),
|
||||
get_the_title()
|
||||
) );
|
||||
?>
|
||||
</p>
|
||||
<ul class="team-grid">
|
||||
<?php foreach ( $contribution_data['teams'] as $team ) :
|
||||
$badge_classes = get_badge_classes( $team );
|
||||
<p>
|
||||
<?php
|
||||
echo wp_kses_post( sprintf(
|
||||
__( '%1$s sponsors %2$s for a total of <strong>%3$s hours</strong> per week across <strong>%4$d teams</strong>.', 'wporg-5ftf' ),
|
||||
get_the_title(),
|
||||
sprintf(
|
||||
_n( '<strong>%d contributor</strong>', '<strong>%d contributors</strong>', $contribution_data['contributors'], 'wporg-5ftf' ),
|
||||
number_format_i18n( absint( $contribution_data['contributors'] ) )
|
||||
),
|
||||
number_format_i18n( absint( $contribution_data['hours'] ) ),
|
||||
count( $contribution_data['teams'] )
|
||||
) );
|
||||
?>
|
||||
<li>
|
||||
<div class="badge item dashicons <?php echo esc_attr( implode( ' ', $badge_classes ) ); ?>"></div>
|
||||
<span class="badge-label"><?php echo esc_html( $team ); ?></span>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
<?php endif; ?>
|
||||
</p>
|
||||
|
||||
<h2><?php esc_html_e( 'Contributors', 'wporg-5ftf' ); ?></h2>
|
||||
|
||||
<?php if ( ! empty( $contributors ) ) : ?>
|
||||
<ul class="pledge-contributors has-contrib-names">
|
||||
<?php foreach ( $contributors as $contributor ) : ?>
|
||||
<li class="pledge-contributor">
|
||||
<span class="pledge-contributor__avatar">
|
||||
<a href="<?php echo esc_url( 'https://profiles.wordpress.org/' . $contributor->user_nicename ); ?> ">
|
||||
<?php echo get_avatar( $contributor->user_email, 280 ); ?>
|
||||
</a>
|
||||
</span>
|
||||
<?php
|
||||
printf(
|
||||
'<a class="pledge-contributor__name" href="%1$s">%2$s</a>',
|
||||
sprintf(
|
||||
'https://profiles.wordpress.org/%s/',
|
||||
sanitize_key( $contributor->user_nicename ) // phpcs:ignore WordPress.Security.EscapeOutput -- sanitize_key will catch any security issues.
|
||||
),
|
||||
esc_html( $contributor->display_name )
|
||||
);
|
||||
<ul class="team-grid">
|
||||
<?php foreach ( $contribution_data['teams'] as $team ) :
|
||||
$badge_classes = get_badge_classes( $team );
|
||||
?>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
<?php else : ?>
|
||||
<p><?php esc_html_e( 'No confirmed contributors yet.', 'wporg-5ftf' ); ?></p>
|
||||
<li>
|
||||
<div class="badge item dashicons <?php echo esc_attr( implode( ' ', $badge_classes ) ); ?>"></div>
|
||||
<span class="badge-label"><?php echo esc_html( $team ); ?></span>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="pledge-company-contributors">
|
||||
<h2><?php esc_html_e( 'Contributors', 'wporg-5ftf' ); ?></h2>
|
||||
|
||||
<?php if ( ! empty( $contributors ) ) : ?>
|
||||
<ul class="pledge-contributors">
|
||||
<?php foreach ( $contributors as $contributor ) : ?>
|
||||
<li class="pledge-contributor">
|
||||
<span class="pledge-contributor__avatar">
|
||||
<a href="<?php echo esc_url( 'https://profiles.wordpress.org/' . $contributor->user_nicename ); ?> ">
|
||||
<?php echo get_avatar( $contributor->user_email, 280, 'mystery', $contributor->display_name ); ?>
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
<?php else : ?>
|
||||
<p><?php esc_html_e( 'No confirmed contributors yet.', 'wporg-5ftf' ); ?></p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="entry-footer">
|
||||
|
|
|
|||
|
|
@ -14,7 +14,9 @@ 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() );
|
||||
$contributors = Contributor\get_contributor_user_objects(
|
||||
Contributor\get_pledge_contributors( get_the_ID() )
|
||||
);
|
||||
|
||||
$allowed_html = array_merge(
|
||||
wp_kses_allowed_html( 'data' ),
|
||||
|
|
@ -74,22 +76,19 @@ $contributor_title = sprintf(
|
|||
<?php echo wp_kses( $content, $allowed_html ); ?>
|
||||
</p>
|
||||
|
||||
<div class="pledge-contributors">
|
||||
<?php /* phpcs:ignore -- escaped above */ ?>
|
||||
<h3><?php echo $contributor_title ?></h3>
|
||||
<?php /* phpcs:ignore -- escaped above */ ?>
|
||||
<h3><?php echo $contributor_title ?></h3>
|
||||
|
||||
<ul class="pledge-contributors">
|
||||
<?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' )
|
||||
);
|
||||
}
|
||||
foreach ( $contributors as $contrib_user ) {
|
||||
printf(
|
||||
'<li class="pledge-contributor__avatar">%s</li>',
|
||||
get_avatar( $contrib_user->user_email, 40, 'mystery', $contrib_user->display_name )
|
||||
);
|
||||
}
|
||||
?>
|
||||
</div><!-- .pledge-contributors -->
|
||||
</ul><!-- .pledge-contributors -->
|
||||
|
||||
</div><!-- .entry-content -->
|
||||
</article><!-- #post-## -->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue