WordPress.org
Get WordPress

Make WordPress Core

Changeset 29496


Ignore:
Timestamp:
08/15/2014 04:09:58 AM (10 years ago)
Author:
helen
Message:

Small screen responsive for attachment details modal. see #28844.

Location:
trunk/src/wp-includes
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-includes/css/media-views.css

    r29490 r29496  
    286286}
    287287
    288 .media-sidebar .setting {
     288.attachment-details .setting {
    289289    display: block;
    290290    float: left;
    … …  
    293293}
    294294
    295 .media-sidebar .setting label {
    296     display: block;
    297 }
    298 
    299 .media-sidebar .setting .link-to-custom {
     295.attachment-details .setting label {
     296    display: block;
     297}
     298
     299.attachment-details .setting .link-to-custom {
    300300    margin: 3px 2px 0;
    301301}
    302302
    303 .media-sidebar .setting span {
     303.attachment-details .setting span {
    304304    min-width: 30%;
    305305    margin-right: 4%;
    … …  
    308308}
    309309
    310 .media-sidebar .setting select {
     310.attachment-details .setting select {
    311311    max-width: 65%;
    312312}
    313313
    314 .media-sidebar .setting input[type="checkbox"],
    315 .media-sidebar .field input[type="checkbox"],
    316 .media-sidebar .setting input[type="radio"],
    317 .media-sidebar .field input[type="radio"] {
     314.attachment-details .setting input[type="checkbox"],
     315.attachment-details .field input[type="checkbox"],
     316.attachment-details .setting input[type="radio"],
     317.attachment-details .field input[type="radio"] {
    318318    float: none;
    319319    margin: 8px 3px 0;
    … …  
    321321}
    322322
    323 .media-sidebar .setting span,
     323.attachment-details .setting span,
    324324.compat-item label span {
    325325    float: left;
    … …  
    335335}
    336336
    337 .media-sidebar .setting input[type="text"],
    338 .media-sidebar .setting input[type="password"],
    339 .media-sidebar .setting input[type="email"],
    340 .media-sidebar .setting input[type="number"],
    341 .media-sidebar .setting input[type="search"],
    342 .media-sidebar .setting input[type="tel"],
    343 .media-sidebar .setting input[type="url"],
    344 .media-sidebar .setting textarea,
    345 .media-sidebar .setting .value {
     337.attachment-details .setting input[type="text"],
     338.attachment-details .setting input[type="password"],
     339.attachment-details .setting input[type="email"],
     340.attachment-details .setting input[type="number"],
     341.attachment-details .setting input[type="search"],
     342.attachment-details .setting input[type="tel"],
     343.attachment-details .setting input[type="url"],
     344.attachment-details .setting textarea,
     345.attachment-details .setting .value {
     346    box-sizing: border-box;
    346347    margin: 1px;
    347348    width: 65%;
    … …  
    349350}
    350351
    351 .media-sidebar .setting .value {
     352.attachment-details .setting .value {
    352353    margin: 0 1px;
    353354    text-align: left;
    354355}
    355356
    356 .media-sidebar .setting textarea,
     357.attachment-details .setting textarea,
    357358.compat-item .field textarea {
    358359    height: 62px;
    … …  
    360361}
    361362
    362 .media-sidebar select {
     363.attachment-details select {
    363364    margin-top: 3px;
    364365}
    … …  
    21732174
    21742175    /* Drop-down menu */
    2175     .media-frame-title,
    2176     .media-frame-router,
    2177     .media-frame-content,
    2178     .media-frame-toolbar {
     2176    .media-frame .media-frame-title,
     2177    .media-frame .media-frame-router,
     2178    .media-frame .media-frame-content,
     2179    .media-frame .media-frame-toolbar {
    21792180        left: 0;
    21802181    }
    21812182
    2182     .media-frame-menu {
     2183    .media-frame .media-frame-menu {
    21832184        position: static;
    21842185        width: 0;
    21852186    }
    21862187
    2187     .media-menu {
     2188    .media-frame .media-menu {
    21882189        width: auto;
    21892190        max-width: 80%;
    … …  
    21982199    }
    21992200
    2200     .media-menu.visible {
     2201    .media-frame .media-menu.visible {
    22012202        left: 0;
    22022203    }
    22032204
    2204     .media-menu > a {
     2205    .media-frame .media-menu > a {
    22052206        padding: 12px 16px;
    22062207        font-size: 16px;
    22072208    }
    22082209
    2209     .media-menu > a.active {
     2210    .media-frame .media-menu > a.active {
    22102211        display: none;
    22112212    }
    22122213
    2213     .media-menu .separator {
     2214    .media-frame .media-menu .separator {
    22142215        margin: 5px 10px;
    22152216    }
    22162217
    2217     .media-frame-title {
     2218    .media-frame .media-frame-title {
    22182219        left: 0;
    22192220        color: #21759b;
    22202221    }
    22212222
    2222     .media-frame-title .dashicons {
     2223    .media-frame .media-frame-title .dashicons {
    22232224        display: inline-block;
    22242225        line-height: 56px;
    22252226    }
    22262227
    2227     .media-frame-title h1 {
     2228    .media-frame .media-frame-title h1 {
    22282229        line-height: 3;
    22292230        font-size: 18px;
    … …  
    22432244    }
    22442245
    2245     .media-sidebar .setting {
     2246    .attachment-details .setting {
    22462247        margin: 6px 0px;
    22472248    }
    22482249
    2249     .media-sidebar .setting input,
    2250     .media-sidebar .setting textarea,
    2251     .media-sidebar .setting span,
     2250    .attachment-details .setting input,
     2251    .attachment-details .setting textarea,
     2252    .attachment-details .setting span,
    22522253    .compat-item label span {
    22532254        float: none;
    22542255    }
    22552256
    2256     .media-sidebar .setting span,
     2257    .attachment-details .setting span,
    22572258    .compat-item label span {
    22582259        text-align: inherit;
    … …  
    22622263    }
    22632264
    2264     .media-sidebar .setting .value {
     2265    .attachment-details .setting .value {
    22652266        float: none;
    22662267        width: auto;
    22672268    }
    22682269
    2269     .media-sidebar .setting input[type="text"],
    2270     .media-sidebar .setting input[type="password"],
    2271     .media-sidebar .setting input[type="email"],
    2272     .media-sidebar .setting input[type="number"],
    2273     .media-sidebar .setting input[type="search"],
    2274     .media-sidebar .setting input[type="tel"],
    2275     .media-sidebar .setting input[type="url"],
    2276     .media-sidebar .setting textarea,
    2277     .media-sidebar .setting select {
     2270    .attachment-details .setting input[type="text"],
     2271    .attachment-details .setting input[type="password"],
     2272    .attachment-details .setting input[type="email"],
     2273    .attachment-details .setting input[type="number"],
     2274    .attachment-details .setting input[type="search"],
     2275    .attachment-details .setting input[type="tel"],
     2276    .attachment-details .setting input[type="url"],
     2277    .attachment-details .setting textarea,
     2278    .attachment-details .setting select {
     2279        float: none;
    22782280        width: 98%;
    22792281        max-width: none;
    … …  
    22812283    }
    22822284
    2283     .media-sidebar .setting select.columns {
     2285    .attachment-details .setting select.columns {
    22842286        width: auto;
    22852287    }
    … …  
    27432745    margin-bottom: 16px;
    27442746    max-width: 100%;
     2747    max-height: 90%;
    27452748    max-height: -webkit-calc( 100% - 42px );
    27462749    max-height: calc( 100% - 42px ); /* leave space for actions underneath */
    2747 }
    2748 
    2749 .edit-attachment-frame .delete-attachment,
    2750 .edit-attachment-frame .trash-attachment,
    2751 .edit-attachment-frame .untrash-attachment {
    2752     float: right;
    2753     margin-top: 7px;
    27542750}
    27552751
    … …  
    27742770}
    27752771
     2772.edit-attachment-frame .attachment-info .details,
     2773.edit-attachment-frame .attachment-info .settings {
     2774    overflow: hidden;
     2775    float: none;
     2776    margin-bottom: 15px;
     2777    padding-bottom: 15px;
     2778    border-bottom: 1px solid #ddd;
     2779}
     2780
     2781.attachment-info .actions {
     2782    margin-bottom: 16px;
     2783}
     2784
     2785.attachment-info .actions a {
     2786    display: inline;
     2787    text-decoration: none;
     2788}
     2789
    27762790.edit-attachment-frame input,
    27772791.edit-attachment-frame textarea {
    27782792    padding: 6px 8px;
    27792793    line-height: 16px;
    2780 }
    2781 
    2782 .edit-attachment-frame .attachment-info .details,
    2783 .edit-attachment-frame .attachment-info .settings {
    2784     overflow: hidden;
    2785     float: none;
    2786     position: relative;
    2787     margin-bottom: 15px;
    2788     padding-bottom: 15px;
    2789     border-bottom: 1px solid #ddd;
    2790 }
    2791 
    2792 .edit-attachment-frame .attachment-info .setting {
    2793     display: block;
    2794     float: left;
    2795     width: 100%;
    2796     margin: 1px 0;
    2797 }
    2798 
    2799 .edit-attachment-frame .attachment-info .setting label {
    2800     display: block;
    2801 }
    2802 
    2803 .edit-attachment-frame .attachment-info .setting .link-to-custom {
    2804     margin: 3px 0;
    2805 }
    2806 
    2807 .edit-attachment-frame .attachment-info .setting .name {
    2808     min-width: 30%;
    2809     margin-right: 4%;
    2810     font-size: 12px;
    2811     text-align: right;
    2812 }
    2813 
    2814 .edit-attachment-frame .attachment-info .setting select {
    2815     max-width: 65%;
    2816 }
    2817 
    2818 .edit-attachment-frame .attachment-info .setting input[type="checkbox"],
    2819 .edit-attachment-frame .attachment-info .field input[type="checkbox"],
    2820 .edit-attachment-frame .attachment-info .setting input[type="radio"],
    2821 .edit-attachment-frame .attachment-info .field input[type="radio"] {
    2822     float: none;
    2823     margin: 8px 3px 0;
    2824     padding: 0;
    2825 }
    2826 
    2827 .edit-attachment-frame .attachment-info .setting span {
    2828     float: left;
    2829     min-height: 22px;
    2830     padding-top: 8px;
    2831     line-height: 16px;
    2832     font-weight: normal;
    2833     color: #666;
    2834 }
    2835 
    2836 .edit-attachment-frame .attachment-info .setting input[type="text"],
    2837 .edit-attachment-frame .attachment-info .setting input[type="password"],
    2838 .edit-attachment-frame .attachment-info .setting input[type="email"],
    2839 .edit-attachment-frame .attachment-info .setting input[type="number"],
    2840 .edit-attachment-frame .attachment-info .setting input[type="search"],
    2841 .edit-attachment-frame .attachment-info .setting input[type="email"],
    2842 .edit-attachment-frame .attachment-info .setting input[type="url"],
    2843 .edit-attachment-frame .attachment-info .setting textarea,
    2844 .edit-attachment-frame .attachment-info .setting .value {
    2845     margin: 1px;
    2846     width: 65%;
    2847     float: right;
    2848     -webkit-box-sizing: border-box;
    2849     -moz-box-sizing: border-box;
    2850     box-sizing: border-box;
    2851 }
    2852 
    2853 .edit-attachment-frame .attachment-info .setting textarea {
    2854     height: 62px;
    2855     resize: vertical;
    2856 }
    2857 
    2858 .edit-attachment-frame .attachment-info select {
    2859     margin-top: 3px;
    28602794}
    28612795
    … …  
    28782812}
    28792813
     2814@media only screen and (max-width: 480px) {
     2815    .edit-attachment-frame .attachment-media-view {
     2816        float: none;
     2817        max-height: 70%;
     2818        height: auto;
     2819        width: 100%;
     2820    }
     2821
     2822    .edit-attachment-frame .attachment-media-view.portrait {
     2823        height: 70%;
     2824    }
     2825
     2826    .edit-attachment-frame .attachment-info {
     2827        height: auto;
     2828        width: 100%;
     2829    }
     2830}
     2831
    28802832.attachments[data-columns="1"] .attachment {
    28812833    width: 100%;

  • trunk/src/wp-includes/media-template.php

    r29491 r29496  
    273273
    274274    <script type="text/html" id="tmpl-attachment-details-two-column">
    275         <div class="attachment-media-view">
     275        <div class="attachment-media-view {{ data.orientation }}">
    276276            <div class="thumbnail thumbnail-{{ data.type }}">
    277277                <# if ( data.uploading ) { #>
    … …  
    314314                        <a class="button edit-attachment" href="#"><?php _e( 'Edit Image' ); ?></a>
    315315                    <# } #>
    316 
    317                     <# if ( ! data.uploading && data.can.remove ) { #>
     316                </div>
     317            </div>
     318        </div>
     319        <div class="attachment-info">
     320            <span class="settings-save-status">
     321                <span class="spinner"></span>
     322                <span class="saved"><?php esc_html_e('Saved.'); ?></span>
     323            </span>
     324            <div class="details">
     325                <div class="filename"><strong><?php _e( 'File name:' ); ?></strong> {{ data.filename }}</div>
     326                <div class="filename"><strong><?php _e( 'File type:' ); ?></strong> {{ data.mime }}</div>
     327                <div class="uploaded"><strong><?php _e( 'Uploaded on:' ); ?></strong> {{ data.dateFormatted }}</div>
     328
     329                <div class="file-size"><strong><?php _e( 'File size:' ); ?></strong> {{ data.filesizeHumanReadable }}</div>
     330                <# if ( 'image' === data.type && ! data.uploading ) { #>
     331                    <# if ( data.width && data.height ) { #>
     332                        <div class="dimensions"><strong><?php _e( 'Dimensions:' ); ?></strong> {{ data.width }} &times; {{ data.height }}</div>
     333                    <# } #>
     334                <# } #>
     335
     336                <# if ( data.fileLength ) { #>
     337                    <div class="file-length"><strong><?php _e( 'Length:' ); ?></strong> {{ data.fileLength }}</div>
     338                <# } #>
     339
     340                <# if ( 'audio' === data.type && data.meta.bitrate ) { #>
     341                    <div class="bitrate">
     342                        <strong><?php _e( 'Bitrate:' ); ?></strong> {{ Math.round( data.meta.bitrate / 1000 ) }}kb/s
     343                        <# if ( data.meta.bitrate_mode ) { #>
     344                        {{ ' ' + data.meta.bitrate_mode.toUpperCase() }}
     345                        <# } #>
     346                    </div>
     347                <# } #>
     348
     349                <div class="compat-meta">
     350                    <# if ( data.compat && data.compat.meta ) { #>
     351                        {{{ data.compat.meta }}}
     352                    <# } #>
     353                </div>
     354            </div>
     355
     356            <div class="settings">
     357                <label class="setting" data-setting="url">
     358                    <span class="name"><?php _e('URL'); ?></span>
     359                    <input type="text" value="{{ data.url }}" readonly />
     360                </label>
     361                <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
     362                <label class="setting" data-setting="title">
     363                    <span class="name"><?php _e('Title'); ?></span>
     364                    <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
     365                </label>
     366                <# if ( 'audio' === data.type ) { #>
     367                <?php foreach ( array(
     368                    'artist' => __( 'Artist' ),
     369                    'album' => __( 'Album' ),
     370                ) as $key => $label ) : ?>
     371                <label class="setting" data-setting="<?php echo esc_attr( $key ) ?>">
     372                    <span class="name"><?php echo $label ?></span>
     373                    <input type="text" value="{{ data.<?php echo $key ?> || data.meta.<?php echo $key ?> || '' }}" />
     374                </label>
     375                <?php endforeach; ?>
     376                <# } #>
     377                <label class="setting" data-setting="caption">
     378                    <span class="name"><?php _e( 'Caption' ); ?></span>
     379                    <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
     380                </label>
     381                <# if ( 'image' === data.type ) { #>
     382                    <label class="setting" data-setting="alt">
     383                        <span class="name"><?php _e( 'Alt Text' ); ?></span>
     384                        <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
     385                    </label>
     386                <# } #>
     387                <label class="setting" data-setting="description">
     388                    <span class="name"><?php _e('Description'); ?></span>
     389                    <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
     390                </label>
     391                <label class="setting">
     392                    <span class="name"><?php _e( 'Uploaded By' ); ?></span>
     393                    <span class="value">{{ data.authorName }}</span>
     394                </label>
     395                <# if ( data.uploadedTo ) { #>
     396                    <label class="setting">
     397                        <span class="name"><?php _e( 'Uploaded To' ); ?></span>
     398                        <span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span>
     399                    </label>
     400                <# } #>
     401                <div class="attachment-compat"></div>
     402            </div>
     403
     404            <div class="actions">
     405                <a class="view-attachment" href="{{ data.link }}"><?php _e( 'View attachment page' ); ?></a> |
     406                <a href="post.php?post={{ data.id }}&action=edit"><?php _e( 'Edit more details' ); ?></a>
     407                <# if ( ! data.uploading && data.can.remove ) { #> |
    318408                        <?php if ( MEDIA_TRASH ): ?>
    319409                        <# if ( 'trash' === data.status ) { #>
    … …  
    326416                        <?php endif; ?>
    327417                    <# } #>
    328                 </div>
    329             </div>
    330         </div>
    331         <div class="attachment-info">
    332             <span class="settings-save-status">
    333                 <span class="spinner"></span>
    334                 <span class="saved"><?php esc_html_e('Saved.'); ?></span>
    335             </span>
    336             <div class="details">
    337                 <div class="filename"><strong><?php _e( 'File name:' ); ?></strong> {{ data.filename }}</div>
    338                 <div class="filename"><strong><?php _e( 'File type:' ); ?></strong> {{ data.mime }}</div>
    339                 <div class="uploaded"><strong><?php _e( 'Uploaded on:' ); ?></strong> {{ data.dateFormatted }}</div>
    340 
    341                 <div class="file-size"><strong><?php _e( 'File size:' ); ?></strong> {{ data.filesizeHumanReadable }}</div>
    342                 <# if ( 'image' === data.type && ! data.uploading ) { #>
    343                     <# if ( data.width && data.height ) { #>
    344                         <div class="dimensions"><strong><?php _e( 'Dimensions:' ); ?></strong> {{ data.width }} &times; {{ data.height }}</div>
    345                     <# } #>
    346                 <# } #>
    347 
    348                 <# if ( data.fileLength ) { #>
    349                     <div class="file-length"><strong><?php _e( 'Length:' ); ?></strong> {{ data.fileLength }}</div>
    350                 <# } #>
    351 
    352                 <# if ( 'audio' === data.type && data.meta.bitrate ) { #>
    353                     <div class="bitrate">
    354                         <strong><?php _e( 'Bitrate:' ); ?></strong> {{ Math.round( data.meta.bitrate / 1000 ) }}kb/s
    355                         <# if ( data.meta.bitrate_mode ) { #>
    356                         {{ ' ' + data.meta.bitrate_mode.toUpperCase() }}
    357                         <# } #>
    358                     </div>
    359                 <# } #>
    360 
    361                 <div class="compat-meta">
    362                     <# if ( data.compat && data.compat.meta ) { #>
    363                         {{{ data.compat.meta }}}
    364                     <# } #>
    365                 </div>
    366             </div>
    367 
    368             <div class="settings">
    369                 <label class="setting" data-setting="url">
    370                     <span class="name"><?php _e('URL'); ?></span>
    371                     <input type="text" value="{{ data.url }}" readonly />
    372                 </label>
    373                 <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
    374                 <label class="setting" data-setting="title">
    375                     <span class="name"><?php _e('Title'); ?></span>
    376                     <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
    377                 </label>
    378                 <# if ( 'audio' === data.type ) { #>
    379                 <?php foreach ( array(
    380                     'artist' => __( 'Artist' ),
    381                     'album' => __( 'Album' ),
    382                 ) as $key => $label ) : ?>
    383                 <label class="setting" data-setting="<?php echo esc_attr( $key ) ?>">
    384                     <span class="name"><?php echo $label ?></span>
    385                     <input type="text" value="{{ data.<?php echo $key ?> || data.meta.<?php echo $key ?> || '' }}" />
    386                 </label>
    387                 <?php endforeach; ?>
    388                 <# } #>
    389                 <label class="setting" data-setting="caption">
    390                     <span class="name"><?php _e( 'Caption' ); ?></span>
    391                     <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
    392                 </label>
    393                 <# if ( 'image' === data.type ) { #>
    394                     <label class="setting" data-setting="alt">
    395                         <span class="name"><?php _e( 'Alt Text' ); ?></span>
    396                         <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
    397                     </label>
    398                 <# } #>
    399                 <label class="setting" data-setting="description">
    400                     <span class="name"><?php _e('Description'); ?></span>
    401                     <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
    402                 </label>
    403                 <label class="setting">
    404                     <span class="name"><?php _e( 'Uploaded By' ); ?></span>
    405                     <span class="value">{{ data.authorName }}</span>
    406                 </label>
    407                 <# if ( data.uploadedTo ) { #>
    408                     <label class="setting">
    409                         <span class="name"><?php _e( 'Uploaded To' ); ?></span>
    410                         <span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span>
    411                     </label>
    412                 <# } #>
    413                 <div class="attachment-compat"></div>
    414             </div>
    415 
    416             <a class="view-attachment" href="{{ data.link }}"><?php _e( 'View attachment page' ); ?></a> |
    417             <a href="post.php?post={{ data.id }}&action=edit"><?php _e( 'Edit more details' ); ?></a>
     418            </div>
    418419
    419420        </div>
Note: See TracChangeset for help on using the changeset viewer.