WordPress.org
Get WordPress

Make WordPress Core

Changeset 60410


Ignore:
Timestamp:
07/05/2025 06:20:40 AM (10 days ago)
Author:
audrasjb
Message:

Revisions: Improve revisions layout on mobile viewports.

On small screens, the restore revision button was mostly hidden due to excessive constraints on overflow height. Fix the overflow issue and ensure that restore revision buttons are always usable.

Reviewed by audrasjb.
Merges [60259] to the 6.8 branch.
Props yogeshbhutkar, getsyash, joedolson.
Fixes #63029.

Location:
branches/6.8
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • branches/6.8

  • branches/6.8/src/wp-admin/css/revisions.css

    r59225 r60410  
    573573}
    574574
     575@media screen and (max-width: 600px) {
     576    .revisions-meta .author-card:not(.comparing-two-revisions .author-card) {
     577        display: flex;
     578        flex-direction: column;
     579        width: fit-content;
     580        gap: 16px;
     581    }
     582
     583    .comparing-two-revisions .revisions-meta .restore-revision {
     584        margin-top: 16px;
     585    }
     586
     587    .revisions-controls {
     588        padding-top: 0;
     589    }
     590
     591    .revision-toggle-compare-mode {
     592        position: relative;
     593        padding: 1rem 0;
     594    }
     595}
     596
    575597@media screen and (max-width: 782px) {
    576598    #diff-next-revision,
    … …  
    586608    .revisions-controls,
    587609    .comparing-two-revisions .revisions-controls {
    588         height: 170px;
     610        height: fit-content;
    589611    }
    590612
    591613    .revisions-tooltip {
    592         bottom: 130px;
     614        bottom: 155px;
    593615        z-index: 2;
     616    }
     617
     618    .comparing-two-revisions .revisions-tooltip {
     619        bottom: 200px;
    594620    }
    595621

  • branches/6.8/src/wp-admin/includes/revision.php

    r59789 r60410  
    408408                <# } #>
    409409                <div class="author-card<# if ( data.attributes.autosave ) { #> autosave<# } #>">
    410                     {{{ data.attributes.author.avatar }}}
    411                     <div class="author-info" id="diff-title-author">
    412                     <# if ( data.attributes.autosave ) { #>
    413                         <span class="byline">
    414                         <?php
    415                         printf(
    416                             /* translators: %s: User's display name. */
    417                             __( 'Autosave by %s' ),
    418                             '<span class="author-name">{{ data.attributes.author.name }}</span>'
    419                         );
    420                         ?>
    421                             </span>
    422                     <# } else if ( data.attributes.current ) { #>
    423                         <span class="byline">
    424                         <?php
    425                         printf(
    426                             /* translators: %s: User's display name. */
    427                             __( 'Current Revision by %s' ),
    428                             '<span class="author-name">{{ data.attributes.author.name }}</span>'
    429                         );
    430                         ?>
    431                             </span>
    432                     <# } else { #>
    433                         <span class="byline">
    434                         <?php
    435                         printf(
    436                             /* translators: %s: User's display name. */
    437                             __( 'Revision by %s' ),
    438                             '<span class="author-name">{{ data.attributes.author.name }}</span>'
    439                         );
    440                         ?>
    441                             </span>
    442                     <# } #>
    443                         <span class="time-ago">{{ data.attributes.timeAgo }}</span>
    444                         <span class="date">({{ data.attributes.dateShort }})</span>
     410                    <div>
     411                        {{{ data.attributes.author.avatar }}}
     412                        <div class="author-info" id="diff-title-author">
     413                        <# if ( data.attributes.autosave ) { #>
     414                            <span class="byline">
     415                            <?php
     416                            printf(
     417                                /* translators: %s: User's display name. */
     418                                __( 'Autosave by %s' ),
     419                                '<span class="author-name">{{ data.attributes.author.name }}</span>'
     420                            );
     421                            ?>
     422                                </span>
     423                        <# } else if ( data.attributes.current ) { #>
     424                            <span class="byline">
     425                            <?php
     426                            printf(
     427                                /* translators: %s: User's display name. */
     428                                __( 'Current Revision by %s' ),
     429                                '<span class="author-name">{{ data.attributes.author.name }}</span>'
     430                            );
     431                            ?>
     432                                </span>
     433                        <# } else { #>
     434                            <span class="byline">
     435                            <?php
     436                            printf(
     437                                /* translators: %s: User's display name. */
     438                                __( 'Revision by %s' ),
     439                                '<span class="author-name">{{ data.attributes.author.name }}</span>'
     440                            );
     441                            ?>
     442                                </span>
     443                        <# } #>
     444                            <span class="time-ago">{{ data.attributes.timeAgo }}</span>
     445                            <span class="date">({{ data.attributes.dateShort }})</span>
     446                        </div>
    445447                    </div>
    446448                <# if ( 'to' === data.type && data.attributes.restoreUrl ) { #>
Note: See TracChangeset for help on using the changeset viewer.