WordPress.org
Get WordPress

Making WordPress.org

Changeset 4946


Ignore:
Timestamp:
02/19/2017 09:20:00 PM (9 years ago)
Author:
ocean90
Message:

Login: Improve display of error messages and scrolling behaviour.

See #148.

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-login
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-login/js/registration.js

    r4535 r4946  
    1 jQuery(document).ready(function($){
    2     $('#login form').on( 'focus', 'input.error', function() {
    3         $(this).removeClass( 'error' );
    4     } );
     1(function( $ ) {
     2        $( function() {
     3            var $loginForm = $( '#login form' );
    54
    6     $('#login form').on( 'blur', '#user_login, #user_email', function() {
    7         var $this = $(this);
    8         if ( ! $this.val() ) {
    9             $this.parents('p').nextUntil( 'p', 'div.message.error').remove();
    10             return;
    11         }
     5            $loginForm.on( 'focus', 'input.error', function() {
     6                $( this ).removeClass( 'error' );
     7            } );
    128
    13         var rest_url = wporg_registration.rest_url +
    14             ( this.id == 'user_login' ? '/username-available/' : '/email-in-use/' ) +
    15             $this.val();
     9            $loginForm.on( 'blur', '#user_login, #user_email', function() {
     10                var $this = $( this );
    1611
    17         $.get( rest_url, function(datas) {
    18             $this.parents('p').nextUntil( 'p', 'div.message.error').remove();
    19             $this.removeClass("good");
    20             if ( ! datas.available ) {
    21                 $this.addClass("error");
    22                 $this.parents('p').after(
    23                     "<div class='message error'><p>" +
    24                     ( datas.avatar ? datas.avatar : '' ) +
    25                     datas.error +
    26                     "</p></div>"
    27                 );
    28             } else {
    29                 $this.addClass("good");
    30             }
     12                if ( ! $this.val() ) {
     13                    $this.parents( 'p' ).nextUntil( 'p', 'div.message.error' ).remove();
     14                    return;
     15                }
     16
     17                var rest_url = wporg_registration.rest_url +
     18                    ( this.id == 'user_login' ? '/username-available/' : '/email-in-use/' ) +
     19                    $this.val();
     20
     21                $.get( rest_url, function( datas ) {
     22                    $this.parents( 'p' ).nextUntil( 'p', 'div.message.error' ).remove();
     23                    $this.removeClass( 'good' );
     24
     25                    if ( ! datas.available ) {
     26                        $this.addClass( 'error' );
     27                        $this.parents( 'p' ).after(
     28                            "<div class='message error'><p>" +
     29                            ( datas.avatar ? datas.avatar : '' ) + '<span>' +
     30                            datas.error +
     31                            "</span></p></div>"
     32                        );
     33                    } else {
     34                        $this.addClass( 'good' );
     35                    }
     36                } );
     37            } );
    3138        } );
    32     } );
    33 
    34 });
     39} )( jQuery );

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-login/register.php

    r4543 r4946  
    4343
    4444<form name="registerform" id="registerform" action="/register" method="post">
     45
    4546    <p class="login-username">
    4647        <label for="user_login"><?php _e( 'Username', 'wporg-login' ); ?></label>
    … …  
    4950    </p>
    5051    <?php
    51         if ( $error_user_login ) {
    52             echo '<div class="message error"><p>' . $error_user_login->get_data()['avatar'] . $error_user_login->get_data()['error'] . '</p></div>';
    53         }
     52    if ( $error_user_login ) {
     53        echo '<div class="message error"><p>' . $error_user_login->get_data()['avatar'] . '<span>' . $error_user_login->get_data()['error'] . '</span></p></div>';
     54    }
    5455    ?>
    5556
    … …  
    6061    </p>
    6162    <?php
    62         if ( $error_user_email ) {
    63             echo '<div class="message error"><p>' . $error_user_email->get_data()['avatar'] . $error_user_email->get_data()['error'] . '</p></div>';
    64         }
     63    if ( $error_user_email ) {
     64        echo '<div class="message error"><p>' . $error_user_email->get_data()['avatar'] . '<span>' . $error_user_email->get_data()['error'] . '</span></p></div>';
     65    }
    6566    ?>
    6667
    … …  
    9091    <a href="/" title="<?php esc_attr_e( 'Already have an account?', 'wporg-login' ); ?>"><?php _e( 'Already have an account?', 'wporg-login' ); ?></a> &nbsp; • &nbsp;
    9192    <a href="https://wordpress.org/"><?php _e( 'WordPress.org', 'wporg-login' ); ?></a>
    92    
     93
    9394</p>
    9495
    95 <?php get_footer(); ?>
     96<?php get_footer();

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-login/stylesheets/login.css

    r4542 r4946  
    77body.login {
    88    /* Using flexbox to control the vertical alignment of the form and white box */
    9     display: -webkit-flex;
     9    display: -webkit-box;
     10    display: -ms-flexbox;
    1011    display: flex;
    11     -webkit-align-items:center;
    12     align-items:center;
     12    -webkit-box-align: center;
     13    -ms-flex-align: center;
     14    align-items: center;
     15    height: auto;
     16    min-height: 100%;
    1317}
    1418
    … …  
    1822body.route-register-confirm {
    1923    display: block;
    20     margin-top: 100px;
     24    padding-top: 72px;
    2125}
    2226
    … …  
    3438
    3539.wp-core-ui .button-primary, .wp-core-ui.login .button-primary {
    36     width:100%;
    37     height:40px;
    38     font-size:14px;
     40    width: 100%;
     41    height: 40px;
     42    font-size: 14px;
    3943}
    4044
    … …  
    4448
    4549#pass-strength-result {
    46     background: #FFF;
     50    background: #fff;
    4751}
    4852
    4953#pass-strength-result.strong {
    50     background-color:#FFF;
    51     border-color:transparent;
    52     color: #46b450;  /* Green */
     54    background-color: #fff;
     55    border-color: transparent;
     56    color: #46b450; /* Green */
    5357    -webkit-box-shadow:
    54         inset 0 14px #FFF,
    55         inset 0 -14px #FFF,
     58        inset 0 14px #fff,
     59        inset 0 -14px #fff,
    5660        inset -100px 0 #46b450,
    5761        inset 100px 0 #46b450;
    5862    box-shadow:
    59         inset 0 14px #FFF,
    60         inset 0 -14px #FFF,
     63        inset 0 14px #fff,
     64        inset 0 -14px #fff,
    6165        inset -100px 0 #46b450,
    6266        inset 100px 0 #46b450;
    … …  
    6468
    6569#pass-strength-result.good {
    66     background-color:#FFF;
    67     border-color:transparent;
     70    background-color: #fff;
     71    border-color: transparent;
    6872    color: #ffb900; /* Orange */
    6973    -webkit-box-shadow:
    70         inset 0 14px #FFF,
    71         inset 0 -14px #FFF,
     74        inset 0 14px #fff,
     75        inset 0 -14px #fff,
    7276        inset -80px 0 #ffb900,
    7377        inset 80px 0 #ffb900;
    7478    box-shadow:
    75         inset 0 14px #FFF,
    76         inset 0 -14px #FFF,
     79        inset 0 14px #fff,
     80        inset 0 -14px #fff,
    7781        inset -80px 0 #ffb900,
    7882        inset 80px 0 #ffb900;
    … …  
    8084
    8185#pass-strength-result.bad, #pass-strength-result.short {
    82     background-color:#FFF;
    83     border-color:transparent;
     86    background-color: #fff;
     87    border-color: transparent;
    8488    color: #dc3232; /* Red */
    8589    -webkit-box-shadow:
    86         inset 0 14px #FFF,
    87         inset 0 -14px #FFF,
     90        inset 0 14px #fff,
     91        inset 0 -14px #fff,
    8892        inset -80px 0 #dc3232,
    8993        inset 80px 0 #dc3232;
    9094    box-shadow:
    91         inset 0 14px #FFF,
    92         inset 0 -14px #FFF,
     95        inset 0 14px #fff,
     96        inset 0 -14px #fff,
    9397        inset -80px 0 #dc3232,
    9498        inset 80px 0 #dc3232;
    … …  
    96100
    97101.reset-pass {
    98     margin-bottom:0;
     102    margin-bottom: 0;
    99103}
    100104
    101105#loginform {
    102106    margin: 0 !important;
    103     padding: 0 !important;
    104     background: transparent !important;
    105     -webkit-box-shadow: none !important;
    106     box-shadow: none !important;
     107    padding: 0 !important;
     108    background: transparent !important;
     109    -webkit-box-shadow: none !important;
     110    box-shadow: none !important;
    107111}
    108112
    109113#login form p {
    110     margin:0;
     114    margin: 0;
    111115}
    112116
    … …  
    118122
    119123body {
    120     color: #555D66;
     124    color: #555d66;
    121125    font-size: 14px;
    122126}
    … …  
    129133
    130134a {
    131     color: #555D66 !important;
     135    color: #555d66 !important;
    132136    text-decoration: underline !important;
    133137    font-weight: normal;
    … …  
    162166
    163167.wp-core-ui .button-primary {
    164     -webkit-box-shadow:none;
    165     box-shadow:none;
     168    -webkit-box-shadow: none;
     169    box-shadow: none;
    166170}
    167171
    168172.singleline {
    169     position:relative;
    170     left:-12px;
    171     width:278px;
     173    position: relative;
     174    left: -12px;
     175    width: 278px;
    172176}
    173177
    … …  
    175179    width: 350px;
    176180    padding: 24px;
    177     margin: 0 auto 0;
    178     background: #FFF;
     181    margin: 72px auto 68px; /* top and bottom values of h1 and #nav */
     182    background: #fff;
    179183    position: relative;
    180     -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    181     box-shadow: 0 1px 2px rgba(0,0,0,.2);
     184    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
     185    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    182186}
    183187
    184188#login h1 {
    185189    text-align: center;
    186     margin-bottom: 24px;
    187     position: absolute;
    188     top: -72px;
    189     width: 100%;
    190     left: 0;
     190    margin-bottom: 24px;
     191    position: absolute;
     192    top: -72px;
     193    width: 100%;
     194    left: 0;
    191195}
    192196
    … …  
    207211    overflow: hidden;
    208212    display: block;
    209     -webkit-transition:none;
    210     transition:none;
     213    -webkit-transition: none;
     214    transition: none;
    211215}
    212216
    213217p.intro, #login .message {
    214     margin-bottom:24px !important;
     218    margin-bottom: 24px !important;
    215219}
    216220
    217221#login .message + #login_error {
    218     margin-top:0 !important;
    219     border-top:1px solid #f5f5f5;
     222    margin-top: 0 !important;
     223    border-top: 1px solid #f5f5f5;
    220224}
    221225
    … …  
    223227    border-left: 4px solid #00a0d2;
    224228    padding: 12px;
    225     margin:-24px 0 24px -24px;
     229    margin: -24px 0 24px -24px;
    226230    background-color: #fbfbfb;
    227     width:350px;
    228     border-bottom:1px solid #f5f5f5;
    229     -webkit-box-shadow:none !important;
    230     box-shadow:none !important;
     231    width: 350px;
     232    border-bottom: 1px solid #f5f5f5;
     233    -webkit-box-shadow: none !important;
     234    box-shadow: none !important;
    231235}
    232236
    … …  
    237241#login #nav {
    238242    font-size: 13px;
    239     padding: 0;
    240     margin: 24px auto;
    241     text-align: center;
    242     position: absolute;
    243     left: 0;
    244     bottom: -68px;
    245     width: 100%;
     243    padding: 0;
     244    margin: 24px auto;
     245    text-align: center;
     246    position: absolute;
     247    left: 0;
     248    bottom: -68px;
     249    width: 100%;
    246250}
    247251
    248252.login form {
    249253    margin: 0 !important;
    250     padding: 0 !important;
    251     background: transparent !important;
    252     -webkit-box-shadow: none !important;
    253     box-shadow: none !important;
    254     overflow: visible;
     254    padding: 0 !important;
     255    background: transparent !important;
     256    -webkit-box-shadow: none !important;
     257    box-shadow: none !important;
     258    overflow: visible;
    255259}
    256260
    257261.mobile #login {
    258     padding:24px;
     262    padding: 24px;
    259263}
    260264
    … …  
    280284form .forgetmenot label,
    281285form .login-remember label {
    282     font-size:12px;
     286    font-size: 12px;
    283287    line-height: 1;
    284288    cursor: pointer;
    … …  
    318322    margin-bottom: 0;
    319323}
     324
    320325body.route-register #login form p,
    321326body.route-register-profile #login form p,
    … …  
    327332    opacity: 0.5;
    328333}
     334
    329335body.login form input.input::-moz-placeholder { /* Firefox 19+ */
    330336    opacity: 0.5;
    331337}
     338
    332339body.login form input.input:-ms-input-placeholder { /* IE 10+ */
    333340    opacity: 0.5;
    334341}
     342
    335343body.login form input.input:-moz-placeholder { /* Firefox 18- */
    336344    opacity: 0.5;
    337345}
     346
    338347body.login form input.error {
    339     background-color: #FAE5E8;
    340     border: 3px solid #D42A41;
    341 }
     348    background-color: #fbeaea;
     349    border: 2px solid #dc3232;
     350}
     351
    342352body.login form input.good {
    343     border-color: #83c373;
     353    border-color: #46b450;
    344354}
    345355
    … …  
    349359    margin-left: -24px;
    350360    padding-left: 24px;
    351     padding-right: 0;
     361    padding-right: 24px;
     362    margin-right: -24px;
     363}
     364
     365body.route-register #login .message p,
     366body.route-register-profile #login .message p,
     367body.route-register-confirm #login .message p {
     368    margin: 0;
     369    display: -webkit-box;
     370    display: -ms-flexbox;
     371    display: flex;
     372    -webkit-box-align: center;
     373    -ms-flex-align: center;
     374    align-items: center;
    352375}
    353376
    … …  
    355378body.route-register-profile #login .message.error,
    356379body.route-register-confirm #login .message.error {
     380    margin-bottom: 30px !important;
     381    color: #23282d;
     382    background: #fbfbfb;
    357383    border-left-color: #dc3232;
    358     margin-bottom: auto !important;
    359 }
     384    -webkit-box-shadow:
     385        0 1px 2px rgba(0, 0, 0, 0.07),
     386        0 -1px 2px rgba(0, 0, 0, 0.07);
     387    box-shadow:
     388        0 1px 2px rgba(0, 0, 0, 0.07),
     389        0 -1px 2px rgba(0, 0, 0, 0.07);
     390}
     391
    360392body.route-register .message.error .avatar {
    361     float: left;
    362393    border-radius: 50%;
    363394    margin-right: 1em;
     395    max-width: 100%;
     396    height: auto;
    364397}
    365398
    … …  
    391424    border-collapse: collapse;
    392425}
     426
    393427form:after {
    394428    clear: both;
    395429}
     430
    396431form {
    397432    min-height: 0; /* clearfix IE7 support */
    398433}
    399434
    400 @media (max-width:375px) {
    401     body, html {
    402         background:#FFF;
    403     }
     435@media (max-width: 375px) {
     436    body, html {
     437        background: #fff;
     438    }
     439
    404440    body.login {
    405         display:block; /* Overwriting flexbox to remove vertical positioning */
    406         align-items:center;
    407         margin-top:100px; /* Fix for displaying logo correctly */
    408     }
    409     #login, .mobile #login {
    410         -webkit-box-shadow:none;
    411         box-shadow:none;
    412         padding:24px;
    413     }
     441        display: block; /* Overwriting flexbox to remove vertical positioning */
     442        padding-top: 20px;
     443        padding-bottom: 20px;
     444    }
     445
     446    #login,
     447    .mobile #login {
     448        -webkit-box-shadow: none;
     449        box-shadow: none;
     450        padding: 24px;
     451    }
     452
    414453    #login #login_error {
    415         margin-left:0;
    416         width:100%;
    417     }
    418 }
    419 
    420 @media (max-width:360px) {
     454        margin-left: 0;
     455        width: 100%;
     456    }
     457
    421458    #login {
    422         width:100%;
    423         padding:20px 24px;
    424     }
     459        margin-top: 52px;
     460        margin-bottom: 48px;
     461    }
     462
     463    #login #nav {
     464        bottom: -48px;
     465    }
     466
    425467    #login h1 {
    426         padding:0 24px 24px;
    427     }
     468        top: -52px;
     469    }
     470
     471    body.route-register .message.error .avatar {
     472        max-width: 40px
     473    }
     474
     475    #rc-imageselect, .g-recaptcha {
     476        margin: 0 auto;
     477        transform: scale(0.8);
     478        -webkit-transform: scale(0.8);
     479        transform-origin: 0 0;
     480        -webkit-transform-origin: 0 0;
     481    }
     482}
     483
     484@media (max-width: 360px) {
     485    #login {
     486        width: 100%;
     487        padding: 20px 24px;
     488    }
     489
     490    #login h1 {
     491        padding: 0 24px 24px;
     492    }
     493
    428494    #login h1 a {
    429         -webkit-background-size:100%;
    430         background-size:100%;
     495        -webkit-background-size: 100%;
     496        background-size: 100%;
    431497    }
    432498}
    … …  
    436502    body.login {
    437503        display: block;
    438         margin-top: 100px;
    439     }
    440 }
     504        padding-top: 20px;
     505        padding-bottom: 20px;
     506    }
     507}
Note: See TracChangeset for help on using the changeset viewer.