From 7174ae2fb6f6248f9eefacd7fedcee73c8f580d8 Mon Sep 17 00:00:00 2001 From: Ian Dunn Date: Fri, 30 Apr 2021 12:55:55 -0700 Subject: [PATCH] Single Pledge: Add intro message to pledges for clarity. --- README.md | 22 +++ themes/wporg-5ftf/README.md | 7 +- .../css/components/_my-pledges.scss | 1 - themes/wporg-5ftf/css/components/_page.scss | 4 +- .../css/components/_pledge-contributors.scss | 60 ++------ .../css/components/_pledge-list.scss | 19 ++- .../css/components/_pledge-single.scss | 82 ++++++++--- .../css/components/_site-content.scss | 4 +- .../css/components/_team-badges.scss | 12 +- themes/wporg-5ftf/css/settings/_images.scss | 1 + themes/wporg-5ftf/css/settings/_settings.scss | 1 + themes/wporg-5ftf/css/tools/_tools.scss | 1 - .../wporg-5ftf/css/utilities/_alignfull.scss | 10 ++ .../wporg-5ftf/css/utilities/_utilities.scss | 1 + themes/wporg-5ftf/single-5ftf_pledge.php | 138 +++++++++--------- .../template-parts/content-5ftf_pledge.php | 25 ++-- 16 files changed, 222 insertions(+), 166 deletions(-) create mode 100644 README.md create mode 100644 themes/wporg-5ftf/css/settings/_images.scss create mode 100644 themes/wporg-5ftf/css/utilities/_alignfull.scss diff --git a/README.md b/README.md new file mode 100644 index 0000000..4f03a34 --- /dev/null +++ b/README.md @@ -0,0 +1,22 @@ +# Five for the Future (WordPress.org/five-for-the-future) + +[Five for the Future](https://wordpress.org/five-for-the-future) is an initiative promoting the WordPress community’s contribution to the platform’s growth. As an open source project, WordPress is created by a diverse collection of people from around the world. + +The program encourages organizations to contribute five percent of their resources to WordPress development, to maintain a "golden ratio" of contributors to users. + + +## Scripts + +* `composer run phpcs` - Lint the entire codebase +* `composer run phpcs -- -a themes/wporg-5ftf/` - Lint a specific folder, interactively +* `composer run phpcbf` - Fix linter warnings (when possible) +* `composer run test` - Run unit tests + +See [the theme README](./themes/wporg-5ftf/README.md) for scripts specific to the theme. + + +## Syncing to production + +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 plugin and theme lives in the private SVN repo instead of `meta.svn.wordpress.org`, because the code is already open-sourced, and we don't want to clutter the Meta logs and Slack channels with noise from "Syncing w/ Git repository..." commits. diff --git a/themes/wporg-5ftf/README.md b/themes/wporg-5ftf/README.md index 20b1613..747ccb7 100644 --- a/themes/wporg-5ftf/README.md +++ b/themes/wporg-5ftf/README.md @@ -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. diff --git a/themes/wporg-5ftf/css/components/_my-pledges.scss b/themes/wporg-5ftf/css/components/_my-pledges.scss index d560460..1d4a80e 100644 --- a/themes/wporg-5ftf/css/components/_my-pledges.scss +++ b/themes/wporg-5ftf/css/components/_my-pledges.scss @@ -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; } diff --git a/themes/wporg-5ftf/css/components/_page.scss b/themes/wporg-5ftf/css/components/_page.scss index 95028bd..5ba5905 100644 --- a/themes/wporg-5ftf/css/components/_page.scss +++ b/themes/wporg-5ftf/css/components/_page.scss @@ -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); } } diff --git a/themes/wporg-5ftf/css/components/_pledge-contributors.scss b/themes/wporg-5ftf/css/components/_pledge-contributors.scss index 43c54bf..ea1a61b 100644 --- a/themes/wporg-5ftf/css/components/_pledge-contributors.scss +++ b/themes/wporg-5ftf/css/components/_pledge-contributors.scss @@ -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; } } } diff --git a/themes/wporg-5ftf/css/components/_pledge-list.scss b/themes/wporg-5ftf/css/components/_pledge-list.scss index d0fa287..37e33ec 100644 --- a/themes/wporg-5ftf/css/components/_pledge-list.scss +++ b/themes/wporg-5ftf/css/components/_pledge-list.scss @@ -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 ); + } + } + } } diff --git a/themes/wporg-5ftf/css/components/_pledge-single.scss b/themes/wporg-5ftf/css/components/_pledge-single.scss index 833bf46..56450f4 100644 --- a/themes/wporg-5ftf/css/components/_pledge-single.scss +++ b/themes/wporg-5ftf/css/components/_pledge-single.scss @@ -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 { diff --git a/themes/wporg-5ftf/css/components/_site-content.scss b/themes/wporg-5ftf/css/components/_site-content.scss index 5e71f49..bd49221 100644 --- a/themes/wporg-5ftf/css/components/_site-content.scss +++ b/themes/wporg-5ftf/css/components/_site-content.scss @@ -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 } ); } } -} \ No newline at end of file +} diff --git a/themes/wporg-5ftf/css/components/_team-badges.scss b/themes/wporg-5ftf/css/components/_team-badges.scss index ecda2b5..d260e36 100644 --- a/themes/wporg-5ftf/css/components/_team-badges.scss +++ b/themes/wporg-5ftf/css/components/_team-badges.scss @@ -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; } } } diff --git a/themes/wporg-5ftf/css/settings/_images.scss b/themes/wporg-5ftf/css/settings/_images.scss new file mode 100644 index 0000000..d8cf6ee --- /dev/null +++ b/themes/wporg-5ftf/css/settings/_images.scss @@ -0,0 +1 @@ +$avatar__border-radius: 30px; diff --git a/themes/wporg-5ftf/css/settings/_settings.scss b/themes/wporg-5ftf/css/settings/_settings.scss index 6ca61d0..c42888d 100644 --- a/themes/wporg-5ftf/css/settings/_settings.scss +++ b/themes/wporg-5ftf/css/settings/_settings.scss @@ -4,5 +4,6 @@ @import "../../../pub/wporg/css/settings/typography"; @import "colors"; @import "icons"; +@import "images"; @import "structure"; @import "typography"; diff --git a/themes/wporg-5ftf/css/tools/_tools.scss b/themes/wporg-5ftf/css/tools/_tools.scss index fda1c99..0ec466b 100644 --- a/themes/wporg-5ftf/css/tools/_tools.scss +++ b/themes/wporg-5ftf/css/tools/_tools.scss @@ -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"; diff --git a/themes/wporg-5ftf/css/utilities/_alignfull.scss b/themes/wporg-5ftf/css/utilities/_alignfull.scss new file mode 100644 index 0000000..00fe6e2 --- /dev/null +++ b/themes/wporg-5ftf/css/utilities/_alignfull.scss @@ -0,0 +1,10 @@ +html { + overflow-x: hidden; +} + +.alignfull { + margin-left: calc(50% - 50vw); + margin-right: calc(50% - 50vw); + max-width: 100vw; + width: 100vw; +} diff --git a/themes/wporg-5ftf/css/utilities/_utilities.scss b/themes/wporg-5ftf/css/utilities/_utilities.scss index 0f56167..e8dd85c 100644 --- a/themes/wporg-5ftf/css/utilities/_utilities.scss +++ b/themes/wporg-5ftf/css/utilities/_utilities.scss @@ -1,3 +1,4 @@ +@import "alignfull"; @import "colors"; @import "columns"; @import "paragraph"; diff --git a/themes/wporg-5ftf/single-5ftf_pledge.php b/themes/wporg-5ftf/single-5ftf_pledge.php index 36864f8..cadac35 100644 --- a/themes/wporg-5ftf/single-5ftf_pledge.php +++ b/themes/wporg-5ftf/single-5ftf_pledge.php @@ -30,7 +30,27 @@ get_header();
>
-
+
+

