Skip to:
Content

BuddyPress.org

Ticket #7741: 7741.01.patch

File 7741.01.patch, 67.4 KB (added by DJPaul, 8 years ago)

  • Gruntfile.js 

    diff --git a/Gruntfile.js b/Gruntfile.js
index 3a4ef68e3..a28346519 100644
    a b module.exports = function( grunt ) { 
    2323                // SASS generated "Twenty*"" CSS files
    2424                BP_SCSS_CSS_FILES = [
    2525                        '!bp-templates/bp-legacy/css/twenty*.css',
    26                         '!bp-templates/bp-nouveau/css/buddypress.css'
     26                        '!bp-templates/bp-nouveau/css/buddypress.css',
     27                        '!bp-core/admin/css/hello.css'
    2728                ],
    2829
    2930                stylelintConfigCss  = require('stylelint-config-wordpress/index.js'),
    … … module.exports = function( grunt ) { 
    8990                                indentType: 'tab',
    9091                                indentWidth: '1'
    9192                        },
    92                         styles: {
     93                        legacy: {
    9394                                cwd: SOURCE_DIR,
    9495                                extDot: 'last',
    9596                                expand: true,
    … … module.exports = function( grunt ) { 
    106107                                flatten: true,
    107108                                src: ['bp-templates/bp-nouveau/sass/buddypress.scss'],
    108109                                dest: SOURCE_DIR + 'bp-templates/bp-nouveau/css/'
     110                        },
     111                        admin: {
     112                                cwd: SOURCE_DIR,
     113                                extDot: 'last',
     114                                expand: true,
     115                                ext: '.css',
     116                                flatten: true,
     117                                src: ['bp-core/admin/sass/*.scss'],
     118                                dest: SOURCE_DIR + 'bp-core/admin/css/'
    109119                        }
    110120                },
    111121                rtlcss: {
    … … module.exports = function( grunt ) { 
    227237                                },
    228238                                expand: true,
    229239                                cwd: SOURCE_DIR,
    230                                 src: [ 'bp-templates/bp-legacy/css/*.scss' ]
     240                                src: [ '**/*.scss' ]
    231241                        }
    232242                },
    233243                cssmin: {

  • src/bp-core/admin/bp-core-admin-functions.php 

    diff --git a/src/bp-core/admin/bp-core-admin-functions.php b/src/bp-core/admin/bp-core-admin-functions.php
index 82f82e497..609453741 100644
    a b function bp_do_activation_redirect() { 
    357357                return;
    358358        }
    359359
    360         $query_args = array( 'page' => 'bp-about' );
     360        $query_args = array();
    361361        if ( get_transient( '_bp_is_new_install' ) ) {
    362362                $query_args['is_new_install'] = '1';
    363363                delete_transient( '_bp_is_new_install' );
    364364        }
    365365
    366         // Redirect to BuddyPress about page.
    367         wp_safe_redirect( add_query_arg( $query_args, bp_get_admin_url( 'index.php' ) ) );
     366        // Redirect to dashboard and trigger the Hello screen.
     367        wp_safe_redirect( add_query_arg( $query_args, bp_get_admin_url( '?hello=buddypress' ) ) );
    368368}
    369369
    370370/** UI/Styling ****************************************************************/
    … … function bp_core_get_admin_tabs( $active_tab = '' ) { 
    421421                        'href' => bp_get_admin_url( add_query_arg( array( 'page' => 'bp-components' ), 'admin.php' ) ),
    422422                        'name' => __( 'Components', 'buddypress' )
    423423                ),
     424                '2' => array(
     425                        'href' => bp_get_admin_url( add_query_arg( array( 'page' => 'bp-settings' ), 'admin.php' ) ),
     426                        'name' => __( 'Options', 'buddypress' )
     427                ),
    424428                '1' => array(
    425429                        'href' => bp_get_admin_url( add_query_arg( array( 'page' => 'bp-page-settings' ), 'admin.php' ) ),
    426430                        'name' => __( 'Pages', 'buddypress' )
    427431                ),
    428                 '2' => array(
    429                         'href' => bp_get_admin_url( add_query_arg( array( 'page' => 'bp-settings' ), 'admin.php' ) ),
    430                         'name' => __( 'Options', 'buddypress' )
     432                '3' => array(
     433                        'href' => bp_get_admin_url( add_query_arg( array( 'page' => 'bp-credits' ), 'admin.php' ) ),
     434                        'name' => __( 'Credits', 'buddypress' )
    431435                ),
    432436        );
    433437

  • src/bp-core/admin/css/common-rtl.css 

    diff --git a/src/bp-core/admin/css/common-rtl.css b/src/bp-core/admin/css/common-rtl.css
index 8485c92c2..8df9db450 100644
    a b TABLE OF CONTENTS: 
    1010--------------------------------------------------------------------------------
    11111.0 Welcome Screen
    1212        1.1 Version Badge
    13         1.2 About Panel
    14                 1.2.1 Headline Feature
    15                 1.2.2 Features Section
    16                 1.2.3 Changelog Section
     13        1.2 ---
     14        1.3 Credits Panel
    17152.0 Dashicons
    1816        2.1 Top level menus
    1917        2.2 Settings - Components
    … … TABLE OF CONTENTS: 
    4341        content: "\f448";
    4442}
    4543
    46 .about-wrap .bp-badge {
    47         position: absolute;
    48         top: 0;
    49         left: 0;
    50 }
    51 
    52 .index_page_bp-credits code,
     44.settings_page_bp-credits code,
    5345.index_page_bp-about code {
    5446        background-color: #e0e0e0;
    5547        color: #636363;
    5648        font-size: 1em;
    5749}
    5850
    59 @media only screen and (max-width: 500px) {
    60 
    61         .about-wrap .bp-badge {
    62                 position: relative;
    63                 margin: 10px auto;
    64                 top: auto;
    65                 left: auto;
    66         }
    67 }
    68 
    6951/*
    70  * 1.2 About Panel
     52 * 1.3 Credits Panel
     53 *
     54 * Taken from WP 4.9.5.
    7155 */
    72 
    73 /*
    74  * 1.2.1 Headline Feature
    75  */
    76 .buddypress .bp-headline-feature {
    77         margin-bottom: 2em;
    78         margin-top: 3em;
    79         padding: 2em 3em;
    80 }
    81 
    82 .buddypress .bp-headline {
    83         margin: 0 auto;
    84         width: 45em;
    85 }
    86 
    87 .buddypress .bp-headline span.dashicons {
    88         background-color: #f1f1f1;
    89         color: #d84800;
    90         clear: right;
    91         font-size: 100px;
    92         float: right;
    93         height: 100px;
    94         line-height: 100px;
    95         margin: 0 0 15px 15px;
    96         text-align: center;
    97         width: 100px;
    98 }
    99 
    100 .buddypress .bp-headline-feature .headline-title {
    101         font-size: 2.2em;
    102         font-weight: 300;
    103         line-height: 2;
    104         margin: 0 0 1em;
    105         text-align: center;
    106 }
    107 
    108 .buddypress .bp-headline-feature p {
    109         font-size: 1.15em;
    110         margin: 1.15em 0 0.6em auto;
     56.bp-about-wrap {
     57        position: relative;
     58        max-width: 1050px;
     59        font-size: 15px;
    11160}
    11261
    113 /*
    114  * 1.2.2 Features Section
    115  */
    116 .buddypress .bp-features-section {
    117         border-bottom: 1px solid #ccc;
    118         clear: both;
    119         margin-bottom: 3em;
    120         margin-top: 2em;
    121         overflow: hidden;
    122         padding-bottom: 2em;
     62.bp-about-wrap img {
     63        margin: 0;
     64        max-width: 100%;
     65        height: auto;
     66        vertical-align: middle;
    12367}
    12468
    125 .buddypress .bp-features-section p {
    126         font-size: 14px;
     69.bp-about-wrap p {
    12770        line-height: 1.5;
     71        font-size: 14px;
    12872}
    12973
    130 .buddypress .bp-features-section img {
    131         margin-bottom: 20px;
    132 }
    133 
    134 .buddypress .bp-features-section span.dashicons {
    135         background-color: #fff;
    136         border-radius: 50%;
    137         clear: right;
    138         color: #d84800;
    139         font-size: 50px;
    140         float: right;
    141         height: 80px;
    142         line-height: 80px;
    143         margin: 0 0 15px 15px;
    144         text-align: center;
    145         width: 80px;
    146 }
    147 
    148 .buddypress .bp-features-section .headline-title {
    149         font-size: 2em;
     74.bp-about-wrap h2 {
     75        margin: 40px 0 0.6em;
     76        font-size: 2.7em;
     77        line-height: 1.3;
    15078        font-weight: 300;
    151         line-height: 1.5;
    152         margin: 1em auto 2em;
    15379        text-align: center;
    15480}
    15581
    156 .buddypress .bp-features-section .bp-feature-with-images {
    157         border-bottom: 1px solid #ccc;
    158         margin-bottom: 5em;
    159         padding-bottom: 2em;
    160 }
    161 
    162 .buddypress .bp-features-section .bp-feature,
    163 .buddypress .bp-features-section .bp-feature-imaged {
    164         float: right;
    165         margin-bottom: 3em;
    166         margin-left: 4.799999999%;
    167         width: 47.6%;
    168 }
    169 
    170 .buddypress .bp-features-section .bp-feature.opposite,
    171 .buddypress .bp-features-section .bp-feature-imaged.anon {
    172         margin-left: 0;
    173 }
    174 
    175 .buddypress .bp-features-section .bp-feature code {
    176         font-size: 0.95em;
     82.bp-about-wrap h3 {
     83        margin: 1.25em 0 0.6em;
     84        font-size: 1.4em;
    17785        line-height: 1.5;
    17886}
    17987
    180 .buddypress .bp-feature:after {
    181         clear: both;
    182         content: "";
    183         margin-bottom: 2em;
     88.bp-about-wrap code {
     89        font-size: 14px;
     90        font-weight: 400;
    18491}
    18592
    186 .buddypress .bp-feature-imaged .feature-title {
    187         color: #23282d;
    188         font-size: 1.25em;
    189         margin-bottom: 0.6em;
    190         margin-top: 0;
     93.bp-about-wrap .about-description {
     94        margin-top: 1.4em;
     95        font-weight: 400;
     96        line-height: 1.6;
     97        font-size: 19px;
    19198}
    19299
    193 .buddypress .bp-feature-imaged p {
    194         clear: right;
    195         font-size: 1.1em;
     100.bp-about-wrap h3.wp-people-group {
     101        margin: 2.6em 0 1.33em;
     102        padding: 0;
     103        font-size: 16px;
     104        line-height: inherit;
    196105}
    197106
    198 .buddypress .bp-feature-imaged img {
    199         clear: right;
     107.bp-about-wrap .wp-people-group {
     108        padding: 0 5px;
     109        margin: 0 -5px 0 -15px;
    200110}
    201111
    202 .buddypress .bp-feature .feature-title {
    203         font-size: 1em;
    204         line-height: 1.5;
     112.bp-about-wrap .compact {
    205113        margin-bottom: 0;
    206         margin-right: 110px;
    207         margin-top: 0;
    208         text-align: right;
    209114}
    210115
    211 .buddypress .bp-feature p {
    212         margin-right: 110px;
     116.bp-about-wrap .wp-person {
     117        display: inline-block;
     118        vertical-align: top;
     119        margin-left: 10px;
     120        padding-bottom: 15px;
     121        height: 70px;
     122        width: 280px;
    213123}
    214124
    215 /*
    216  * 1.2.3 Changelog Section
    217  */
    218 .buddypress .bp-changelog-section {
    219         clear: both;
    220         margin-bottom: 3em;
    221         margin-top: 4em;
     125.bp-about-wrap .compact .wp-person {
     126        height: auto;
     127        width: 180px;
    222128        padding-bottom: 0;
     129        margin-bottom: 0;
    223130}
    224131
    225 .buddypress .bp-changelog-section:after {
    226         clear: both;
    227         content: "";
    228         display: table;
    229 }
    230 
    231 .buddypress .bp-changelog-section .changelog-title {
    232         color: #23282d;
    233         font-size: 1.25em;
    234         line-height: 1.5;
    235         margin: 0 auto 1.5em;
    236 }
    237 
    238 .buddypress .bp-two-column div {
    239         float: right;
    240         margin-left: 4.799999999%;
    241         position: relative;
    242         width: 47.6%;
    243 }
    244 
    245 .buddypress .bp-three-column .bp-column {
     132.bp-about-wrap .wp-person .gravatar {
    246133        float: right;
    247         margin-left: 5%;
    248         position: relative;
    249         width: 29.95%;
     134        margin: 0 0 10px 10px;
     135        padding: 1px;
     136        width: 60px;
     137        height: 60px;
    250138}
    251139
    252 .buddypress .bp-two-column .bp-column:nth-of-type(2n),
    253 .buddypress .bp-three-column .bp-column:nth-of-type(3n) {
    254         margin-left: 0;
     140.bp-about-wrap .compact .wp-person .gravatar {
     141        width: 30px;
     142        height: 30px;
    255143}
    256144
    257 .buddypress .bp-changelog {
    258         margin-bottom: 3em;
    259 }
    260 
    261 .buddypress .bp-changelog:after {
    262         clear: both;
    263         content: "";
    264         display: table;
    265 }
    266 
    267 .buddypress .bp-changelog .title {
    268         font-size: 14px;
    269         margin-bottom: 0.75em;
    270         margin-top: 0;
     145.bp-about-wrap .wp-person .web {
     146        margin: 6px 0 2px;
     147        font-size: 16px;
     148        font-weight: 400;
     149        line-height: 2;
     150        text-decoration: none;
    271151}
    272152
    273 .buddypress .bp-changelog p {
    274         margin-bottom: 0;
     153.bp-about-wrap .wp-person .title {
     154        display: block;
    275155}
    276156
    277 .bp-changelog-url {
    278         text-align: center;
     157.bp-about-wrap p.wp-credits-list a {
     158        white-space: nowrap;
    279159}
    280160
    281 .bp-assets {
    282         clear: both;
    283         margin-bottom: 3em;
    284 }
    285 
    286 @media screen and ( max-width: 782px ) {
     161@media only screen and (max-width: 500px) {
    287162
    288         .bp-headline-feature,
    289         .bp-features-section,
    290         .bp-changelog-section,
    291         .bp-assets {
    292                 margin-right: 20px;
     163        .bp-about-wrap {
    293164                margin-left: 20px;
     165                margin-right: 10px;
    294166        }
    295167
    296         .buddypress .bp-headline-feature {
    297                 padding: 0;
    298         }
    299 
    300         .buddypress .bp-headline {
    301                 margin: 0;
    302                 width: 97%;
    303         }
    304 
    305         .buddypress .bp-features-section {
    306                 clear: both;
    307                 margin-bottom: 0;
    308                 margin-top: 2em;
    309                 padding-bottom: 2em;
    310         }
    311 
    312         .buddypress .bp-features-section .bp-feature-with-images {
    313                 margin-bottom: 2em;
    314         }
    315 
    316         .buddypress .bp-features-section .headline-title {
    317                 margin-bottom: 1em;
    318         }
    319 
    320         .buddypress .bp-changelog-section .changelog-title {
    321                 font-size: 1.25em;
    322                 line-height: 1.5;
    323                 margin-bottom: 0.5em;
    324                 margin-top: 0.5em;
    325         }
    326 
    327         .buddypress .bp-features-section .feature-title,
    328         .buddypress .bp-changelog-section .title {
    329                 font-size: 1.25em;
    330                 line-height: 1.25;
    331                 margin-top: 0.6em;
    332                 text-align: right;
    333         }
    334 
    335         .buddypress .bp-features-section .bp-feature,
    336         .buddypress .bp-features-section .bp-feature-imaged {
    337                 clear: both;
    338                 float: right;
    339                 margin-bottom: 1em;
    340                 margin-top: 1em;
     168        .bp-about-wrap .bp-about-wrap h1 {
    341169                margin-left: 0;
    342                 padding-left: 1em;
    343                 width: 100%;
    344         }
    345 
    346         .buddypress .bp-features-section .bp-feature-imaged p {
    347                 font-size: 1em;
    348         }
    349 
    350         .buddypress .bp-features-section .bp-feature span {
    351                 margin-top: 0.33em;
    352         }
    353 
    354         .buddypress .bp-feature.opposite .feature-title,
    355         .buddypress .bp-feature.opposite p {
    356                 float: none;
    357         }
    358 
    359         .buddypress .bp-changelog-section {
    360                 clear: both;
    361                 margin-bottom: 2em;
    362                 margin-top: 2em;
    363         }
    364 
    365         .buddypress .bp-changelog {
    366                 margin-bottom: 0;
    367         }
    368 
    369         .buddypress .bp-changelog-section .changelog-title {
    370                 margin-bottom: 0.5em;
    371         }
    372 
    373         .buddypress .bp-changelog .title {
    374                 font-size: 1em;
    375         }
    376 
    377         .buddypress .bp-changelog p {
    378                 margin-bottom: 1em;
    379         }
    380 
    381         .buddypress .bp-changelog-section .two-col > div,
    382         .buddypress .bp-changelog-section .three-col .col {
    383                 margin-top: 0;
    384                 padding-bottom: 0.5em;
    385                 width: 100%;
    386         }
    387 
    388         .buddypress .bp-three-column .bp-column {
    389                 width: 100%;
    390         }
    391 }
    392 
    393 @media screen and ( max-width: 360px ) {
    394 
    395         .buddypress .bp-headline {
    396                 text-align: center;
    397         }
    398 
    399         .buddypress .bp-headline span.dashicons {
    400                 clear: none;
    401                 font-size: 80px;
    402                 float: none;
    403                 height: 80px;
    404                 line-height: 80px;
    405                 margin: 0 auto;
    406                 width: 80px;
    407         }
    408 
    409         .buddypress .bp-headline-feature .headline-title,
    410         .buddypress .bp-features-section .headline-title {
    411                 font-size: 1.5em;
    412                 line-height: 1.5;
    413                 text-align: right;
    414         }
    415 
    416         .buddypress .bp-headline-feature .headline-title {
    417                 margin: 1em 0 0;
    418         }
    419 
    420         .buddypress .bp-headline-feature p {
    421                 margin: 1.15em 0 0.6em auto;
    422                 text-align: right;
    423                 width: auto;
    424         }
    425 
    426         .buddypress .bp-features-section .bp-feature {
    427                 text-align: center;
    428         }
    429 
    430         .buddypress .bp-features-section span.dashicons {
    431                 float: none;
    432         }
    433 
    434         .buddypress .bp-features-section .feature-title,
    435         .buddypress .bp-features-section p {
    436                 margin-right: 0;
    437                 text-align: right;
    438170        }
    439171}
    440172

  • src/bp-core/admin/css/common.css 

    diff --git a/src/bp-core/admin/css/common.css b/src/bp-core/admin/css/common.css
index ce7e31242..b1c8d945a 100644
    a b TABLE OF CONTENTS: 
    1010--------------------------------------------------------------------------------
    11111.0 Welcome Screen
    1212        1.1 Version Badge
    13         1.2 About Panel
    14                 1.2.1 Headline Feature
    15                 1.2.2 Features Section
    16                 1.2.3 Changelog Section
     13        1.2 ---
     14        1.3 Credits Panel
    17152.0 Dashicons
    1816        2.1 Top level menus
    1917        2.2 Settings - Components
    … … TABLE OF CONTENTS: 
    4341        content: "\f448";
    4442}
    4543
    46 .about-wrap .bp-badge {
    47         position: absolute;
    48         top: 0;
    49         right: 0;
    50 }
    51 
    52 .index_page_bp-credits code,
     44.settings_page_bp-credits code,
    5345.index_page_bp-about code {
    5446        background-color: #e0e0e0;
    5547        color: #636363;
    5648        font-size: 1em;
    5749}
    5850
    59 @media only screen and (max-width: 500px) {
    60 
    61         .about-wrap .bp-badge {
    62                 position: relative;
    63                 margin: 10px auto;
    64                 top: auto;
    65                 right: auto;
    66         }
    67 }
    68 
    6951/*
    70  * 1.2 About Panel
     52 * 1.3 Credits Panel
     53 *
     54 * Taken from WP 4.9.5.
    7155 */
    72 
    73 /*
    74  * 1.2.1 Headline Feature
    75  */
    76 .buddypress .bp-headline-feature {
    77         margin-bottom: 2em;
    78         margin-top: 3em;
    79         padding: 2em 3em;
    80 }
    81 
    82 .buddypress .bp-headline {
    83         margin: 0 auto;
    84         width: 45em;
    85 }
    86 
    87 .buddypress .bp-headline span.dashicons {
    88         background-color: #f1f1f1;
    89         color: #d84800;
    90         clear: left;
    91         font-size: 100px;
    92         float: left;
    93         height: 100px;
    94         line-height: 100px;
    95         margin: 0 15px 15px 0;
    96         text-align: center;
    97         width: 100px;
    98 }
    99 
    100 .buddypress .bp-headline-feature .headline-title {
    101         font-size: 2.2em;
    102         font-weight: 300;
    103         line-height: 2;
    104         margin: 0 0 1em;
    105         text-align: center;
    106 }
    107 
    108 .buddypress .bp-headline-feature p {
    109         font-size: 1.15em;
    110         margin: 1.15em auto 0.6em 0;
     56.bp-about-wrap {
     57        position: relative;
     58        max-width: 1050px;
     59        font-size: 15px;
    11160}
    11261
    113 /*
    114  * 1.2.2 Features Section
    115  */
    116 .buddypress .bp-features-section {
    117         border-bottom: 1px solid #ccc;
    118         clear: both;
    119         margin-bottom: 3em;
    120         margin-top: 2em;
    121         overflow: hidden;
    122         padding-bottom: 2em;
     62.bp-about-wrap img {
     63        margin: 0;
     64        max-width: 100%;
     65        height: auto;
     66        vertical-align: middle;
    12367}
    12468
    125 .buddypress .bp-features-section p {
    126         font-size: 14px;
     69.bp-about-wrap p {
    12770        line-height: 1.5;
     71        font-size: 14px;
    12872}
    12973
    130 .buddypress .bp-features-section img {
    131         margin-bottom: 20px;
    132 }
    133 
    134 .buddypress .bp-features-section span.dashicons {
    135         background-color: #fff;
    136         border-radius: 50%;
    137         clear: left;
    138         color: #d84800;
    139         font-size: 50px;
    140         float: left;
    141         height: 80px;
    142         line-height: 80px;
    143         margin: 0 15px 15px 0;
    144         text-align: center;
    145         width: 80px;
    146 }
    147 
    148 .buddypress .bp-features-section .headline-title {
    149         font-size: 2em;
     74.bp-about-wrap h2 {
     75        margin: 40px 0 0.6em;
     76        font-size: 2.7em;
     77        line-height: 1.3;
    15078        font-weight: 300;
    151         line-height: 1.5;
    152         margin: 1em auto 2em;
    15379        text-align: center;
    15480}
    15581
    156 .buddypress .bp-features-section .bp-feature-with-images {
    157         border-bottom: 1px solid #ccc;
    158         margin-bottom: 5em;
    159         padding-bottom: 2em;
    160 }
    161 
    162 .buddypress .bp-features-section .bp-feature,
    163 .buddypress .bp-features-section .bp-feature-imaged {
    164         float: left;
    165         margin-bottom: 3em;
    166         margin-right: 4.799999999%;
    167         width: 47.6%;
    168 }
    169 
    170 .buddypress .bp-features-section .bp-feature.opposite,
    171 .buddypress .bp-features-section .bp-feature-imaged.anon {
    172         margin-right: 0;
    173 }
    174 
    175 .buddypress .bp-features-section .bp-feature code {
    176         font-size: 0.95em;
     82.bp-about-wrap h3 {
     83        margin: 1.25em 0 0.6em;
     84        font-size: 1.4em;
    17785        line-height: 1.5;
    17886}
    17987
    180 .buddypress .bp-feature:after {
    181         clear: both;
    182         content: "";
    183         margin-bottom: 2em;
     88.bp-about-wrap code {
     89        font-size: 14px;
     90        font-weight: 400;
    18491}
    18592
    186 .buddypress .bp-feature-imaged .feature-title {
    187         color: #23282d;
    188         font-size: 1.25em;
    189         margin-bottom: 0.6em;
    190         margin-top: 0;
     93.bp-about-wrap .about-description {
     94        margin-top: 1.4em;
     95        font-weight: 400;
     96        line-height: 1.6;
     97        font-size: 19px;
    19198}
    19299
    193 .buddypress .bp-feature-imaged p {
    194         clear: left;
    195         font-size: 1.1em;
     100.bp-about-wrap h3.wp-people-group {
     101        margin: 2.6em 0 1.33em;
     102        padding: 0;
     103        font-size: 16px;
     104        line-height: inherit;
    196105}
    197106
    198 .buddypress .bp-feature-imaged img {
    199         clear: left;
     107.bp-about-wrap .wp-people-group {
     108        padding: 0 5px;
     109        margin: 0 -15px 0 -5px;
    200110}
    201111
    202 .buddypress .bp-feature .feature-title {
    203         font-size: 1em;
    204         line-height: 1.5;
     112.bp-about-wrap .compact {
    205113        margin-bottom: 0;
    206         margin-left: 110px;
    207         margin-top: 0;
    208         text-align: left;
    209114}
    210115
    211 .buddypress .bp-feature p {
    212         margin-left: 110px;
     116.bp-about-wrap .wp-person {
     117        display: inline-block;
     118        vertical-align: top;
     119        margin-right: 10px;
     120        padding-bottom: 15px;
     121        height: 70px;
     122        width: 280px;
    213123}
    214124
    215 /*
    216  * 1.2.3 Changelog Section
    217  */
    218 .buddypress .bp-changelog-section {
    219         clear: both;
    220         margin-bottom: 3em;
    221         margin-top: 4em;
     125.bp-about-wrap .compact .wp-person {
     126        height: auto;
     127        width: 180px;
    222128        padding-bottom: 0;
     129        margin-bottom: 0;
    223130}
    224131
    225 .buddypress .bp-changelog-section:after {
    226         clear: both;
    227         content: "";
    228         display: table;
    229 }
    230 
    231 .buddypress .bp-changelog-section .changelog-title {
    232         color: #23282d;
    233         font-size: 1.25em;
    234         line-height: 1.5;
    235         margin: 0 auto 1.5em;
    236 }
    237 
    238 .buddypress .bp-two-column div {
    239         float: left;
    240         margin-right: 4.799999999%;
    241         position: relative;
    242         width: 47.6%;
    243 }
    244 
    245 .buddypress .bp-three-column .bp-column {
     132.bp-about-wrap .wp-person .gravatar {
    246133        float: left;
    247         margin-right: 5%;
    248         position: relative;
    249         width: 29.95%;
     134        margin: 0 10px 10px 0;
     135        padding: 1px;
     136        width: 60px;
     137        height: 60px;
    250138}
    251139
    252 .buddypress .bp-two-column .bp-column:nth-of-type(2n),
    253 .buddypress .bp-three-column .bp-column:nth-of-type(3n) {
    254         margin-right: 0;
     140.bp-about-wrap .compact .wp-person .gravatar {
     141        width: 30px;
     142        height: 30px;
    255143}
    256144
    257 .buddypress .bp-changelog {
    258         margin-bottom: 3em;
    259 }
    260 
    261 .buddypress .bp-changelog:after {
    262         clear: both;
    263         content: "";
    264         display: table;
    265 }
    266 
    267 .buddypress .bp-changelog .title {
    268         font-size: 14px;
    269         margin-bottom: 0.75em;
    270         margin-top: 0;
     145.bp-about-wrap .wp-person .web {
     146        margin: 6px 0 2px;
     147        font-size: 16px;
     148        font-weight: 400;
     149        line-height: 2;
     150        text-decoration: none;
    271151}
    272152
    273 .buddypress .bp-changelog p {
    274         margin-bottom: 0;
     153.bp-about-wrap .wp-person .title {
     154        display: block;
    275155}
    276156
    277 .bp-changelog-url {
    278         text-align: center;
     157.bp-about-wrap p.wp-credits-list a {
     158        white-space: nowrap;
    279159}
    280160
    281 .bp-assets {
    282         clear: both;
    283         margin-bottom: 3em;
    284 }
    285 
    286 @media screen and ( max-width: 782px ) {
     161@media only screen and (max-width: 500px) {
    287162
    288         .bp-headline-feature,
    289         .bp-features-section,
    290         .bp-changelog-section,
    291         .bp-assets {
    292                 margin-left: 20px;
     163        .bp-about-wrap {
    293164                margin-right: 20px;
     165                margin-left: 10px;
    294166        }
    295167
    296         .buddypress .bp-headline-feature {
    297                 padding: 0;
    298         }
    299 
    300         .buddypress .bp-headline {
    301                 margin: 0;
    302                 width: 97%;
    303         }
    304 
    305         .buddypress .bp-features-section {
    306                 clear: both;
    307                 margin-bottom: 0;
    308                 margin-top: 2em;
    309                 padding-bottom: 2em;
    310         }
    311 
    312         .buddypress .bp-features-section .bp-feature-with-images {
    313                 margin-bottom: 2em;
    314         }
    315 
    316         .buddypress .bp-features-section .headline-title {
    317                 margin-bottom: 1em;
    318         }
    319 
    320         .buddypress .bp-changelog-section .changelog-title {
    321                 font-size: 1.25em;
    322                 line-height: 1.5;
    323                 margin-bottom: 0.5em;
    324                 margin-top: 0.5em;
    325         }
    326 
    327         .buddypress .bp-features-section .feature-title,
    328         .buddypress .bp-changelog-section .title {
    329                 font-size: 1.25em;
    330                 line-height: 1.25;
    331                 margin-top: 0.6em;
    332                 text-align: left;
    333         }
    334 
    335         .buddypress .bp-features-section .bp-feature,
    336         .buddypress .bp-features-section .bp-feature-imaged {
    337                 clear: both;
    338                 float: left;
    339                 margin-bottom: 1em;
    340                 margin-top: 1em;
     168        .bp-about-wrap .bp-about-wrap h1 {
    341169                margin-right: 0;
    342                 padding-right: 1em;
    343                 width: 100%;
    344         }
    345 
    346         .buddypress .bp-features-section .bp-feature-imaged p {
    347                 font-size: 1em;
    348         }
    349 
    350         .buddypress .bp-features-section .bp-feature span {
    351                 margin-top: 0.33em;
    352         }
    353 
    354         .buddypress .bp-feature.opposite .feature-title,
    355         .buddypress .bp-feature.opposite p {
    356                 float: none;
    357         }
    358 
    359         .buddypress .bp-changelog-section {
    360                 clear: both;
    361                 margin-bottom: 2em;
    362                 margin-top: 2em;
    363         }
    364 
    365         .buddypress .bp-changelog {
    366                 margin-bottom: 0;
    367         }
    368 
    369         .buddypress .bp-changelog-section .changelog-title {
    370                 margin-bottom: 0.5em;
    371         }
    372 
    373         .buddypress .bp-changelog .title {
    374                 font-size: 1em;
    375         }
    376 
    377         .buddypress .bp-changelog p {
    378                 margin-bottom: 1em;
    379         }
    380 
    381         .buddypress .bp-changelog-section .two-col > div,
    382         .buddypress .bp-changelog-section .three-col .col {
    383                 margin-top: 0;
    384                 padding-bottom: 0.5em;
    385                 width: 100%;
    386         }
    387 
    388         .buddypress .bp-three-column .bp-column {
    389                 width: 100%;
    390         }
    391 }
    392 
    393 @media screen and ( max-width: 360px ) {
    394 
    395         .buddypress .bp-headline {
    396                 text-align: center;
    397         }
    398 
    399         .buddypress .bp-headline span.dashicons {
    400                 clear: none;
    401                 font-size: 80px;
    402                 float: none;
    403                 height: 80px;
    404                 line-height: 80px;
    405                 margin: 0 auto;
    406                 width: 80px;
    407         }
    408 
    409         .buddypress .bp-headline-feature .headline-title,
    410         .buddypress .bp-features-section .headline-title {
    411                 font-size: 1.5em;
    412                 line-height: 1.5;
    413                 text-align: left;
    414         }
    415 
    416         .buddypress .bp-headline-feature .headline-title {
    417                 margin: 1em 0 0;
    418         }
    419 
    420         .buddypress .bp-headline-feature p {
    421                 margin: 1.15em auto 0.6em 0;
    422                 text-align: left;
    423                 width: auto;
    424         }
    425 
    426         .buddypress .bp-features-section .bp-feature {
    427                 text-align: center;
    428         }
    429 
    430         .buddypress .bp-features-section span.dashicons {
    431                 float: none;
    432         }
    433 
    434         .buddypress .bp-features-section .feature-title,
    435         .buddypress .bp-features-section p {
    436                 margin-left: 0;
    437                 text-align: left;
    438170        }
    439171}
    440172

  • new file src/bp-core/admin/css/hello-rtl.css 

    diff --git a/src/bp-core/admin/css/hello-rtl.css b/src/bp-core/admin/css/hello-rtl.css
new file mode 100644
index 000000000..5c51a1b10
    - +  
     1/*------------------------------------------------------------------------------
     2Loaded in wp-admin for query string `hello=buddypress`.
     3
     4@since 3.0.0
     5
     6--------------------------------------------------------------------------------
     7TABLE OF CONTENTS:
     8--------------------------------------------------------------------------------
     91.0 - Typography and colour
     102.0 - Dashicons
     113.0 - Elements
     12        3.1 - Backdrop and container
     13        3.2 - Modal footer
     14        3.3 - Modal header
     15        3.4 - Modal content
     164.0 - Content styles
     17        4.1 - Backdrop and container
     18        4.2 - Footer content
     19        4.3 - Header content
     20        4.4 - Content content
     215.0 - Media
     226.0 - Media Queries
     23        6.1 - Desktop Medium
     24        6.2 - Desktop Large
     25------------------------------------------------------------------------------*/
     26/*------------------------------------------------------------------------------
     27 * 1.0 - Typography and colour
     28 *----------------------------------------------------------------------------*/
     29:root {
     30        --bp-hello-color-primary: #d34600;
     31        --bp-hello-color-secondary: #e5e5e5;
     32        --bp-hello-container-size: 15%;
     33}
     34
     35#bp-hello-container a {
     36        color: var(--bp-hello-color-primary);
     37}
     38
     39#bp-hello-container a:hover {
     40        transition: all 0.1s ease-in-out;
     41        color: black;
     42}
     43
     44#bp-hello-container .bp-hello-header h1 {
     45        line-height: 1.7;
     46        font-size: 21px;
     47        font-weight: 400;
     48}
     49
     50.bp-hello-content p {
     51        font-size: 16px;
     52}
     53
     54/*------------------------------------------------------------------------------
     55 * 2.0 - Dashicons
     56 *----------------------------------------------------------------------------*/
     57.bp-hello-close a:hover:before {
     58        transition: all 0.1s ease-in-out;
     59        color: var(--bp-hello-color-primary);
     60}
     61
     62.bp-hello-close a.close-modal:before {
     63        content: "\f158";
     64        color: #23282d;
     65        /* wp toolbar */
     66        font: 400 35px/1 dashicons;
     67        speak: none;
     68        -webkit-font-smoothing: antialiased;
     69        -moz-osx-font-smoothing: grayscale;
     70        background-image: none !important;
     71}
     72
     73.bp-hello-social li a:before {
     74        color: #23282d;
     75        /* wp toolbar */
     76        font: 400 30px/0.6 dashicons;
     77        speak: none;
     78        -webkit-font-smoothing: antialiased;
     79        -moz-osx-font-smoothing: grayscale;
     80        background-image: none !important;
     81}
     82
     83.bp-hello-social li a:hover:before {
     84        transition: all 0.1s ease-in-out;
     85        color: var(--bp-hello-color-primary);
     86}
     87
     88.bp-hello-social li a.support:before {
     89        content: "\f448";
     90}
     91
     92.bp-hello-social li a.twitter:before {
     93        content: "\f301";
     94}
     95
     96/*------------------------------------------------------------------------------
     97 * 3.0 - Elements
     98 *----------------------------------------------------------------------------*/
     99/*
     100 * 3.1 - Backdrop and container
     101 */
     102#bp-hello-backdrop {
     103        position: fixed;
     104        top: 0;
     105        right: 0;
     106        left: 0;
     107        bottom: 0;
     108        z-index: 9998;
     109        display: none;
     110}
     111
     112#bp-hello-container {
     113        position: fixed;
     114        top: 0;
     115        bottom: 80px;
     116        z-index: 99999;
     117}
     118
     119.bp-disable-scroll {
     120        overflow: hidden;
     121}
     122
     123/*
     124 * 3.2 - Modal footer
     125 */
     126.bp-hello-footer {
     127        display: flex;
     128        flex-wrap: wrap;
     129        height: 58px;
     130        max-height: 58px;
     131}
     132
     133.bp-hello-social-cta,
     134.bp-hello-social-links {
     135        flex-basis: 50%;
     136}
     137
     138.bp-hello-social-links ul {
     139        display: inline-block;
     140}
     141
     142.bp-hello-social li {
     143        position: relative;
     144        bottom: -5px;
     145        display: inline-block;
     146        list-style-type: none;
     147        margin-bottom: 0;
     148}
     149
     150.bp-hello-social li:last-child a {
     151        margin-right: 4px;
     152}
     153
     154/*
     155 * 3.3 - Modal header
     156 */
     157.bp-hello-header {
     158        height: 58px;
     159        max-height: 58px;
     160}
     161
     162/*
     163 * 3.4 - Modal content
     164 */
     165.bp-hello-content {
     166        padding: 0 25px;
     167        height: calc(100% - 58px);
     168        overflow-y: auto;
     169        -webkit-overflow-scrolling: touch;
     170}
     171
     172/*------------------------------------------------------------------------------
     173 * 4.0 - Content styles
     174 *----------------------------------------------------------------------------*/
     175/*
     176 * 4.1 - Backdrop and container
     177 */
     178#bp-hello-backdrop {
     179        background-color: rgba(0, 0, 0, 0.8);
     180        transition: opacity 0.15s ease-out;
     181}
     182
     183#bp-hello-container {
     184        background-color: white;
     185}
     186
     187/*
     188 * 4.2 - Footer content
     189 */
     190.bp-hello-footer {
     191        border-radius: 0 0 3px 3px;
     192        background-color: white;
     193        border-top: 1px solid var(--bp-hello-color-secondary);
     194        padding: 6px 25px;
     195}
     196
     197.bp-hello-footer p {
     198        font-size: 15px;
     199}
     200
     201.bp-hello-social-cta {
     202        text-align: right;
     203}
     204
     205.bp-hello-social-links {
     206        text-align: left;
     207}
     208
     209.bp-hello-social li a {
     210        text-decoration: none;
     211}
     212
     213/*
     214 * 4.3 - Header content
     215 */
     216.bp-hello-header {
     217        padding: 6px 25px;
     218}
     219
     220.bp-hello-header h1 {
     221        width: calc(100% - 51px);
     222}
     223
     224#bp-hello-container .bp-hello-header {
     225        border-bottom: 1px solid var(--bp-hello-color-secondary);
     226}
     227
     228.bp-hello-title {
     229        text-align: right;
     230}
     231
     232.bp-hello-close {
     233        position: absolute;
     234        top: 20px;
     235        left: 25px;
     236        text-align: left;
     237}
     238
     239.bp-hello-close a {
     240        text-decoration: none;
     241}
     242
     243/*
     244 * 4.4 - Content content
     245 */
     246.bp-hello-content {
     247        background-color: white;
     248}
     249
     250/*------------------------------------------------------------------------------
     251 * 5.0 - Media
     252 *----------------------------------------------------------------------------*/
     253.bp-hello-content img {
     254        border-radius: 2px;
     255        max-width: 100%;
     256}
     257
     258/*------------------------------------------------------------------------------
     259 * 6.0 - Media Queries
     260 *----------------------------------------------------------------------------*/
     261/*
     262 * 6.1 - Desktop Medium
     263 */
     264@media only screen and (min-width: 1024px) {
     265        #bp-hello-backdrop {
     266                display: block;
     267        }
     268        #bp-hello-container {
     269                position: fixed;
     270                top: 60px;
     271                right: var(--bp-hello-container-size);
     272                left: var(--bp-hello-container-size);
     273                bottom: 30px;
     274                border-radius: 3px;
     275        }
     276        #bp-hello-container .bp-hello-header h1 {
     277                line-height: inherit;
     278        }
     279        .bp-hello-header {
     280                height: auto;
     281                max-height: inherit;
     282                padding: 6px 30px;
     283        }
     284        .bp-hello-close {
     285                left: 30px;
     286        }
     287        .bp-hello-close a.close-modal:before {
     288                line-height: 0.7;
     289        }
     290        .bp-hello-footer {
     291                position: fixed;
     292                right: var(--bp-hello-container-size);
     293                left: var(--bp-hello-container-size);
     294                bottom: 30px;
     295                z-index: 10000;
     296                height: auto;
     297                max-height: inherit;
     298                padding: 6px 30px;
     299        }
     300        .bp-hello-content {
     301                height: calc(100% - 90px);
     302                padding: 0 30px;
     303        }
     304        .bp-hello-content p {
     305                font-size: 14px;
     306        }
     307}
     308
     309/**
     310 * 6.2 - Desktop Large
     311 */
     312@media screen and (min-width: 1280px) {
     313        #bp-hello-container,
     314        .bp-hello-footer {
     315                right: calc((100% - 896px) / 2);
     316                left: calc((100% - 896px) / 2);
     317        }
     318}

  • new file src/bp-core/admin/css/hello.css 

    diff --git a/src/bp-core/admin/css/hello.css b/src/bp-core/admin/css/hello.css
new file mode 100644
index 000000000..56b4681f6
    - +  
     1/*------------------------------------------------------------------------------
     2Loaded in wp-admin for query string `hello=buddypress`.
     3
     4@since 3.0.0
     5
     6--------------------------------------------------------------------------------
     7TABLE OF CONTENTS:
     8--------------------------------------------------------------------------------
     91.0 - Typography and colour
     102.0 - Dashicons
     113.0 - Elements
     12        3.1 - Backdrop and container
     13        3.2 - Modal footer
     14        3.3 - Modal header
     15        3.4 - Modal content
     164.0 - Content styles
     17        4.1 - Backdrop and container
     18        4.2 - Footer content
     19        4.3 - Header content
     20        4.4 - Content content
     215.0 - Media
     226.0 - Media Queries
     23        6.1 - Desktop Medium
     24        6.2 - Desktop Large
     25------------------------------------------------------------------------------*/
     26/*------------------------------------------------------------------------------
     27 * 1.0 - Typography and colour
     28 *----------------------------------------------------------------------------*/
     29:root {
     30        --bp-hello-color-primary: #d34600;
     31        --bp-hello-color-secondary: #e5e5e5;
     32        --bp-hello-container-size: 15%;
     33}
     34
     35#bp-hello-container a {
     36        color: var(--bp-hello-color-primary);
     37}
     38
     39#bp-hello-container a:hover {
     40        transition: all 0.1s ease-in-out;
     41        color: black;
     42}
     43
     44#bp-hello-container .bp-hello-header h1 {
     45        line-height: 1.7;
     46        font-size: 21px;
     47        font-weight: 400;
     48}
     49
     50.bp-hello-content p {
     51        font-size: 16px;
     52}
     53
     54/*------------------------------------------------------------------------------
     55 * 2.0 - Dashicons
     56 *----------------------------------------------------------------------------*/
     57.bp-hello-close a:hover:before {
     58        transition: all 0.1s ease-in-out;
     59        color: var(--bp-hello-color-primary);
     60}
     61
     62.bp-hello-close a.close-modal:before {
     63        content: "\f158";
     64        color: #23282d;
     65        /* wp toolbar */
     66        font: 400 35px/1 dashicons;
     67        speak: none;
     68        -webkit-font-smoothing: antialiased;
     69        -moz-osx-font-smoothing: grayscale;
     70        background-image: none !important;
     71}
     72
     73.bp-hello-social li a:before {
     74        color: #23282d;
     75        /* wp toolbar */
     76        font: 400 30px/0.6 dashicons;
     77        speak: none;
     78        -webkit-font-smoothing: antialiased;
     79        -moz-osx-font-smoothing: grayscale;
     80        background-image: none !important;
     81}
     82
     83.bp-hello-social li a:hover:before {
     84        transition: all 0.1s ease-in-out;
     85        color: var(--bp-hello-color-primary);
     86}
     87
     88.bp-hello-social li a.support:before {
     89        content: "\f448";
     90}
     91
     92.bp-hello-social li a.twitter:before {
     93        content: "\f301";
     94}
     95
     96/*------------------------------------------------------------------------------
     97 * 3.0 - Elements
     98 *----------------------------------------------------------------------------*/
     99/*
     100 * 3.1 - Backdrop and container
     101 */
     102#bp-hello-backdrop {
     103        position: fixed;
     104        top: 0;
     105        left: 0;
     106        right: 0;
     107        bottom: 0;
     108        z-index: 9998;
     109        display: none;
     110}
     111
     112#bp-hello-container {
     113        position: fixed;
     114        top: 0;
     115        bottom: 80px;
     116        z-index: 99999;
     117}
     118
     119.bp-disable-scroll {
     120        overflow: hidden;
     121}
     122
     123/*
     124 * 3.2 - Modal footer
     125 */
     126.bp-hello-footer {
     127        display: flex;
     128        flex-wrap: wrap;
     129        height: 58px;
     130        max-height: 58px;
     131}
     132
     133.bp-hello-social-cta,
     134.bp-hello-social-links {
     135        flex-basis: 50%;
     136}
     137
     138.bp-hello-social-links ul {
     139        display: inline-block;
     140}
     141
     142.bp-hello-social li {
     143        position: relative;
     144        bottom: -5px;
     145        display: inline-block;
     146        list-style-type: none;
     147        margin-bottom: 0;
     148}
     149
     150.bp-hello-social li:last-child a {
     151        margin-left: 4px;
     152}
     153
     154/*
     155 * 3.3 - Modal header
     156 */
     157.bp-hello-header {
     158        height: 58px;
     159        max-height: 58px;
     160}
     161
     162/*
     163 * 3.4 - Modal content
     164 */
     165.bp-hello-content {
     166        padding: 0 25px;
     167        height: calc(100% - 58px);
     168        overflow-y: auto;
     169        -webkit-overflow-scrolling: touch;
     170}
     171
     172/*------------------------------------------------------------------------------
     173 * 4.0 - Content styles
     174 *----------------------------------------------------------------------------*/
     175/*
     176 * 4.1 - Backdrop and container
     177 */
     178#bp-hello-backdrop {
     179        background-color: rgba(0, 0, 0, 0.8);
     180        transition: opacity 0.15s ease-out;
     181}
     182
     183#bp-hello-container {
     184        background-color: white;
     185}
     186
     187/*
     188 * 4.2 - Footer content
     189 */
     190.bp-hello-footer {
     191        border-radius: 0 0 3px 3px;
     192        background-color: white;
     193        border-top: 1px solid var(--bp-hello-color-secondary);
     194        padding: 6px 25px;
     195}
     196
     197.bp-hello-footer p {
     198        font-size: 15px;
     199}
     200
     201.bp-hello-social-cta {
     202        text-align: left;
     203}
     204
     205.bp-hello-social-links {
     206        text-align: right;
     207}
     208
     209.bp-hello-social li a {
     210        text-decoration: none;
     211}
     212
     213/*
     214 * 4.3 - Header content
     215 */
     216.bp-hello-header {
     217        padding: 6px 25px;
     218}
     219
     220.bp-hello-header h1 {
     221        width: calc(100% - 51px);
     222}
     223
     224#bp-hello-container .bp-hello-header {
     225        border-bottom: 1px solid var(--bp-hello-color-secondary);
     226}
     227
     228.bp-hello-title {
     229        text-align: left;
     230}
     231
     232.bp-hello-close {
     233        position: absolute;
     234        top: 20px;
     235        right: 25px;
     236        text-align: right;
     237}
     238
     239.bp-hello-close a {
     240        text-decoration: none;
     241}
     242
     243/*
     244 * 4.4 - Content content
     245 */
     246.bp-hello-content {
     247        background-color: white;
     248}
     249
     250/*------------------------------------------------------------------------------
     251 * 5.0 - Media
     252 *----------------------------------------------------------------------------*/
     253.bp-hello-content img {
     254        border-radius: 2px;
     255        max-width: 100%;
     256}
     257
     258/*------------------------------------------------------------------------------
     259 * 6.0 - Media Queries
     260 *----------------------------------------------------------------------------*/
     261/*
     262 * 6.1 - Desktop Medium
     263 */
     264@media only screen and (min-width: 1024px) {
     265        #bp-hello-backdrop {
     266                display: block;
     267        }
     268        #bp-hello-container {
     269                position: fixed;
     270                top: 60px;
     271                left: var(--bp-hello-container-size);
     272                right: var(--bp-hello-container-size);
     273                bottom: 30px;
     274                border-radius: 3px;
     275        }
     276        #bp-hello-container .bp-hello-header h1 {
     277                line-height: inherit;
     278        }
     279        .bp-hello-header {
     280                height: auto;
     281                max-height: inherit;
     282                padding: 6px 30px;
     283        }
     284        .bp-hello-close {
     285                right: 30px;
     286        }
     287        .bp-hello-close a.close-modal:before {
     288                line-height: 0.7;
     289        }
     290        .bp-hello-footer {
     291                position: fixed;
     292                left: var(--bp-hello-container-size);
     293                right: var(--bp-hello-container-size);
     294                bottom: 30px;
     295                z-index: 10000;
     296                height: auto;
     297                max-height: inherit;
     298                padding: 6px 30px;
     299        }
     300        .bp-hello-content {
     301                height: calc(100% - 90px);
     302                padding: 0 30px;
     303        }
     304        .bp-hello-content p {
     305                font-size: 14px;
     306        }
     307}
     308
     309/**
     310 * 6.2 - Desktop Large
     311 */
     312@media screen and (min-width: 1280px) {
     313        #bp-hello-container,
     314        .bp-hello-footer {
     315                left: calc((100% - 896px) / 2);
     316                right: calc((100% - 896px) / 2);
     317        }
     318}

  • new file src/bp-core/admin/js/hello.js 

    diff --git a/src/bp-core/admin/js/hello.js b/src/bp-core/admin/js/hello.js
new file mode 100644
index 000000000..26c5a0e0e
    - +  
     1/**
     2 * Loads for BuddyPress Hello in wp-admin for query string `hello=buddypress`.
     3 *
     4 * @since 3.0.0
     5 */
     6(function() {
     7        /**
     8         * Open the BuddyPress Hello modal.
     9         */
     10        var bp_hello_open_modal = function() {
     11                document.body.classList.add( 'bp-disable-scroll' );
     12
     13                // Show.
     14                document.getElementById( 'bp-hello-backdrop' ).style.display  = '';
     15                document.getElementById( 'bp-hello-container' ).style.display = '';
     16        };
     17
     18        /**
     19         * Close the BuddyPress Hello modal.
     20         */
     21        var bp_hello_close_modal = function() {
     22                var backdrop = document.getElementById( 'bp-hello-backdrop' ),
     23                        modal = document.getElementById( 'bp-hello-container' );
     24
     25                document.body.classList.remove( 'bp-disable-scroll' );
     26
     27                // Hide.
     28                modal.parentNode.removeChild( modal );
     29                backdrop.parentNode.removeChild( backdrop );
     30        };
     31
     32        // Close modal if "X" or background is touched.
     33        document.addEventListener( 'click', function( event ) {
     34                var backdrop = document.getElementById( 'bp-hello-backdrop' );
     35
     36                if ( ! backdrop || ! document.getElementById( 'bp-hello-container' ) ) {
     37                        return;
     38                }
     39
     40                var backdrop_click = backdrop.contains( event.target ),
     41                        modal_close_click = event.target.classList.contains( 'close-modal' );
     42
     43                if ( ! modal_close_click && ! backdrop_click ) {
     44                        return;
     45                }
     46
     47                bp_hello_close_modal();
     48        }, false );
     49
     50        // Close modal if escape key is presssed.
     51        document.addEventListener( 'keyup', function( event ) {
     52                if ( event.keyCode === 27 ) {
     53                        if ( ! document.getElementById( 'bp-hello-backdrop' ) || ! document.getElementById( 'bp-hello-container' ) ) {
     54                                return;
     55                        }
     56
     57                        bp_hello_close_modal();
     58                }
     59        }, false );
     60
     61        // Init modal after the screen's loaded.
     62        if ( document.attachEvent ? document.readyState === 'complete' : document.readyState !== 'loading' ) {
     63                bp_hello_open_modal();
     64        } else {
     65                document.addEventListener( 'DOMContentLoaded', bp_hello_open_modal );
     66        }
     67}());

  • new file src/bp-core/admin/sass/hello.scss 

    diff --git a/src/bp-core/admin/sass/hello.scss b/src/bp-core/admin/sass/hello.scss
new file mode 100644
index 000000000..5ab1003f7
    - +  
     1/*------------------------------------------------------------------------------
     2Loaded in wp-admin for query string `hello=buddypress`.
     3
     4@since 3.0.0
     5
     6--------------------------------------------------------------------------------
     7TABLE OF CONTENTS:
     8--------------------------------------------------------------------------------
     91.0 - Typography and colour
     102.0 - Dashicons
     113.0 - Elements
     12        3.1 - Backdrop and container
     13        3.2 - Modal footer
     14        3.3 - Modal header
     15        3.4 - Modal content
     164.0 - Content styles
     17        4.1 - Backdrop and container
     18        4.2 - Footer content
     19        4.3 - Header content
     20        4.4 - Content content
     215.0 - Media
     226.0 - Media Queries
     23        6.1 - Desktop Medium
     24        6.2 - Desktop Large
     25------------------------------------------------------------------------------*/
     26
     27/*------------------------------------------------------------------------------
     28 * 1.0 - Typography and colour
     29 *----------------------------------------------------------------------------*/
     30:root {
     31        --bp-hello-color-primary: #d34600;
     32        --bp-hello-color-secondary: #e5e5e5;
     33        --bp-hello-container-size: 15%;
     34}
     35
     36#bp-hello-container {
     37
     38        a {
     39                color: var(--bp-hello-color-primary);
     40
     41                &:hover {
     42                        transition: all 0.1s ease-in-out;
     43                        color: rgb(0, 0, 0);
     44                }
     45        }
     46
     47        .bp-hello-header {
     48
     49                h1 {
     50                        line-height: 1.7;
     51                        font-size: 21px;
     52                        font-weight: 400;
     53                }
     54        }
     55}
     56
     57.bp-hello-content {
     58
     59        p {
     60                font-size: 16px;
     61        }
     62}
     63
     64/*------------------------------------------------------------------------------
     65 * 2.0 - Dashicons
     66 *----------------------------------------------------------------------------*/
     67.bp-hello-close {
     68
     69        a {
     70
     71                &:hover:before {
     72                        transition: all 0.1s ease-in-out;
     73                        color: var(--bp-hello-color-primary);
     74                }
     75
     76                &.close-modal:before {
     77                        content: "\f158";
     78                        color: #23282d; /* wp toolbar */
     79                        font: 400 35px/1 dashicons;
     80                        speak: none;
     81                        -webkit-font-smoothing: antialiased;
     82                        -moz-osx-font-smoothing: grayscale;
     83                        background-image: none !important;
     84                }
     85        }
     86}
     87
     88.bp-hello-social {
     89
     90        li a {
     91
     92                &:before {
     93                        color: #23282d; /* wp toolbar */
     94                        font: 400 30px/0.6 dashicons;
     95                        speak: none;
     96                        -webkit-font-smoothing: antialiased;
     97                        -moz-osx-font-smoothing: grayscale;
     98                        background-image: none !important;
     99                }
     100
     101                &:hover:before {
     102                        transition: all 0.1s ease-in-out;
     103                        color: var(--bp-hello-color-primary);
     104                }
     105
     106                &.support:before {
     107                        content: "\f448";
     108                }
     109
     110                &.twitter:before {
     111                        content: "\f301";
     112                }
     113        }
     114}
     115
     116/*------------------------------------------------------------------------------
     117 * 3.0 - Elements
     118 *----------------------------------------------------------------------------*/
     119
     120/*
     121 * 3.1 - Backdrop and container
     122 */
     123#bp-hello-backdrop {
     124        position: fixed;
     125        top: 0;
     126        left: 0;
     127        right: 0;
     128        bottom: 0;
     129        z-index: 9998; // >= 9990 for main menu
     130
     131        display: none;
     132}
     133
     134#bp-hello-container {
     135        position: fixed;
     136        top: 0;
     137        bottom: 80px;
     138        z-index: 99999; // >= 99998 for toolbar
     139}
     140
     141.bp-disable-scroll {
     142        overflow: hidden;
     143}
     144
     145/*
     146 * 3.2 - Modal footer
     147 */
     148.bp-hello-footer {
     149        display: flex;
     150        flex-wrap: wrap;
     151
     152        height: 58px;
     153        max-height: 58px;
     154}
     155
     156.bp-hello-social-cta,
     157.bp-hello-social-links {
     158        flex-basis: 50%;
     159}
     160
     161.bp-hello-social-links {
     162
     163        ul {
     164                display: inline-block;
     165        }
     166}
     167
     168.bp-hello-social {
     169
     170        li {
     171                position: relative;
     172                bottom: -5px;
     173                display: inline-block;
     174                list-style-type: none;
     175                margin-bottom: 0;
     176
     177                &:last-child a {
     178                        margin-left: 4px;
     179                }
     180        }
     181}
     182
     183/*
     184 * 3.3 - Modal header
     185 */
     186.bp-hello-header {
     187        height: 58px;
     188        max-height: 58px;
     189}
     190
     191/*
     192 * 3.4 - Modal content
     193 */
     194.bp-hello-content {
     195        padding: 0 25px;
     196
     197        // Force scrolling.
     198        height: calc(100% - 58px);
     199        overflow-y: auto;
     200        -webkit-overflow-scrolling: touch;
     201}
     202
     203/*------------------------------------------------------------------------------
     204 * 4.0 - Content styles
     205 *----------------------------------------------------------------------------*/
     206
     207/*
     208 * 4.1 - Backdrop and container
     209 */
     210#bp-hello-backdrop {
     211        background-color: rgba(0, 0, 0, 0.8);
     212        transition: opacity 0.15s ease-out;
     213}
     214
     215#bp-hello-container {
     216        background-color: rgb(255, 255, 255);
     217}
     218
     219/*
     220 * 4.2 - Footer content
     221 */
     222.bp-hello-footer {
     223        border-radius: 0 0 3px 3px;
     224        background-color: rgb(255, 255, 255);
     225        border-top: 1px solid var(--bp-hello-color-secondary);
     226        padding: 6px 25px;
     227
     228        p {
     229                font-size: 15px;
     230        }
     231}
     232
     233.bp-hello-social-cta {
     234        text-align: left;
     235}
     236
     237.bp-hello-social-links {
     238        text-align: right;
     239}
     240
     241.bp-hello-social {
     242
     243        li {
     244
     245                a {
     246                        text-decoration: none;
     247                }
     248        }
     249}
     250
     251/*
     252 * 4.3 - Header content
     253 */
     254.bp-hello-header {
     255        padding: 6px 25px;
     256
     257        h1 {
     258                width: calc(100% - 51px);  // Approx. width of "X" button block.
     259        }
     260}
     261
     262#bp-hello-container {
     263
     264        .bp-hello-header {
     265                border-bottom: 1px solid var(--bp-hello-color-secondary);
     266        }
     267}
     268
     269.bp-hello-title {
     270        text-align: left;
     271}
     272
     273.bp-hello-close {
     274        position: absolute;
     275        top: 20px;
     276        right: 25px;
     277        text-align: right;
     278
     279        a {
     280                text-decoration: none;
     281        }
     282}
     283
     284/*
     285 * 4.4 - Content content
     286 */
     287.bp-hello-content {
     288        background-color: rgb(255, 255, 255);
     289}
     290
     291/*------------------------------------------------------------------------------
     292 * 5.0 - Media
     293 *----------------------------------------------------------------------------*/
     294.bp-hello-content {
     295
     296        img {
     297                border-radius: 2px;
     298                max-width: 100%;
     299        }
     300}
     301
     302/*------------------------------------------------------------------------------
     303 * 6.0 - Media Queries
     304 *----------------------------------------------------------------------------*/
     305
     306/*
     307 * 6.1 - Desktop Medium
     308 */
     309@media only screen and (min-width: 1024px) {
     310
     311        #bp-hello-backdrop {
     312                display: block;
     313        }
     314
     315        #bp-hello-container {
     316                position: fixed;
     317                top: 60px;
     318                left: var(--bp-hello-container-size);
     319                right: var(--bp-hello-container-size);
     320                bottom: 30px;
     321
     322                border-radius: 3px;
     323
     324                .bp-hello-header {
     325
     326                        h1 {
     327                                line-height: inherit;
     328                        }
     329                }
     330        }
     331
     332        .bp-hello-header {
     333                height: auto;
     334                max-height: inherit;
     335
     336                padding: 6px 30px;
     337        }
     338
     339        .bp-hello-close {
     340                right: 30px;
     341
     342                a {
     343
     344                        &.close-modal:before {
     345                                line-height: 0.7;
     346                        }
     347                }
     348        }
     349
     350        .bp-hello-footer {
     351                position: fixed; // Fixed position above "content" div.
     352                left: var(--bp-hello-container-size);
     353                right: var(--bp-hello-container-size);
     354                bottom: 30px;
     355                z-index: 10000; // See #bp-hello-backdrop
     356
     357                height: auto;
     358                max-height: inherit;
     359
     360                padding: 6px 30px;
     361        }
     362
     363        .bp-hello-content {
     364                // Very very approx. height of header and footer.
     365                height: calc(100% - 90px);
     366                padding: 0 30px;
     367
     368                p {
     369                        font-size: 14px;
     370                }
     371        }
     372}
     373
     374/**
     375 * 6.2 - Desktop Large
     376 */
     377@media screen and (min-width: 1280px) {
     378
     379        #bp-hello-container,
     380        .bp-hello-footer {
     381                // Approx. max-width of modal at Desktop Medium size.
     382                left: calc((100% - 896px) / 2);
     383                right: calc((100% - 896px) / 2);
     384        }
     385}

  • src/bp-core/classes/class-bp-admin.php 

    diff --git a/src/bp-core/classes/class-bp-admin.php b/src/bp-core/classes/class-bp-admin.php
index 515b8903a..b47053704 100644
    a b class BP_Admin { 
    155155                // Add settings.
    156156                add_action( 'bp_register_admin_settings', array( $this, 'register_admin_settings' ) );
    157157
    158                 // Add a link to BuddyPress About page to the admin bar.
    159                 add_action( 'admin_bar_menu', array( $this, 'admin_bar_about_link' ), 15 );
     158                // Add a link to BuddyPress Hello in the admin bar.
     159                add_action( 'admin_bar_menu', array( $this, 'admin_bar_about_link' ), 100 );
    160160
    161161                // Add a description of new BuddyPress tools in the available tools page.
    162162                add_action( 'tool_box',            'bp_core_admin_available_tools_intro' );
    … … class BP_Admin { 
    169169                add_filter( 'manage_' . bp_get_email_post_type() . '_posts_columns',       array( $this, 'emails_register_situation_column' ) );
    170170                add_action( 'manage_' . bp_get_email_post_type() . '_posts_custom_column', array( $this, 'emails_display_situation_column_data' ), 10, 2 );
    171171
     172                // BuddyPress Hello.
     173                add_action( 'admin_footer', array( $this, 'about_screen' ) );
     174
    172175                /* Filters ***********************************************************/
    173176
    174177                // Add link to settings page.
    … … class BP_Admin { 
    197200                        return;
    198201                }
    199202
    200                 // About.
    201                 add_dashboard_page(
    202                         __( 'Welcome to BuddyPress',  'buddypress' ),
    203                         __( 'Welcome to BuddyPress',  'buddypress' ),
    204                         'manage_options',
    205                         'bp-about',
    206                         array( $this, 'about_screen' )
    207                 );
    208 
    209                 // Credits.
    210                 add_dashboard_page(
    211                         __( 'Welcome to BuddyPress',  'buddypress' ),
    212                         __( 'Welcome to BuddyPress',  'buddypress' ),
    213                         'manage_options',
    214                         'bp-credits',
    215                         array( $this, 'credits_screen' )
    216                 );
    217 
    218203                $hooks = array();
    219204
    220205                // Changed in BP 1.6 . See bp_core_admin_backpat_menu().
    … … class BP_Admin { 
    264249                        'bp_core_admin_settings'
    265250                );
    266251
     252                // Credits.
     253                $hooks[] = add_submenu_page(
     254                        $this->settings_page,
     255                        __( 'BuddyPress Credits', 'buddypress' ),
     256                        __( 'BuddyPress Credits', 'buddypress' ),
     257                        $this->capability,
     258                        'bp-credits',
     259                        array( $this, 'credits_screen' )
     260                );
     261
    267262                // For consistency with non-Multisite, we add a Tools menu in
    268263                // the Network Admin as a home for our Tools panel.
    269264                if ( is_multisite() && bp_core_do_network_admin() ) {
    … … class BP_Admin { 
    464459        }
    465460
    466461        /**
    467          * Add a link to BuddyPress About page to the admin bar.
     462         * Add a link to BuddyPress Hello to the admin bar.
    468463         *
    469464         * @since 1.9.0
     465         * @since 3.0.0 Hooked at priority 100 (was 15).
    470466         *
    471          * @param WP_Admin_Bar $wp_admin_bar As passed to 'admin_bar_menu'.
     467         * @param WP_Admin_Bar $wp_admin_bar
    472468         */
    473469        public function admin_bar_about_link( $wp_admin_bar ) {
    474                 if ( is_user_logged_in() ) {
    475                         $wp_admin_bar->add_menu( array(
    476                                 'parent' => 'wp-logo',
    477                                 'id'     => 'bp-about',
    478                                 'title'  => esc_html__( 'About BuddyPress', 'buddypress' ),
    479                                 'href'   => add_query_arg( array( 'page' => 'bp-about' ), bp_get_admin_url( 'index.php' ) ),
    480                         ) );
     470                if ( ! is_user_logged_in() ) {
     471                        return;
    481472                }
     473
     474                $wp_admin_bar->add_menu( array(
     475                        'parent' => 'wp-logo',
     476                        'id'     => 'bp-about',
     477                        'title'  => esc_html_x( 'Hello, BuddyPress!', 'Colloquial alternative to "learn about BuddyPress"', 'buddypress' ),
     478                        'href'   => bp_get_admin_url( '?hello=buddypress' ),
     479                        'meta'   => array(
     480                                'class' => 'say-hello-buddypress',
     481                        ),
     482                ) );
    482483        }
    483484
    484485        /**
    … … class BP_Admin { 
    500501                // Add a few links to the existing links array.
    501502                return array_merge( $links, array(
    502503                        'settings' => '<a href="' . esc_url( add_query_arg( array( 'page' => 'bp-components' ), bp_get_admin_url( $this->settings_page ) ) ) . '">' . esc_html__( 'Settings', 'buddypress' ) . '</a>',
    503                         'about'    => '<a href="' . esc_url( add_query_arg( array( 'page' => 'bp-about'      ), bp_get_admin_url( 'index.php'          ) ) ) . '">' . esc_html__( 'About',    'buddypress' ) . '</a>'
     504                        'about'    => '<a href="' . esc_url( bp_get_admin_url( '?hello=buddypress' ) ) . '">' . esc_html_x( 'Hello, BuddyPress!', 'Colloquial alternative to "learn about BuddyPress"', 'buddypress' ) . '</a>'
    504505                ) );
    505506        }
    506507
    … … class BP_Admin { 
    514515                // Settings pages.
    515516                remove_submenu_page( $this->settings_page, 'bp-page-settings' );
    516517                remove_submenu_page( $this->settings_page, 'bp-settings'      );
     518                remove_submenu_page( $this->settings_page, 'bp-credits'       );
    517519
    518520                // Network Admin Tools.
    519521                remove_submenu_page( 'network-tools', 'network-tools' );
    … … class BP_Admin { 
    530532         */
    531533        public function enqueue_scripts() {
    532534                wp_enqueue_style( 'bp-admin-common-css' );
     535
     536                // BuddyPress Hello
     537                if ( get_current_screen()->id === 'dashboard' && ! empty( $_GET['hello'] ) && $_GET['hello'] === 'buddypress' ) {
     538                        wp_enqueue_style( 'bp-hello-css' );
     539                        wp_enqueue_script( 'bp-hello-js' );
     540                }
    533541        }
    534542
    535543        /** About *****************************************************************/
    536544
    537545        /**
    538          * Output the about screen.
     546         * Output the BuddyPress Hello template.
    539547         *
    540          * @since 1.7.0
     548         * @since 1.7.0 Screen content.
     549         * @since 3.0.0 Now outputs BuddyPress Hello template.
    541550         */
    542551        public function about_screen() {
     552                if ( get_current_screen()->id !== 'dashboard' || empty( $_GET['hello'] ) || $_GET['hello'] !== 'buddypress' ) {
     553                        return;
     554                }
    543555        ?>
    544556
    545                 <div class="wrap about-wrap">
    546 
    547                         <?php self::welcome_text(); ?>
    548 
    549                         <?php self::tab_navigation( __METHOD__ ); ?>
    550 
    551                         <?php if ( self::is_new_install() ) : ?>
    552 
    553                                 <div id="welcome-panel" class="welcome-panel">
    554                                         <div class="welcome-panel-content">
    555                                                 <h3 style="margin:0;"><?php _e( 'Getting Started with BuddyPress', 'buddypress' ); ?></h3>
    556                                                 <div class="welcome-panel-column-container">
    557                                                         <div class="welcome-panel-column">
    558                                                                 <h4><?php _e( 'Configure BuddyPress', 'buddypress' ); ?></h4>
    559                                                                 <ul>
    560                                                                         <li><?php printf(
    561                                                                         '<a href="%s" class="welcome-icon welcome-edit-page">' . __( 'Set Up Components', 'buddypress' ) . '</a>', esc_url( bp_get_admin_url( add_query_arg( array( 'page' => 'bp-components' ), $this->settings_page ) ) )
    562                                                                         ); ?></li>
    563                                                                         <li><?php printf(
    564                                                                         '<a href="%s" class="welcome-icon welcome-edit-page">' . __( 'Assign Components to Pages', 'buddypress' ) . '</a>', esc_url( bp_get_admin_url( add_query_arg( array( 'page' => 'bp-page-settings' ), $this->settings_page ) ) )
    565                                                                         ); ?></li>
    566                                                                         <li><?php printf(
    567                                                                         '<a href="%s" class="welcome-icon welcome-edit-page">' . __( 'Customize Settings', 'buddypress' ) . '</a>', esc_url( bp_get_admin_url( add_query_arg( array( 'page' => 'bp-settings' ), $this->settings_page ) ) )
    568                                                                         ); ?></li>
    569                                                                 </ul>
    570                                                                 <a class="button button-primary button-hero" style="margin-bottom:20px;margin-top:0;" href="<?php echo esc_url( bp_get_admin_url( add_query_arg( array( 'page' => 'bp-components' ), $this->settings_page ) ) ); ?>"><?php _e( 'Get Started', 'buddypress' ); ?></a>
    571                                                         </div>
    572                                                         <div class="welcome-panel-column">
    573                                                                 <h4><?php _e( 'Administration Tools', 'buddypress' ); ?></h4>
    574                                                                 <ul>
    575                                                                         <?php if ( bp_is_active( 'members' ) ) : ?>
    576                                                                                 <li><?php printf( '<a href="%s" class="welcome-icon welcome-add-page">' . __( 'Add User Profile Fields', 'buddypress' ) . '</a>', esc_url( add_query_arg( array( 'page' => 'bp-profile-setup' ), bp_get_admin_url( 'users.php' ) ) ) ); ?></li>
    577                                                                         <?php endif; ?>
    578                                                                         <li><?php printf( '<a href="%s" class="welcome-icon welcome-add-page">' . __( 'Manage User Signups', 'buddypress' ) . '</a>', esc_url( add_query_arg( array( 'page' => 'bp-signups' ), bp_get_admin_url( 'users.php' ) ) ) ); ?></li>
    579                                                                         <?php if ( bp_is_active( 'activity' ) ) : ?>
    580                                                                                 <li><?php printf( '<a href="%s" class="welcome-icon welcome-add-page">' . __( 'Moderate Activity Streams', 'buddypress' ) . '</a>', esc_url( add_query_arg( array( 'page' => 'bp-activity' ), bp_get_admin_url( 'admin.php' ) ) ) ); ?></li>
    581                                                                         <?php endif; ?>
    582                                                                         <?php if ( bp_is_active( 'groups' ) ) : ?>
    583                                                                                 <li><?php printf( '<a href="%s" class="welcome-icon welcome-add-page">' . __( 'Manage Groups', 'buddypress' ) . '</a>', esc_url( add_query_arg( array( 'page' => 'bp-groups' ), bp_get_admin_url( 'admin.php' ) ) ) ); ?></li>
    584                                                                         <?php endif; ?>
    585                                                                         <li><?php printf( '<a href="%s" class="welcome-icon welcome-add-page">' . __( 'Repair Data', 'buddypress' ) . '</a>', esc_url( add_query_arg( array( 'page' => 'bp-tools' ), bp_get_admin_url( 'tools.php' ) ) ) ); ?>
    586                                                                         </li>
    587                                                                 </ul>
    588                                                         </div>
    589                                                         <div class="welcome-panel-column welcome-panel-last">
    590                                                                 <h4><?php _e( 'Community and Support', 'buddypress'  ); ?></h4>
    591                                                                 <p class="welcome-icon welcome-learn-more" style="margin-right:10px"><?php _e( 'Looking for help? The <a href="https://codex.buddypress.org/">BuddyPress Codex</a> has you covered.', 'buddypress' ) ?></p>
    592                                                                 <p class="welcome-icon welcome-learn-more" style="margin-right:10px"><?php _e( 'Can&#8217;t find what you need? Stop by <a href="https://buddypress.org/support/">our support forums</a>, where active BuddyPress users and developers are waiting to share tips and more.', 'buddypress' ) ?></p>
    593                                                         </div>
    594                                                 </div>
    595                                         </div>
    596                                 </div>
    597 
    598                         <?php endif; ?>
    599 
    600                         <div class="bp-features-section">
    601 
    602                                 <h3 class="headline-title"><?php esc_html_e( 'For Developers &amp; Site Builders', 'buddypress' ); ?></h3>
    603 
    604                                 <div class="bp-feature">
    605                                         <span class="dashicons dashicons-groups" aria-hidden="true"></span>
    606                                         <h4 class="feature-title"><?php esc_html_e( 'Edit Group Slug', 'buddypress' ); ?></h4>
    607                                         <p><?php esc_html_e( 'Allow administrators to change group names and permalinks. Navigate to the Groups screen in the wp-admin dashboard, click on the Edit link under the Group name, and adjust as needed.', 'buddypress' ); ?></p>
    608                                 </div>
    609 
    610                                 <div class="bp-feature opposite">
    611                                         <span class="dashicons dashicons-admin-users" aria-hidden="true"></span>
    612                                         <h4 class="feature-title"><?php esc_html_e( 'Improve accessibility of Extended Profile Fields', 'buddypress' ); ?></h4>
    613                                         <p><?php esc_html_e( 'Related form fields are grouped together in fieldsets and all interactive form controls are associated with necessary ARIA states and properties.', 'buddypress' ); ?></p>
    614                                 </div>
     557                <div id="bp-hello-backdrop" style="display: none;">
     558                </div>
    615559
    616                                 <div class="bp-feature">
    617                                         <span class="dashicons dashicons-email" aria-hidden="true"></span>
    618                                         <h4 class="feature-title"><?php esc_html_e( 'Send group invitation only once per user', 'buddypress' ); ?></h4>
    619                                         <p><?php esc_html_e( 'Prevent duplicate group invitations from being sent to a user by double-checking if a group invitation has already been sent to that user.', 'buddypress' ); ?></p>
     560                <div id="bp-hello-container" style="display: none;">
     561                        <div class="bp-hello-header">
     562                                <div class="bp-hello-close">
     563                                        <a class="close-modal" href="#" title="<?php echo esc_attr( 'Close pop-up', 'buddypress' ); ?>"><span class="screen-reader-text"><?php esc_html_e( 'Close pop-up', 'buddypress' ); ?></span></a>
    620564                                </div>
    621565
    622                                 <div class="bp-feature opposite">
    623                                         <span class="dashicons dashicons-testimonial" aria-hidden="true"></span>
    624                                         <h4 class="feature-title"><?php esc_html_e( 'Tooltips Usable for All Devices', 'buddypress' ); ?></h4>
    625 
    626                                         <p><?php esc_html_e( 'Replaced HTML title attributes with tooltips which provide additional information and visual cues where needed on mouse hover and keyboard focus events.', 'buddypress' );
    627                                         ?></p>
     566                                <div class="bp-hello-title">
     567                                        <h1><?php esc_html_e( _x( 'New in BuddyPress', 'section heading', 'buddypress' ) ); ?></h1>
    628568                                </div>
     569                        </div>
    629570
     571                        <div class="bp-hello-content">
     572                                <h2><?php esc_html_e( __( 'Say hello to &ldquo;Nouveau&rdquo;!', 'buddypress' ) ); ?></h2>
     573                                <p>
     574                                        <?php
     575                                        printf(
     576                                                __( 'A bold reimagining of our legacy templates, Nouveau is our celebration of <a href="%s">10 years of BuddyPress</a>! Nouveau delivers modern markup with fresh JavaScript-powered templates, and full integration with WordPress\' Customizer, allowing more out-of-the-box control of your BuddyPress content than ever before.', 'buddypress' ),
     577                                                esc_url( 'https://buddypress.org/2018/03/10-years/' )
     578                                        );
     579                                        ?>
     580                                </p>
     581                                <p><?php esc_html_e( 'Nouveau provides vertical and horizontal layout options for BuddyPress navigation, and for the component directories, you can choose between a grid layout, and a classic flat list.', 'buddypress' ); ?></p>
     582                                <p>
     583                                        <?php
     584                                        printf(
     585                                                __( 'Nouveau is fully compatible with WordPress. Existing BuddyPress themes have been written for our legacy template pack, and until they are updated, resolve any compatibility issues by choosing the legacy template pack option in <a href="%s">Settings &gt; BuddyPress</a>.', 'buddypress' ),
     586                                                esc_url( bp_get_admin_url( 'admin.php?page=bp-settings' ) )
     587                                        );
     588                                        ?>
     589                                </p>
     590                                <img srcset="https://via.placeholder.com/1024x576 1024w, https://via.placeholder.com/2048x1152 2048w" src="https://placekitten.com/1024x576" sizes="(max-width: 1023px) 90vw, 65vw" alt="a rad wolf" />
     591
     592                                <h2><?php esc_html_e( _x( 'Control site-wide notices from your dashboard', 'section heading', 'buddypress' ) ); ?></h2>
     593                                <p><?php esc_html_e( 'Site Notices are a feature within the Private Messaging component that allows community managers to share important messages with all members of their community. With Nouveau, the management interface for Site Notices has been removed from the front-end theme templates.', 'buddypress' ); ?></p>
     594
     595                                <?php if ( bp_is_active( 'messages' ) ) : ?>
     596                                <p>
     597                                        <?php
     598                                        printf(
     599                                                __( 'Explore the new management interface at <a href="%s">Users &gt; Site Notices</a>.', 'buddypress' ),
     600                                                esc_url( bp_get_admin_url( 'users.php?page=bp-notices' ) )
     601                                        );
     602                                        ?>
     603                                </p>
     604                                <?php endif; ?>
     605
     606                                <h2><?php esc_html_e( __( 'New profile field type: telephone numbers', 'buddypress' ) ); ?></h2>
     607                                <p><?php esc_html_e( 'A new telephone number field type has been added to the Extended Profiles component, with support for all international number formats. With a modern web browser, your members can use this field type to touch-to-dial a number directly.', 'buddypress' ); ?></p>
     608
     609                                <h2><?php esc_html_e( __( "BuddyPress: leaner, faster, stronger", 'buddypress' ) ); ?></h2>
     610                                <p><?php esc_html_e( 'With every BuddyPress version, we strive to make performance improvements alongside new features and fixes; this version is no exception. Memory use has been optimised &mdash; within active components, we now only load each individual code file when it\'s needed, not before.', 'buddypress' ); ?></p>
     611                                <p>
     612                                        <?php
     613                                        printf(
     614                                                __( 'Most notably, the <a href="%s">Legacy Forums component has been removed</a> after 9 years of service. If your site was using Legacy Forums, you need to <a href="%s">migrate to the bbPress plugin</a>.', 'buddypress' ),
     615                                                esc_url( 'https://bpdevel.wordpress.com/2017/12/07/legacy-forums-support-will-be/' ),
     616                                                esc_url( 'https://codex.buddypress.org/getting-started/guides/migrating-from-old-forums-to-bbpress-2/' )
     617                                        );
     618                                        ?>
     619                                </p>
     620
     621                                <p><em>
     622                                        <?php
     623                                        printf(
     624                                                __( 'To read the full list of features, fixes, and changes in this version of BuddyPress, <a href="%s">visit Trac</a>.', 'buddypress' ),
     625                                                esc_url( 'https://buddypress.trac.wordpress.org/query?group=status&milestone=3.0' )
     626                                        );
     627                                        ?>
     628                                </em></p>
     629
     630                                <h2><?php esc_html_e( _x( 'Your feedback', 'screen heading', 'buddypress' ) ); ?></h2>
     631                                <p>
     632                                        <?php
     633                                        printf(
     634                                                __( ' How are you using BuddyPress? Recieving your feedback and suggestions for future versions of BuddyPress genuinely motivates and encourages our contributors. Please <a href="%s">share your feedback</a> about this version of BuddyPress on our website. ', 'buddypress' ),
     635                                                esc_url( 'https://buddypress.org/support/' )
     636                                        );
     637                                        ?>
     638                                </p>
     639                                <p><?php esc_html_e( 'Thank you for using BuddyPress! 😊', 'buddypress' ); ?></p>
     640
     641                                <br /><br />
    630642                        </div>
    631643
    632                         <div class="bp-changelog-section">
    633 
    634                                 <h3 class="changelog-title"><?php esc_html_e( 'More under the hood &#8230;', 'buddypress' ); ?></h3>
    635                                 <div class="bp-changelog bp-three-column">
    636                                         <div class="bp-column">
    637                                                 <h4 class="title"><?php esc_html_e( 'Better support for private message thread links in emails', 'buddypress' ); ?></h4>
    638                                                 <p><?php esc_html_e( 'Redirect non-authenticated users to the login screen and authenticated users to the message linked.', 'buddypress' ); ?></p>
    639                                         </div>
    640                                         <div class="bp-column">
    641                                                 <h4 class="title"><?php esc_html_e( 'Compatibility with Bootstrap themes', 'buddypress' ); ?></h4>
    642                                                 <p><?php esc_html_e( 'Removed issues with BuddyPress-generated content being hidden in the Groups loop and Activity comments in Bootstrap themes.', 'buddypress' ); ?></p>
    643                                         </div>
    644 
    645                                         <div class="bp-column">
    646                                                 <h4 class="title"><?php esc_html_e( 'Improve profile image uploads', 'buddypress' ); ?></h4>
    647                                                 <p><?php esc_html_e( 'Fixed issues with uploading in iOS Safari and uploading files with non-ASCII filenames.', 'buddypress' ); ?></p>
    648                                         </div>
     644                        <div class="bp-hello-footer">
     645                                <div class="bp-hello-social-cta">
     646                                        <p>
     647                                                <?php
     648                                                printf(
     649                                                        _n( 'Built by <a href="%s">%s volunteer</a>.', 'Crafted by <a href="%s">%s volunteers</a>.', 100, 'buddypress' ),
     650                                                        esc_url( bp_get_admin_url( 'admin.php?page=bp-credits' ) ),
     651                                                        number_format_i18n( 100 )
     652                                                );
     653                                                ?>
     654                                        </p>
    649655                                </div>
    650656
    651                                 <div class="bp-changelog bp-three-column">
    652                                         <div class="bp-column">
    653                                                 <h4 class="title"><?php esc_html_e( 'URL compatibility for LightSpeed Servers', 'buddypress' ); ?></h4>
    654                                                 <p><?php
    655                                                                 /* translators: %s: trailingslashit() */
    656                                                                 printf( __( 'Audited and changed template link functions to use %s where necessary.', 'buddypress' ),
    657                                                                 '<code>trailingslashit()</code>' );
    658                                                 ?></p>
    659                                         </div>
    660                                         <div class="bp-column">
    661                                                 <h4 class="title"><?php esc_html_e( 'Template Packs UI in BuddyPress > Settings.', 'buddypress' ); ?></h4>
    662                                                 <p><?php esc_html_e( 'Register your new BuddyPress theme package and allow the user to select which template pack to use.', 'buddypress' ); ?></p>
    663                                         </div>
    664 
    665                                         <div class="bp-column">
    666                                                 <h4 class="title"><?php
    667                                                                 /* translators: %s: bp_group_link() */
    668                                                                 printf( __( 'New template function %s', 'buddypress' ),
    669                                                                 '<code>bp_group_link()</code>' );
    670                                                 ?></h4>
    671                                                 <p><?php esc_html_e( 'Output a group name as a text hyperlink where appropriate.', 'buddypress' ); ?></p>
    672                                         </div>
     657                                <div class="bp-hello-social-links">
     658                                        <ul class="bp-hello-social">
     659                                                <li>
     660                                                        <?php
     661                                                        printf(
     662                                                                '<a class="twitter" title="%1$s" href="%2$s"><span class="screen-reader-text">%3$s</span></a>',
     663                                                                esc_attr( 'Follow BuddyPress on Twitter', 'buddypress' ),
     664                                                                esc_url( 'https://twitter.com/buddypress' ),
     665                                                                esc_html( 'Follow BuddyPress on Twitter', 'buddypress' )
     666                                                        );
     667                                                        ?>
     668                                                </li>
     669
     670                                                <li>
     671                                                        <?php
     672                                                        printf(
     673                                                                '<a class="support" title="%1$s" href="%2$s"><span class="screen-reader-text">%3$s</span></a>',
     674                                                                esc_attr( 'Visit the Support Forums', 'buddypress' ),
     675                                                                esc_url( 'https://buddypress.org/support/' ),
     676                                                                esc_html( 'Visit the Support Forums', 'buddypress' )
     677                                                        );
     678                                                        ?>
     679                                                </li>
     680                                        </ul>
    673681                                </div>
    674 
    675682                        </div>
    676 
    677                         <div class="bp-assets">
    678                                 <p><?php _ex( 'Learn more:', 'About screen, website links', 'buddypress' ); ?> <a href="https://buddypress.org/blog/"><?php _ex( 'News', 'About screen, link to project blog', 'buddypress' ); ?></a> &bullet; <a href="https://buddypress.org/support/"><?php _ex( 'Support', 'About screen, link to support site', 'buddypress' ); ?></a> &bullet; <a href="https://codex.buddypress.org/"><?php _ex( 'Documentation', 'About screen, link to documentation', 'buddypress' ); ?></a> &bullet; <a href="https://bpdevel.wordpress.com/"><?php _ex( 'Development Blog', 'About screen, link to development blog', 'buddypress' ); ?></a></p>
    679 
    680                                 <p><?php _ex( 'Twitter:', 'official Twitter accounts:', 'buddypress' ); ?> <a href="https://twitter.com/buddypress/"><?php _ex( 'BuddyPress', '@buddypress twitter account name', 'buddypress' ); ?></a> &bullet; <a href="https://twitter.com/bptrac/"><?php _ex( 'Trac', '@bptrac twitter account name', 'buddypress' ); ?></a> &bullet; <a href="https://twitter.com/buddypressdev/"><?php _ex( 'Development', '@buddypressdev twitter account name', 'buddypress' ); ?></a></p>
    681                         </div>
    682 
    683683                </div>
    684684
    685685                <?php
    … … class BP_Admin { 
    696696        public function credits_screen() {
    697697        ?>
    698698
    699                 <div class="wrap about-wrap">
     699                <div class="wrap bp-about-wrap">
    700700
    701                         <?php self::welcome_text(); ?>
     701                <h1><?php _e( 'BuddyPress Settings', 'buddypress' ); ?> </h1>
    702702
    703                         <?php self::tab_navigation( __METHOD__ ); ?>
     703                <h2 class="nav-tab-wrapper"><?php bp_core_admin_tabs( __( 'Credits', 'buddypress' ) ); ?></h2>
    704704
    705705                        <p class="about-description"><?php _e( 'BuddyPress is created by a worldwide network of friendly folks like these.', 'buddypress' ); ?></p>
    706706
    … … class BP_Admin { 
    876876                <?php
    877877        }
    878878
    879         /**
    880          * Output welcome text and badge for What's New and Credits pages.
    881          *
    882          * @since 2.2.0
    883          */
    884         public static function welcome_text() {
    885 
    886                 // Switch welcome text based on whether this is a new installation or not.
    887                 $welcome_text = ( self::is_new_install() )
    888                         ? __( 'Thank you for installing BuddyPress! BuddyPress adds community features to WordPress. Member Profiles, Activity Streams, Direct Messaging, Notifications, and more!', 'buddypress' )
    889                         : __( 'Thank you for updating! BuddyPress %s has many new improvements that you will enjoy.', 'buddypress' );
    890 
    891                 ?>
    892 
    893                 <h1><?php printf( esc_html__( 'Welcome to BuddyPress %s', 'buddypress' ), self::display_version() ); ?></h1>
    894 
    895                 <div class="about-text">
    896                         <?php
    897                         if ( self::is_new_install() ) {
    898                                 echo $welcome_text;
    899                         } else {
    900                                 printf( $welcome_text, self::display_version() );
    901                         }
    902                         ?>
    903                 </div>
    904 
    905                 <div class="bp-badge"></div>
    906 
    907                 <?php
    908         }
    909 
    910         /**
    911          * Output tab navigation for `What's New` and `Credits` pages.
    912          *
    913          * @since 2.2.0
    914          *
    915          * @param string $tab Tab to highlight as active.
    916          */
    917         public static function tab_navigation( $tab = 'whats_new' ) {
    918         ?>
    919 
    920                 <h2 class="nav-tab-wrapper">
    921                         <a class="nav-tab <?php if ( 'BP_Admin::about_screen' === $tab ) : ?>nav-tab-active<?php endif; ?>" href="<?php echo esc_url( bp_get_admin_url( add_query_arg( array( 'page' => 'bp-about' ), 'index.php' ) ) ); ?>">
    922                                 <?php esc_html_e( 'What&#8217;s New', 'buddypress' ); ?>
    923                         </a><a class="nav-tab <?php if ( 'BP_Admin::credits_screen' === $tab ) : ?>nav-tab-active<?php endif; ?>" href="<?php echo esc_url( bp_get_admin_url( add_query_arg( array( 'page' => 'bp-credits' ), 'index.php' ) ) ); ?>">
    924                                 <?php esc_html_e( 'Credits', 'buddypress' ); ?>
    925                         </a>
    926                 </h2>
    927 
    928         <?php
    929         }
    930 
    931879        /** Emails ****************************************************************/
    932880
    933881        /**
    … … class BP_Admin { 
    10771025                                'file'         => "{$url}customizer-controls{$min}.css",
    10781026                                'dependencies' => array(),
    10791027                        ),
    1080                 ) );
    10811028
     1029                        // 3.0
     1030                        'bp-hello-css' => array(
     1031                                'file'         => "{$url}hello{$min}.css",
     1032                                'dependencies' => array( 'bp-admin-common-css' ),
     1033                        ),
     1034                ) );
    10821035
    10831036                $version = bp_get_version();
    10841037
    … … class BP_Admin { 
    11151068                                'dependencies' => array( 'jquery' ),
    11161069                                'footer'       => true,
    11171070                        ),
     1071
     1072                        // 3.0
     1073                        'bp-hello-js' => array(
     1074                                'file'         => "{$url}hello{$min}.js",
     1075                                'dependencies' => array(),
     1076                                'footer'       => true,
     1077                        ),
    11181078                ) );
    11191079
    11201080                $version = bp_get_version();