Make WordPress Core

Changeset 47266


Ignore:
Timestamp:
02/11/2020 04:30:13 PM (4 years ago)
Author:
afercia
Message:

Media: Fix bottom spacing on various Media Modal elements for non-webkit browsers.

Implementation of bottom padding in overflow content differs across browsers. See https://github.com/w3c/csswg-drafts/issues/129. To make bottom spacing consistent across browsers there's the need for an alternate CSS method.

  • uses a CSS after pseudo element or simply a bottom margin to reserve some bottom spacing
  • removes a couple leftovers from [40428]
  • fixes an annoying visual glitch where the media modal content is visible behind the bottom toolbar border

Props sabernhardt, afercia.
See #40152.
Fixes #48378.

Location:
trunk/src
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/js/media/views/settings/attachment-display.js

    r46800 r47266  
    8484
    8585        $input.closest( '.setting' ).removeClass( 'hidden' );
     86        if ( $input.length ) {
     87            $input[0].scrollIntoView();
     88        }
    8689    }
    8790});
  • trunk/src/wp-includes/css/media-views.css

    r46866 r47266  
    308308.media-frame-toolbar .media-toolbar {
    309309    top: auto;
    310     bottom: -45px;
     310    bottom: -47px;
    311311    height: auto;
    312312    overflow: visible;
     
    347347    bottom: 0;
    348348    width: 267px;
    349     padding: 0 16px 24px;
     349    padding: 0 16px;
    350350    z-index: 75;
    351351    background: #f3f3f3;
     
    353353    overflow: auto;
    354354    -webkit-overflow-scrolling: touch;
     355}
     356
     357/*
     358 * Implementation of bottom padding in overflow content differs across browsers.
     359 * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
     360 */
     361.media-sidebar::after {
     362    content: "";
     363    display: flex;
     364    clear: both;
     365    height: 24px;
    355366}
    356367
     
    747758    left: 200px;
    748759    right: 0;
    749     bottom: 0;
    750     height: 60px;
    751760    z-index: 100;
    752761    bottom: 60px;
     
    18511860
    18521861.media-modal .imgedit-wrap .imgedit-panel-content {
    1853     padding: 16px;
     1862    padding: 16px 16px 0 16px;
    18541863    position: absolute;
    18551864    top: 0;
     
    18601869}
    18611870
     1871/*
     1872 * Implementation of bottom padding in overflow content differs across browsers.
     1873 * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
     1874 */
     1875.media-modal .imgedit-wrap .imgedit-submit {
     1876    margin-bottom: 16px;
     1877}
     1878
    18621879.media-modal .imgedit-wrap .imgedit-settings {
    18631880    background: #f3f3f3;
    18641881    border-left: 1px solid #ddd;
    1865     padding: 20px 16px 16px;
     1882    padding: 20px 16px 0;
    18661883    position: absolute;
    18671884    top: 0;
     
    18701887    width: 250px;
    18711888    overflow: auto;
     1889}
     1890
     1891/*
     1892 * Implementation of bottom padding in overflow content differs across browsers.
     1893 * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
     1894 */
     1895.media-modal .imgedit-wrap .imgedit-save-target {
     1896    margin: 8px 0 24px;
    18721897}
    18731898
     
    20022027    right: 0;
    20032028    bottom: 0;
    2004     padding: 0 16px 32px;
     2029    padding: 0 16px;
    20052030    overflow: auto;
     2031}
     2032
     2033/*
     2034 * Implementation of bottom padding in overflow content differs across browsers.
     2035 * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
     2036 */
     2037.embed-link-settings::after,
     2038.embed-media-settings::after {
     2039    content: "";
     2040    display: flex;
     2041    clear: both;
     2042    height: 24px;
    20062043}
    20072044
     
    20482085    overflow: visible;
    20492086    padding: 0;
     2087}
     2088
     2089.image-details .embed-media-settings::after {
     2090    content: none;
    20502091}
    20512092
     
    26702711
    26712712    .media-frame-toolbar .media-toolbar {
    2672         bottom: -48px;
     2713        bottom: -54px;
    26732714    }
    26742715}
Note: See TracChangeset for help on using the changeset viewer.