Make WordPress Core

Ticket #57949: 57949.diff

File 57949.diff, 3.7 KB (added by joedolson, 5 months ago)

Patch to adjust position and layout of search

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

     
    10811081}
    10821082
    10831083.wp-filter .search-form input[type="search"] {
    1084         margin: 1px 0;
    10851084        width: 280px;
    10861085        max-width: 100%;
    10871086}
     
    40634062        }
    40644063
    40654064        .wp-filter .search-form input[type="search"] {
     4065                width: 100%;
    40664066                font-size: 1rem;
    40674067        }
    40684068
     
    41164116        .nav-tab-active:focus:active {
    41174117                border-bottom: 1px solid #c3c4c7;
    41184118        }
    4119 
    4120         .wp-filter .search-form input[type="search"] {
    4121                 width: 100%;
    4122         }
    41234119}
    41244120
    41254121@media screen and (max-width: 480px) {
  • src/wp-admin/css/forms.css

     
    16501650
    16511651        p.search-box {
    16521652                float: none;
    1653                 position: absolute;
    1654                 bottom: 0;
    1655                 width: 98%;
    1656                 height: 90px;
     1653                width: 100%;
    16571654                margin-bottom: 20px;
     1655                display: flex;
    16581656        }
    16591657
    16601658        p.search-box input[name="s"] {
  • src/wp-admin/css/media.css

     
    583583        margin-top: 0;
    584584}
    585585
    586 .media-search-input-label {
    587         margin: 0 .2em 0 0;
    588         vertical-align: baseline;
    589 }
    590 
    591 .media-frame.mode-grid .media-search-input-label {
    592         position: static;
    593         margin: 0 .5em 0 0;
    594 }
    595 
    596586.attachments-browser .media-toolbar-secondary > .media-button {
    597587        margin-right: 10px;
    598588}
  • src/wp-admin/includes/class-wp-media-list-table.php

     
    312312                        </div>
    313313
    314314                        <div class="search-form">
    315                                 <label for="media-search-input" class="media-search-input-label"><?php esc_html_e( 'Search' ); ?></label>
    316                                 <input type="search" id="media-search-input" class="search" name="s" value="<?php _admin_search_query(); ?>">
     315                                <p class="search-box">
     316                                        <label class="screen-reader-text" for="media-search-input">
     317                                        <?php
     318                                        /* translators: Hidden accessibility text. */
     319                                        esc_html_e( 'Search Media' );
     320                                        ?>
     321                                        </label>
     322                                        <input type="search" id="media-search-input" class="search" name="s" value="<?php _admin_search_query(); ?>">
     323                                        <input id="search-submit" type="submit" class="button" value="<?php esc_attr_e( 'Search Media' ); ?>">
     324                                </p>
    317325                        </div>
    318326                </div>
    319327                <?php
  • src/wp-includes/css/media-views.css

     
    924924        max-width: 100%;
    925925}
    926926
    927 .media-frame .media-search-input-label {
    928         position: absolute;
    929         left: 0;
    930         top: 10px;
    931         margin: 0;
    932         line-height: 1;
    933 }
    934 
    935927/**
    936928 * Attachments
    937929 */
     
    12171209.mode-grid .attachments-browser .media-toolbar-primary {
    12181210        display: flex;
    12191211        align-items: center;
     1212        column-gap: .5rem;
    12201213}
    12211214
    12221215.mode-grid .attachments-browser .media-toolbar-mode-select .media-toolbar-primary {
     
    28062799        }
    28072800
    28082801        .mode-grid .attachments-browser .media-toolbar-primary {
    2809                 display: block;
     2802                display: flex;
    28102803        }
    28112804
     2805        .mode-grid .attachments-browser .media-toolbar-primary input[type="search"] {
     2806                width: 100%;
     2807        }
     2808
    28122809        .media-sidebar .copy-to-clipboard-container .success,
    28132810        .attachment-details .copy-to-clipboard-container .success {
    28142811                font-size: 14px;