Skip to:
Content

BuddyPress.org

Changeset 11755


Ignore:
Timestamp:
12/01/2017 11:16:45 PM (7 years ago)
Author:
hnla
Message:

Nouveau: Re-factor password verify JS & styles ( registration screen )

Commit updates password-verify.js to correct switch statement removing 'short' for 'misnatch' on 'pwsL10n.mismatch' html.

Adds new class for all conditions met of 'show' to manage the display of hidden result element, this simplifies the style rulesets.

Updates password style mixins for additional param for color.

Adds new ruleset to handle .mismatch mixin include ( provisional alt styling ), adds border styles for password input fields.

Todo: Track down the red border outline of input controls when unfocussed, currently this alludes pinpointing to any styles or JS - possibly originating from WP js?

Location:
trunk/src/bp-templates/bp-nouveau
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/bp-templates/bp-nouveau/common-styles/_bp-mixins.scss

    r11686 r11755  
    320320}
    321321
     322// Layout elements / lists as grids
     323// A combined mixin to set flex-flow & flex.
     324// This mixin must be called on the parent i.e 'ul'
     325
     326@mixin build-flex-layout($row-wrap: wrap, $align: stretch, $basis: auto, $grow: 0 ) {
     327
     328    @include flex-box-dir($flex-dir: "row", $flex-wrap: $row-wrap);
     329    @include flex-align($align: $align);
     330
     331    > * {
     332
     333        @include box-item-size($grow: $grow, $shrink: 1, $basis: $basis);
     334    }
     335}
     336
    322337// Links as a tabbed effect.
    323338// Renders links in a horizontal layout as a
    … …  
    446461// Password warn colors
    447462
    448 @mixin pwd-bad-colors($background: null, $border: null) {
     463@mixin pwd-bad-colors($color: inherit, $background: null, $border: null) {
    449464
    450465    @if $background {
    … …  
    463478
    464479    border-color: $border;
    465 }
    466 
    467 @mixin pwd-short-colors($background: null, $border: null) {
     480
     481    color: $color;
     482}
     483
     484@mixin pwd-short-colors($color: inherit, $background: null, $border: null) {
    468485
    469486    @if $background {
    … …  
    482499
    483500    border-color: $border;
    484 }
    485 
    486 @mixin pwd-good-colors($background: null, $border: null) {
     501
     502    color: $color;
     503}
     504
     505@mixin pwd-good-colors($color: inherit, $background: null, $border: null) {
    487506
    488507    @if $background {
    … …  
    501520
    502521    border-color: $border;
     522
     523    color: $color;
    503524}
    504525

  • trunk/src/bp-templates/bp-nouveau/common-styles/_bp_info_messages.scss

    r11686 r11755  
    238238        border-width: 1px;
    239239        display: none;
     240        font-weight: 700;
    240241        margin: $marg-sml 0 $marg-sml 0;
    241242        padding: $pad-sml;
    … …  
    243244        width: auto;
    244245
     246        // Show the feedback message when fields populated
     247        &.show {
     248            display: block;
     249        }
     250
     251        &.mismatch {
     252
     253            @include pwd-bad-colors($color: $white, $background: $black, $border: transparent);
     254        }
     255
    245256        &.error,
    246257        &.bad {
    247258
    248             @include pwd-bad-colors();
    249             display: block;
     259            @include pwd-bad-colors($color: $white);
    250260        }
    251261
    252262        &.short {
    253263
    254             @include pwd-short-colors();
    255             display: block;
     264            @include pwd-short-colors($color: $white);
    256265        }
    257266
    258267        &.strong {
    259268
    260             @include pwd-good-colors();
    261             display: block;
     269            @include pwd-good-colors($color: $white);
    262270        }
    263271

  • trunk/src/bp-templates/bp-nouveau/common-styles/_bp_registration.scss

    r11686 r11755  
    2626        // profile extra element wrapper
    2727        .editfield {
    28             border: 1px solid $bp-border-color;
    29             margin: $marg-lrg 0;
    30             padding: 5px;
     28            margin: $marg-med 0;
    3129
    3230            fieldset {
    … …  
    3533
    3634                legend {
     35                    margin: 0 0 5px;
    3736                    text-indent: 0;
    3837                }
    … …  
    5049        #signup-avatar img {
    5150            margin: 0 $marg-med $marg-sml 0;
     51        }
     52
     53        .password-entry,
     54        .password-entry-confirm {
     55            border: 1px solid $bp-border-color;
    5256        }
    5357    } // close .signup-form

  • trunk/src/bp-templates/bp-nouveau/css/buddypress-rtl.css

    r11744 r11755  
    18451845
    18461846.register-page .signup-form .editfield {
    1847     border: 1px solid #eee;
    1848     margin: 20px 0;
    1849     padding: 5px;
     1847    margin: 15px 0;
    18501848}
    18511849
    … …  
    18561854
    18571855.register-page .signup-form .editfield fieldset legend {
     1856    margin: 0 0 5px;
    18581857    text-indent: 0;
    18591858}
    … …  
    18691868.register-page .signup-form #signup-avatar img {
    18701869    margin: 0 0 10px 15px;
     1870}
     1871
     1872.register-page .signup-form .password-entry,
     1873.register-page .signup-form .password-entry-confirm {
     1874    border: 1px solid #eee;
    18711875}
    18721876
    … …  
    42504254    border-width: 1px;
    42514255    display: none;
     4256    font-weight: 700;
    42524257    margin: 10px 0 10px 0;
    42534258    padding: 0.5em;
    … …  
    42564261}
    42574262
     4263.buddypress-wrap #pass-strength-result.show {
     4264    display: block;
     4265}
     4266
     4267.buddypress-wrap #pass-strength-result.mismatch {
     4268    background-color: #333;
     4269    border-color: transparent;
     4270    color: #fff;
     4271}
     4272
    42584273.buddypress-wrap #pass-strength-result.error, .buddypress-wrap #pass-strength-result.bad {
    42594274    background-color: #ffb78c;
    42604275    border-color: #ff853c;
    4261     display: block;
     4276    color: #fff;
    42624277}
    42634278
    … …  
    42654280    background-color: #ffa0a0;
    42664281    border-color: #f04040;
    4267     display: block;
     4282    color: #fff;
    42684283}
    42694284
    … …  
    42714286    background-color: #66d66e;
    42724287    border-color: #438c48;
    4273     display: block;
     4288    color: #fff;
    42744289}
    42754290

  • trunk/src/bp-templates/bp-nouveau/css/buddypress.css

    r11744 r11755  
    18451845
    18461846.register-page .signup-form .editfield {
    1847     border: 1px solid #eee;
    1848     margin: 20px 0;
    1849     padding: 5px;
     1847    margin: 15px 0;
    18501848}
    18511849
    … …  
    18561854
    18571855.register-page .signup-form .editfield fieldset legend {
     1856    margin: 0 0 5px;
    18581857    text-indent: 0;
    18591858}
    … …  
    18691868.register-page .signup-form #signup-avatar img {
    18701869    margin: 0 15px 10px 0;
     1870}
     1871
     1872.register-page .signup-form .password-entry,
     1873.register-page .signup-form .password-entry-confirm {
     1874    border: 1px solid #eee;
    18711875}
    18721876
    … …  
    42504254    border-width: 1px;
    42514255    display: none;
     4256    font-weight: 700;
    42524257    margin: 10px 0 10px 0;
    42534258    padding: 0.5em;
    … …  
    42564261}
    42574262
     4263.buddypress-wrap #pass-strength-result.show {
     4264    display: block;
     4265}
     4266
     4267.buddypress-wrap #pass-strength-result.mismatch {
     4268    background-color: #333;
     4269    border-color: transparent;
     4270    color: #fff;
     4271}
     4272
    42584273.buddypress-wrap #pass-strength-result.error, .buddypress-wrap #pass-strength-result.bad {
    42594274    background-color: #ffb78c;
    42604275    border-color: #ff853c;
    4261     display: block;
     4276    color: #fff;
    42624277}
    42634278
    … …  
    42654280    background-color: #ffa0a0;
    42664281    border-color: #f04040;
    4267     display: block;
     4282    color: #fff;
    42684283}
    42694284
    … …  
    42714286    background-color: #66d66e;
    42724287    border-color: #438c48;
    4273     display: block;
     4288    color: #fff;
    42744289}
    42754290

  • trunk/src/bp-templates/bp-nouveau/js/password-verify.js

    r11686 r11755  
    99
    1010        // Reset classes and result text
    11         $( '#pass-strength-result' ).removeClass( 'short bad good strong' );
     11        $( '#pass-strength-result' ).removeClass( 'show mismatch short bad good strong' );
    1212        if ( ! pass1 ) {
    1313            $( '#pass-strength-result' ).html( pwsL10n.empty );
    … …  
    1919        switch ( strength ) {
    2020            case 2:
    21                 $( '#pass-strength-result' ).addClass( 'bad' ).html( pwsL10n.bad );
     21                $( '#pass-strength-result' ).addClass( 'show bad' ).html( pwsL10n.bad );
    2222                break;
    2323            case 3:
    24                 $( '#pass-strength-result' ).addClass( 'good' ).html( pwsL10n.good );
     24                $( '#pass-strength-result' ).addClass( 'show good' ).html( pwsL10n.good );
    2525                break;
    2626            case 4:
    27                 $( '#pass-strength-result' ).addClass( 'strong' ).html( pwsL10n.strong );
     27                $( '#pass-strength-result' ).addClass( 'show strong' ).html( pwsL10n.strong );
    2828                break;
    2929            case 5:
    30                 $( '#pass-strength-result' ).addClass( 'short' ).html( pwsL10n.mismatch );
     30                $( '#pass-strength-result' ).addClass( 'show mismatch' ).html( pwsL10n.mismatch );
    3131                break;
    3232            default:
    33                 $( '#pass-strength-result' ).addClass( 'short' ).html( pwsL10n['short'] );
     33                $( '#pass-strength-result' ).addClass( 'show short' ).html( pwsL10n['short'] );
    3434                break;
    3535        }

  • trunk/src/bp-templates/bp-nouveau/sass/buddypress.scss

    r11686 r11755  
    1616@import "../common-styles/_bp-mixins";
    1717
    18 //
     18
    1919// Sectional structuring allows us to locate elements
    2020// & to keep a degree of clarity in mind as to BP
Note: See TracChangeset for help on using the changeset viewer.