WordPress.org

Make WordPress Core

Changeset 29632


Ignore:
Timestamp:
08/26/2014 09:49:39 PM (6 years ago)
Author:
helen
Message:

Media modals: Better responsive views, especially the header.

  • Only show the "dropdown" when there is a menu. Note that this uses a :not() selector, but it is supported in browsers that support media queries so it is safe to use here.
  • Make the header shorter when on particularly narrow screens, which also tend to be shorter.
  • Don't restrict the height of images in the attachment details modal, to take advantage of all available space.

fixes #29339.

Location:
trunk/src
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/media.css

    r29625 r29632  
    11461146
    11471147@media only screen and (max-width: 480px) {
     1148    .edit-attachment-frame .media-frame-title {
     1149        right: 110px;
     1150    }
     1151
     1152    .upload-php .media-modal-close,
     1153    .edit-attachment-frame .edit-media-header .left,
     1154    .edit-attachment-frame .edit-media-header .right {
     1155        width: 40px;
     1156        height: 40px;
     1157    }
     1158
     1159    .upload-php .media-modal-close .media-modal-icon {
     1160        margin: 9px 10px;
     1161    }
     1162
     1163    .edit-attachment-frame .edit-media-header .right:before,
     1164    .edit-attachment-frame .edit-media-header .left:before {
     1165        line-height: 40px !important;
     1166    }
     1167
     1168    .edit-attachment-frame .edit-media-header .left {
     1169        right: 82px;
     1170    }
     1171
     1172    .edit-attachment-frame .edit-media-header .right {
     1173        right: 41px;
     1174    }
     1175
     1176    .edit-attachment-frame .media-frame-content {
     1177        top: 40px;
     1178    }
     1179
    11481180    .edit-attachment-frame .attachment-media-view {
    11491181        float: none;
    1150         max-height: 70%;
    11511182        height: auto;
    11521183        width: 100%;
    1153     }
    1154 
    1155     .edit-attachment-frame .attachment-media-view.portrait {
    1156         height: 70%;
    11571184    }
    11581185
  • trunk/src/wp-includes/css/media-views.css

    r29623 r29632  
    21482148
    21492149    /* Drop-down menu */
    2150     .media-frame .media-frame-title,
    2151     .media-frame .media-frame-router,
    2152     .media-frame .media-frame-content,
    2153     .media-frame .media-frame-toolbar {
     2150    .media-frame:not(.hide-menu) .media-frame-title,
     2151    .media-frame:not(.hide-menu) .media-frame-router,
     2152    .media-frame:not(.hide-menu) .media-frame-content,
     2153    .media-frame:not(.hide-menu) .media-frame-toolbar {
    21542154        left: 0;
    21552155    }
    21562156
    2157     .media-frame .media-frame-menu {
     2157    .media-frame:not(.hide-menu) .media-frame-menu {
    21582158        position: static;
    21592159        width: 0;
    21602160    }
    21612161
    2162     .media-frame .media-menu {
     2162    .media-frame:not(.hide-menu) .media-menu {
    21632163        width: auto;
    21642164        max-width: 80%;
     
    21732173    }
    21742174
    2175     .media-frame .media-menu.visible {
     2175    .media-frame:not(.hide-menu) .media-menu.visible {
    21762176        left: 0;
    21772177    }
    21782178
    2179     .media-frame .media-menu > a {
     2179    .media-frame:not(.hide-menu) .media-menu > a {
    21802180        padding: 12px 16px;
    21812181        font-size: 16px;
    21822182    }
    21832183
    2184     .media-frame .media-menu > a.active {
     2184    .media-frame:not(.hide-menu) .media-menu > a.active {
    21852185        display: none;
    21862186    }
    21872187
    2188     .media-frame .media-menu .separator {
     2188    .media-frame:not(.hide-menu) .media-menu .separator {
    21892189        margin: 5px 10px;
    21902190    }
    21912191
    2192     .media-frame .media-frame-title {
     2192    .media-frame:not(.hide-menu) .media-frame-title {
    21932193        left: 0;
    21942194        color: #21759b;
    21952195    }
    21962196
    2197     .media-frame .media-frame-title .dashicons {
     2197    .media-frame:not(.hide-menu) .media-frame-title .dashicons {
    21982198        display: inline-block;
    21992199        line-height: 50px;
    22002200    }
    22012201
    2202     .media-frame .media-frame-title h1 {
     2202    .media-frame:not(.hide-menu) .media-frame-title h1 {
    22032203        line-height: 3;
    22042204        font-size: 18px;
     
    24592459        max-width: 90px;
    24602460    }
     2461
     2462    .media-modal-close {
     2463        top: 5px;
     2464        right: 5px;
     2465    }
     2466
     2467    .media-modal .media-frame-title {
     2468        height: 40px;
     2469    }
     2470
     2471    .media-modal .media-frame-title h1,
     2472    .media-frame:not(.hide-menu) .media-frame-title h1 {
     2473        font-size: 18px;
     2474        line-height: 40px;
     2475    }
     2476
     2477    .media-frame:not(.hide-menu) .media-frame-title .dashicons {
     2478        line-height: 40px;
     2479    }
     2480
     2481    .media-frame-router,
     2482    .media-frame:not(.hide-menu) .media-menu {
     2483        top: 40px;
     2484    }
     2485
     2486    .media-frame-content {
     2487        top: 74px;
     2488    }
     2489
     2490    .media-frame.hide-router .media-frame-content {
     2491        top: 40px;
     2492    }
    24612493}
    24622494
Note: See TracChangeset for help on using the changeset viewer.