WordPress.org

Make WordPress Core

Changeset 29474


Ignore:
Timestamp:
08/12/2014 11:01:38 PM (6 years ago)
Author:
helen
Message:

Plugin details modal:

  • Scroll all content, rather than the dual-pane scrolling awkwardness.
  • Better align the header image and title overlay with the display on WordPress.org, at least at full-width.
  • Move the close button outside of the modal itself, rather than overlay on top of colors we can't predict.

props stephdau, tellyworth, helen. fixes #27440.

Location:
trunk/src/wp-admin
Files:
3 edited

Legend:

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

    r29365 r29474  
    21272127/* Plugin install thickbox */
    21282128#plugin-information {
    2129     background: #fcfcfc;
     2129    background: #fff;
    21302130    position: fixed;
    21312131    top: 0;
     
    21332133    bottom: 0;
    21342134    left: 0;
    2135     height: auto;
     2135    height: 100%;
    21362136    padding: 0;
    21372137}
    21382138
     2139#plugin-information-scrollable {
     2140    display: block;
     2141    overflow: auto;
     2142    height: 100%;
     2143    padding-bottom: 58px;
     2144}
     2145
    21392146#plugin-information-title {
    2140     margin-right: 56px; /* avoid collisions with the close icon */
    21412147    padding: 0 20px;
     2148    background: #f5f5f5;
    21422149    font-size: 22px;
    21432150    font-weight: 600;
     
    21682175
    21692176#plugin-information-title.with-banner h2 {
     2177    display: inline-block;
    21702178    font-size: 30px;
    21712179    line-height: 50px;
    21722180    font-weight: bold;
    21732181    max-width: 760px;
    2174     position: absolute;
    2175     left: 20px;
    2176     top: 145px;
    21772182    padding: 0 15px;
    2178     margin: 0;
     2183    margin: 174px 0 0 10px;
    21792184    color: #fff;
    21802185    background: rgba( 30, 30, 30, 0.9 );
     
    21922197#plugin-information-title.with-banner div.vignette {
    21932198    display: block;
     2199    float: right;
    21942200    top: 0;
    2195     height: 215px;
     2201    height: 250px;
    21962202    width: 830px;
    21972203    margin: 0 -20px;
     
    22032209#plugin-information-tabs {
    22042210    padding: 0 16px;
    2205     position: absolute;
    2206     top: 56px;
     2211    position: relative;
    22072212    right: 0;
    22082213    left: 0;
    22092214    height: 36px;
    22102215    z-index: 1;
    2211 }
    2212 
    2213 #plugin-information-tabs.with-banner {
    2214     top: 214px;
    2215     background: rgba( 255, 255, 255, 0.85 );
     2216    border-bottom: 1px solid #ddd;
     2217    background: #f3f3f3;
    22162218}
    22172219
     
    22332235    background: #fff;
    22342236    border: 1px solid #ddd;
    2235     border-bottom: none;
     2237    border-bottom-color: #fff;
    22362238    padding-top: 8px;
    22372239    color: #333;
     
    22492251
    22502252#plugin-information-content {
     2253    overflow: hidden; /* equal height column trick */
    22512254    background: #fff;
    2252     border-top: 1px solid #ddd;
    2253     border-bottom: 1px solid #ddd;
    2254     position: absolute;
    2255     top: 91px;
     2255    position: relative;
     2256    top: 0;
    22562257    right: 0;
    2257     bottom: 58px;
    22582258    left: 0;
    2259     overflow: auto;
    2260 }
    2261 
    2262 #plugin-information-content.with-banner {
    2263     border-top: none;
    2264     top: 250px;
     2259    min-height: 100%;
     2260    min-height: calc( 100% - 346px );
    22652261}
    22662262
    22672263#section-holder {
    2268     margin: 0;
    2269     padding: 10px 26px;
    2270     position: absolute;
     2264    position: relative;
    22712265    top: 0;
    22722266    right: 250px;
    22732267    bottom: 0;
    22742268    left: 0;
    2275     overflow: auto;
     2269    margin-right: 250px; /* FYI box */
     2270    padding: 10px 26px;
     2271    margin-bottom: -99930px; /* a bit less than the padding below to accommodate footer */
     2272    padding-bottom: 99999px; /* equal height column trick */
    22762273}
    22772274
     
    22822279#plugin-information .fyi {
    22832280    display: block;
    2284     background: #f3f3f3;
    2285     border-left: 1px solid #ddd;
    2286     color: #666;
    2287     padding: 16px;
    2288     position: absolute;
     2281    float: right;
     2282    position: relative;
    22892283    top: 0;
    22902284    right: 0;
    2291     bottom: 0;
     2285    padding: 16px;
     2286    margin-bottom: -99930px; /* slightly less than the padding below to accommodate footer */
     2287    padding-bottom: 99999px; /* equal height column trick */
    22922288    width: 217px;
    2293     overflow: auto;
     2289    border-left: 1px solid #ddd;
     2290    background: #f3f3f3;
     2291    color: #666;
    22942292}
    22952293
     
    23762374    left: 0;
    23772375    height: 28px;
     2376    border-top: 1px solid #ddd;
     2377    background: #f3f3f3;
    23782378}
    23792379
     
    23882388    font-size: 14px;
    23892389    line-height: 1.7;
     2390}
     2391
     2392#plugin-information .section h4:first-of-type {
     2393    margin-top: 1em;
    23902394}
    23912395
     
    24202424}
    24212425
    2422 @media screen and ( max-width: 771px ), screen and ( max-height: 500px ) {
     2426@media screen and ( max-height: 500px ) {
    24232427    #plugin-information-title.with-banner {
    24242428        height: 100px;
     
    24272431
    24282432    #plugin-information-title.with-banner h2 {
    2429         top: 12px;
     2433        margin-top: 30px;
    24302434        font-size: 20px;
    24312435        line-height: 40px;
     
    24332437
    24342438    #plugin-information-title.with-banner div.vignette {
    2435         height: 65px;
    2436         bottom: 65px;
     2439        height: 100px;
     2440        bottom: 100px;
    24372441        width: 800%;
    2438     }
    2439 
    2440     #plugin-information-tabs.with-banner {
    2441         top: 63px;
    2442     }
    2443 
    2444     #plugin-information-content.with-banner {
    2445         top: 99px;
    24462442    }
    24472443}
     
    24492445@media screen and ( max-width: 771px ) {
    24502446    #plugin-information-tabs {
     2447        overflow: hidden; /* clearfix */
    24512448        padding: 0;
     2449        height: auto; /* let tabs wrap */
     2450    }
     2451
     2452    #plugin-information-tabs a.current {
     2453        margin-bottom: 0;
     2454        border-bottom: none;
    24522455    }
    24532456
    24542457    #plugin-information .fyi {
     2458        float: none;
    24552459        border: 1px solid #ddd;
    24562460        position: static;
    24572461        width: auto;
    2458         margin: 26px 26px 16px;
     2462        margin: 26px 26px 0;
     2463        padding-bottom: 0; /* reset from the two column height fix */
    24592464    }
    24602465
    24612466    #section-holder {
    24622467        position: static;
     2468        margin: 0;
     2469        padding-bottom: 70px; /* reset from the two column height fix, plus accomodate footer */
    24632470    }
    24642471
     
    25212528body.update-core-php .tb-close-icon,
    25222529body.index-php .tb-close-icon {
    2523     background: rgba( 255, 255, 255, .5);
    2524     color: #444;
    2525     line-height: 48px;
    2526     width: 48px;
    2527     height: 48px;
     2530    right: -30px;
     2531    color: #eee;
    25282532    -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
    25292533    transition: color .1s ease-in-out, background .1s ease-in-out;
     
    25402544body.index-php .tb-close-icon:focus,
    25412545body.index-php .tb-close-icon:hover {
    2542     background: #0074a2;
    2543     color: #fff;
     2546    color: #2ea2cc;
    25442547    outline: none;
    25452548    -webkit-box-shadow: none;
     
    25522555body.update-core-php .tb-close-icon:before,
    25532556body.index-php .tb-close-icon:before {
    2554     line-height: 48px;
     2557    content: "\f335";
     2558    font-size: 32px;
     2559}
     2560
     2561/* move plugin install close icon to top on narrow screens */
     2562@media screen and ( max-width: 830px ) {
     2563    body.plugin-install-php .tb-close-icon,
     2564    body.import-php .tb-close-icon,
     2565    body.plugins-php .tb-close-icon,
     2566    body.update-core-php .tb-close-icon,
     2567    body.index-php .tb-close-icon {
     2568        right: 0;
     2569        top: -30px;
     2570    }
    25552571}
    25562572
  • trunk/src/wp-admin/includes/plugin-install.php

    r29218 r29474  
    373373
    374374    iframe_header( __( 'Plugin Install' ) );
    375 
     375   
    376376    $_with_banner = '';
    377377
     
    394394    }
    395395
     396    echo '<div id="plugin-information-scrollable">';
    396397    echo "<div id='{$_tab}-title' class='{$_with_banner}'><div class='vignette'></div><h2>{$api->name}</h2></div>";
    397398    echo "<div id='{$_tab}-tabs' class='{$_with_banner}'>\n";
     
    514515    echo "</div>\n";
    515516    echo "</div>\n";
     517    echo "</div>\n"; // #plugin-information-scrollable
    516518    echo "<div id='$tab-footer'>\n";
    517519    if ( ! empty( $api->download_link ) && ( current_user_can( 'install_plugins' ) || current_user_can( 'update_plugins' ) ) ) {
  • trunk/src/wp-admin/js/plugin-install.js

    r29201 r29474  
    1818            if ( typeof document.body.style.maxWidth !== 'undefined' ) {
    1919                tbWindow.css({
    20                     'top': ( ( 792 < width ) ? 30 : 10 ) + 'px',
     20                    'top': '30px',
    2121                    'margin-top': '0'
    2222                });
Note: See TracChangeset for help on using the changeset viewer.