WordPress.org
Get WordPress

Make WordPress Core

Ticket #49288: 49288.4.diff

File 49288.4.diff, 9.5 KB (added by afercia, 4 years ago)

  • src/js/_enqueues/admin/postbox.js

     
    236236                                                .end();
    237237                                },
    238238                                opacity: 0.65,
     239                                start: function() {
     240                                        $( 'body' ).addClass( 'is-dragging-metaboxes' );
     241                                },
    239242                                stop: function() {
    240243                                        var $el = $( this );
    241244
     245                                        $( 'body' ).removeClass( 'is-dragging-metaboxes' );
     246
    242247                                        if ( $el.find( '#dashboard_browser_nag' ).is( ':visible' ) && 'dashboard_browser_nag' != this.firstChild.id ) {
    243248                                                $el.sortable('cancel');
    244249                                                return;
    245250                                        }
    246 
    247251                                        postboxes.save_order(page);
    248252                                },
    249253                                receive: function(e,ui) {
    … …  
    346350                 * @return {void}
    347351                 */
    348352                _mark_area : function() {
    349                         var visible = $('div.postbox:visible').length, side = $('#post-body #side-sortables');
     353                        var visible = $('div.postbox:visible').length,
     354                                isDashboard = $( '#dashboard-widgets' ).length;
    350355
    351                         $( '#dashboard-widgets .meta-box-sortables:visible' ).each( function() {
     356                        $( '#dashboard-widgets .meta-box-sortables:visible, #post-body .meta-box-sortables:visible' ).each( function() {
    352357                                var t = $(this);
    353358
    354359                                if ( visible == 1 || t.children('.postbox:visible').length ) {
    … …  
    356361                                }
    357362                                else {
    358363                                        t.addClass('empty-container');
    359                                         t.attr('data-emptyString', postBoxL10n.postBoxEmptyString);
     364                                        t.attr( 'data-emptyString', isDashboard ? postBoxL10n.postBoxEmptyString : null );
    360365                                }
    361366                        });
    362 
    363                         if ( side.length ) {
    364                                 if ( side.children('.postbox:visible').length )
    365                                         side.removeClass('empty-container');
    366                                 else if ( $('#postbox-container-1').css('width') == '280px' )
    367                                         side.addClass('empty-container');
    368                         }
    369367                },
    370368
    371369                /**

  • src/wp-admin/css/common.css

     
    2929        overflow: visible !important;
    3030}
    3131
    32 /* inner 2 column liquid layout */
    33 
    34 .inner-sidebar {
    35         float: right;
    36         clear: right;
    37         display: none;
    38         width: 281px;
    39         position: relative;
    40 }
    41 
    42 .columns-2 .inner-sidebar {
    43         margin-right: auto;
    44         width: 286px;
    45         display: block;
    46 }
    47 
    48 .inner-sidebar #side-sortables,
    49 .columns-2 .inner-sidebar #side-sortables {
    50         min-height: 300px;
    51         width: 280px;
    52         padding: 0;
    53 }
    54 
    55 .has-right-sidebar .inner-sidebar {
    56         display: block;
    57 }
    58 
    59 .has-right-sidebar #post-body {
    60         float: left;
    61         clear: left;
    62         width: 100%;
    63         margin-right: -2000px;
    64 }
    65 
    66 .has-right-sidebar #post-body-content {
    67         margin-right: 300px;
    68         float: none;
    69         width: auto;
    70 }
    71 
    7232/* 2 columns main area */
    7333
    7434#col-left {
    … …  
    19771937}
    19781938
    19791939.metabox-holder .postbox-container .empty-container {
    1980         border: 3px dashed #b4b9be;
     1940        outline: 3px dashed #b4b9be;
    19811941        height: 250px;
    19821942        position: relative;
    19831943}
    19841944
    1985 .metabox-holder .postbox-container .empty-container:after {
    1986         content: attr(data-emptystring);
    1987         margin: auto;
    1988         position: absolute;
    1989         top: 0;
    1990         left: 0;
    1991         bottom: 0;
    1992         right: 0;
    1993         height: 1em;
    1994         width: 200px;
    1995         text-align: center;
    1996         color: #ccc;
    1997         font-size: 18px;
    1998         display: none;
    1999 }
    2000 
    2001 .metabox-holder.columns-1 .postbox-container .empty-container,
    2002 .columns-2 #postbox-container-3 .empty-container,
    2003 .columns-2 #postbox-container-4 .empty-container,
    2004 .columns-3 #postbox-container-4 .empty-container {
    2005         border: 0 none;
    2006         height: 0;
    2007         min-height: 0;
    2008 }
    2009 
    20101945#post-body-content {
    20111946        width: 100%;
    20121947        min-width: 463px;
    … …  
    20261961/* one column on the dash */
    20271962@media only screen and (max-width: 799px) {
    20281963        #wpbody-content .metabox-holder .postbox-container .empty-container {
    2029                 border: 0 none;
     1964                outline: none;
    20301965                height: 0;
    20311966                min-height: 0;
    20321967        }

  • src/wp-admin/css/dashboard.css

     
    4848}
    4949
    5050#dashboard-widgets .meta-box-sortables {
    51         margin: 0 8px;
     51        /* Required min-height to make the jQuery UI Sortable drop zone work. */
    5252        min-height: 100px;
     53        margin: 0 8px 20px;
    5354}
    5455
     56/* Only highlight drop zones when dragging and only in the 2 columns layout. */
     57.is-dragging-metaboxes #dashboard-widgets .meta-box-sortables {
     58        outline: 3px dashed #606a73;
     59        /* Prevent margin on the child from collapsing with margin on the parent. */
     60        display: flow-root;
     61}
     62
     63#dashboard-widgets .postbox-container .empty-container:after {
     64        content: attr(data-emptystring);
     65        margin: auto;
     66        position: absolute;
     67        top: 0;
     68        left: 0;
     69        bottom: 0;
     70        right: 0;
     71        height: 1em;
     72        width: 200px;
     73        text-align: center;
     74        color: #606a73;
     75        font-size: 18px;
     76        display: none;
     77}
     78
     79
    5580/* @todo: this was originally in this section, but likely belongs elsewhere */
    5681#the-comment-list td.comment p.comment-author {
    5782        margin-top: 0;
    … …  
    10741099        #wpbody-content #dashboard-widgets .postbox-container {
    10751100                width: 100%;
    10761101        }
     1102
     1103        #dashboard-widgets .meta-box-sortables {
     1104                min-height: 0;
     1105        }
     1106
     1107        .is-dragging-metaboxes #dashboard-widgets .meta-box-sortables {
     1108                min-height: 100px;
     1109        }
     1110
     1111        #dashboard-widgets .meta-box-sortables.empty-container {
     1112                margin-bottom: 0;
     1113        }
    10771114}
    10781115
    10791116/* two columns on the dash, but keep the setting if one is selected */
    … …  
    10911128
    10921129        #dashboard-widgets #postbox-container-3 .empty-container,
    10931130        #dashboard-widgets #postbox-container-4 .empty-container {
    1094                 border: 0 none;
     1131                outline: none;
    10951132                height: 0;
    10961133                min-height: 0;
     1134                margin-bottom: 0;
    10971135        }
    10981136
    10991137        #dashboard-widgets #postbox-container-3 .empty-container:after,
    … …  
    11051143                width: 100%;
    11061144        }
    11071145
    1108         #wpbody #wpbody-content .metabox-holder.columns-1 .postbox-container .empty-container {
    1109                 border: 0 none;
     1146        #wpbody #dashboard-widgets .metabox-holder.columns-1 .postbox-container .empty-container {
     1147                outline: none;
    11101148                height: 0;
    11111149                min-height: 0;
     1150                margin-bottom: 0;
    11121151        }
    11131152
    11141153        /* show the radio buttons for column prefs only for one or two columns */
    … …  
    11221161                display: none;
    11231162        }
    11241163
    1125         .metabox-holder .postbox-container .empty-container:after {
     1164        #dashboard-widgets .postbox-container .empty-container:after {
    11261165                display: block;
    11271166        }
    11281167}
    … …  
    11431182        }
    11441183
    11451184        #dashboard-widgets #postbox-container-4 .empty-container {
    1146                 border: 0 none;
     1185                outline: none;
    11471186                height: 0;
    11481187                min-height: 0;
     1188                margin-bottom: 0;
    11491189        }
    11501190
    11511191        #dashboard-widgets #postbox-container-4 .empty-container:after {
    … …  
    11521192                display: none;
    11531193        }
    11541194
    1155         .metabox-holder .postbox-container .empty-container:after {
     1195        #dashboard-widgets .postbox-container .empty-container:after {
    11561196                display: block;
    11571197        }
    11581198}
    11591199
     1200/* Always show the "Drag boxes here" CSS generated content on large screens. */
     1201@media only screen and (min-width: 1801px) {
     1202        #dashboard-widgets .postbox-container .empty-container:after {
     1203                display: block;
     1204        }
     1205}
     1206
    11601207@media screen and (max-width: 870px) {
    11611208        .welcome-panel .welcome-panel-column,
    11621209        .welcome-panel .welcome-panel-column:first-child {

  • src/wp-admin/css/edit.css

     
    147147}
    148148
    149149/* Post Screen */
    150 #post-body #normal-sortables {
    151         min-height: 50px;
     150
     151/* Only target the sortables in the post screen excluding the ones in the Dashboard. */
     152#post-body .meta-box-sortables {
     153        /* Required min-height to make the jQuery UI Sortable drop zone work. */
     154        min-height: 1px;
    152155}
    153156
     157/* Resets height and outline inherited from common.css. */
     158#post-body.columns-1 #side-sortables.empty-container,
     159#post-body #normal-sortables.empty-container,
     160#post-body #advanced-sortables.empty-container {
     161        height: auto;
     162        outline: none;
     163}
     164
     165/* Only highlight drop zones when dragging and only in the 2 columns layout. */
     166.is-dragging-metaboxes #post-body.columns-2 #side-sortables,
     167.is-dragging-metaboxes #post-body #normal-sortables,
     168.is-dragging-metaboxes #post-body #advanced-sortables {
     169        outline: 3px dashed #606a73;
     170        /* Prevent margin on the child from collapsing with margin on the parent. */
     171        display: flow-root;
     172        /*
     173         * This min-height is meant to limit jumpiness while dragging. It's equivalent
     174         * to the minimum height of the sortable-placeholder which is given by the height
     175         * of a collapsed post box (36px + 1px top and bottom borders) + the placeholder
     176         * bottom margin (20px) + 2 additional pixels to compensate browsers rounding.
     177         */
     178        min-height: 60px;
     179        margin-bottom: 20px;
     180}
     181
    154182.postbox {
    155183        position: relative;
    156184        min-width: 255px;
    … …  
    14461474        }
    14471475}
    14481476
    1449 /* one column on the attachment editor screen */
     1477/*
     1478 * The edit attachment screen auto-switches to one column layout when the
     1479 * viewport is smaller than 1200 pixels.
     1480 */
    14501481@media only screen and (max-width: 1200px) {
    14511482        .post-type-attachment #poststuff {
    14521483                min-width: 0;
    … …  
    14631494
    14641495        .post-type-attachment #poststuff #postbox-container-1 .empty-container,
    14651496        .post-type-attachment #poststuff #postbox-container-1 #side-sortables:empty {
    1466                 border: 0 none;
     1497                outline: none;
    14671498                height: 0;
    14681499                min-height: 0;
    14691500        }
    … …  
    14731504                width: auto;
    14741505        }
    14751506
     1507        .is-dragging-metaboxes.post-type-attachment #post-body .meta-box-sortables {
     1508                outline: none;
     1509                min-height: 0;
     1510                margin-bottom: 0;
     1511        }
     1512
    14761513        /* hide the radio buttons for column prefs */
    14771514        .post-type-attachment .screen-layout,
    14781515        .post-type-attachment .columns-prefs {
    … …  
    14971534
    14981535        #poststuff #postbox-container-1 .empty-container,
    14991536        #poststuff #postbox-container-1 #side-sortables:empty {
    1500                 border: 0 none;
     1537                outline: none;
    15011538                height: 0;
    15021539                min-height: 0;
    15031540        }