+ +

+ +

+ + + +

+
+ +
+ +
+ +
+ + @@ -44,21 +64,13 @@ get_header(); ?>
-
- - - -
- -
+
-

-
+

+ { META_PREFIX . 'org-description' } ) ); @@ -66,68 +78,56 @@ get_header();
-

+
+

-

- %3$s hours per week.', 'wporg-5ftf' ), - get_the_title(), - sprintf( - _n( '%d contributor', '%d contributors', $contribution_data['contributors'], 'wporg-5ftf' ), - number_format_i18n( absint( $contribution_data['contributors'] ) ) - ), - number_format_i18n( absint( $contribution_data['hours'] ) ) - ) ); - ?> -

-

- -

-
    - + %3$s hours per week across %4$d teams.', 'wporg-5ftf' ), + get_the_title(), + sprintf( + _n( '%d contributor', '%d contributors', $contribution_data['contributors'], 'wporg-5ftf' ), + number_format_i18n( absint( $contribution_data['contributors'] ) ) + ), + number_format_i18n( absint( $contribution_data['hours'] ) ), + count( $contribution_data['teams'] ) + ) ); ?> -
  • -
    - -
    • - -
- +

-

- - -
    - -
  • - - - user_email, 280 ); ?> - - - %2$s', - 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 ) - ); +
      + - - -
    - -

    +
  • +
    + +
    • + +
+
+ +
+

+ + + + +

+ +
diff --git a/themes/wporg-5ftf/template-parts/content-5ftf_pledge.php b/themes/wporg-5ftf/template-parts/content-5ftf_pledge.php index 9013bcf..e493098 100644 --- a/themes/wporg-5ftf/template-parts/content-5ftf_pledge.php +++ b/themes/wporg-5ftf/template-parts/content-5ftf_pledge.php @@ -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(

-
- -

+ +

+
    post_title ); - if ( $contrib ) { - printf( - '%s', - get_avatar( $contrib->user_email, 30, 'blank' ) - ); - } + foreach ( $contributors as $contrib_user ) { + printf( + '
  • %s
    • ', + get_avatar( $contrib_user->user_email, 40, 'mystery', $contrib_user->display_name ) + ); } ?> -
+