Changeset 29474

Timestamp:

08/12/2014 11:01:38 PM (12 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:

• css/common.css (modified) (17 diffs)
• includes/plugin-install.php (modified) (3 diffs)
• js/plugin-install.js (modified) (1 diff)

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

@@ -2127 +2127 @@
 /* Plugin install thickbox */
 #plugin-information {
-        background: #fcfcfc;
+        background: #fff;
         position: fixed;
         top: 0;
@@ -2133 +2133 @@
         bottom: 0;
         left: 0;
-        height: auto;
+        height: 100%;
         padding: 0;
 }
 
+#plugin-information-scrollable {
+        display: block;
+        overflow: auto;
+        height: 100%;
+        padding-bottom: 58px;
+}
+
 #plugin-information-title {
-        margin-right: 56px; /* avoid collisions with the close icon */
         padding: 0 20px;
+        background: #f5f5f5;
         font-size: 22px;
         font-weight: 600;
@@ -2168 +2175 @@
 
 #plugin-information-title.with-banner h2 {
+        display: inline-block;
         font-size: 30px;
         line-height: 50px;
         font-weight: bold;
         max-width: 760px;
-        position: absolute;
-        left: 20px;
-        top: 145px;
         padding: 0 15px;
-        margin: 0;
+        margin: 174px 0 0 10px;
         color: #fff;
         background: rgba( 30, 30, 30, 0.9 );
@@ -2192 +2197 @@
 #plugin-information-title.with-banner div.vignette {
         display: block;
+        float: right;
         top: 0;
-        height: 215px;
+        height: 250px;
         width: 830px;
         margin: 0 -20px;
@@ -2203 +2209 @@
 #plugin-information-tabs {
         padding: 0 16px;
-        position: absolute;
-        top: 56px;
+        position: relative;
         right: 0;
         left: 0;
         height: 36px;
         z-index: 1;
-}
-
-#plugin-information-tabs.with-banner {
-        top: 214px;
-        background: rgba( 255, 255, 255, 0.85 );
+        border-bottom: 1px solid #ddd;
+        background: #f3f3f3;
 }
 
@@ -2233 +2235 @@
         background: #fff;
         border: 1px solid #ddd;
-        border-bottom: none;
+        border-bottom-color: #fff;
         padding-top: 8px;
         color: #333;
@@ -2249 +2251 @@
 
 #plugin-information-content {
+        overflow: hidden; /* equal height column trick */
         background: #fff;
-        border-top: 1px solid #ddd;
-        border-bottom: 1px solid #ddd;
-        position: absolute;
-        top: 91px;
+        position: relative;
+        top: 0;
         right: 0;
-        bottom: 58px;
         left: 0;
-        overflow: auto;
-}
-
-#plugin-information-content.with-banner {
-        border-top: none;
-        top: 250px;
+        min-height: 100%;
+        min-height: calc( 100% - 346px );
 }
 
 #section-holder {
-        margin: 0;
-        padding: 10px 26px;
-        position: absolute;
+        position: relative;
         top: 0;
         right: 250px;
         bottom: 0;
         left: 0;
-        overflow: auto;
+        margin-right: 250px; /* FYI box */
+        padding: 10px 26px;
+        margin-bottom: -99930px; /* a bit less than the padding below to accommodate footer */
+        padding-bottom: 99999px; /* equal height column trick */
 }
 
@@ -2282 +2279 @@
 #plugin-information .fyi {
         display: block;
-        background: #f3f3f3;
-        border-left: 1px solid #ddd;
-        color: #666;
-        padding: 16px;
-        position: absolute;
+        float: right;
+        position: relative;
         top: 0;
         right: 0;
-        bottom: 0;
+        padding: 16px;
+        margin-bottom: -99930px; /* slightly less than the padding below to accommodate footer */
+        padding-bottom: 99999px; /* equal height column trick */
         width: 217px;
-        overflow: auto;
+        border-left: 1px solid #ddd;
+        background: #f3f3f3;
+        color: #666;
 }
 
@@ -2376 +2374 @@
         left: 0;
         height: 28px;
+        border-top: 1px solid #ddd;
+        background: #f3f3f3;
 }
 
@@ -2388 +2388 @@
         font-size: 14px;
         line-height: 1.7;
+}
+
+#plugin-information .section h4:first-of-type {
+        margin-top: 1em;
 }
 
@@ -2420 +2424 @@
 }
 
-@media screen and ( max-width: 771px ), screen and ( max-height: 500px ) {
+@media screen and ( max-height: 500px ) {
         #plugin-information-title.with-banner {
                 height: 100px;
@@ -2427 +2431 @@
 
         #plugin-information-title.with-banner h2 {
-                top: 12px;
+                margin-top: 30px;
                 font-size: 20px;
                 line-height: 40px;
@@ -2433 +2437 @@
 
         #plugin-information-title.with-banner div.vignette {
-                height: 65px;
-                bottom: 65px;
+                height: 100px;
+                bottom: 100px;
                 width: 800%;
-        }
-
-        #plugin-information-tabs.with-banner {
-                top: 63px;
-        }
-
-        #plugin-information-content.with-banner {
-                top: 99px;
         }
 }
@@ -2449 +2445 @@
 @media screen and ( max-width: 771px ) {
         #plugin-information-tabs {
+                overflow: hidden; /* clearfix */
                 padding: 0;
+                height: auto; /* let tabs wrap */
+        }
+
+        #plugin-information-tabs a.current {
+                margin-bottom: 0;
+                border-bottom: none;
         }
 
         #plugin-information .fyi {
+                float: none;
                 border: 1px solid #ddd;
                 position: static;
                 width: auto;
-                margin: 26px 26px 16px;
+                margin: 26px 26px 0;
+                padding-bottom: 0; /* reset from the two column height fix */
         }
 
         #section-holder {
                 position: static;
+                margin: 0;
+                padding-bottom: 70px; /* reset from the two column height fix, plus accomodate footer */
         }
 
@@ -2521 +2528 @@
 body.update-core-php .tb-close-icon,
 body.index-php .tb-close-icon {
-        background: rgba( 255, 255, 255, .5);
-        color: #444;
-        line-height: 48px;
-        width: 48px;
-        height: 48px;
+        right: -30px;
+        color: #eee;
         -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
         transition: color .1s ease-in-out, background .1s ease-in-out;
@@ -2540 +2544 @@
 body.index-php .tb-close-icon:focus,
 body.index-php .tb-close-icon:hover {
-        background: #0074a2;
-        color: #fff;
+        color: #2ea2cc;
         outline: none;
         -webkit-box-shadow: none;
@@ -2552 +2555 @@
 body.update-core-php .tb-close-icon:before,
 body.index-php .tb-close-icon:before {
-        line-height: 48px;
+        content: "\f335";
+        font-size: 32px;
+}
+
+/* move plugin install close icon to top on narrow screens */
+@media screen and ( max-width: 830px ) {
+        body.plugin-install-php .tb-close-icon,
+        body.import-php .tb-close-icon,
+        body.plugins-php .tb-close-icon,
+        body.update-core-php .tb-close-icon,
+        body.index-php .tb-close-icon {
+                right: 0;
+                top: -30px;
+        }
 }
 

trunk/src/wp-admin/includes/plugin-install.php

@@ -373 +373 @@
 
         iframe_header( __( 'Plugin Install' ) );
-
+        
         $_with_banner = '';
 
@@ -394 +394 @@
         }
 
+        echo '<div id="plugin-information-scrollable">';
         echo "<div id='{$_tab}-title' class='{$_with_banner}'><div class='vignette'></div><h2>{$api->name}</h2></div>";
         echo "<div id='{$_tab}-tabs' class='{$_with_banner}'>\n";
@@ -514 +515 @@
         echo "</div>\n";
         echo "</div>\n";
+        echo "</div>\n"; // #plugin-information-scrollable
         echo "<div id='$tab-footer'>\n";
         if ( ! empty( $api->download_link ) && ( current_user_can( 'install_plugins' ) || current_user_can( 'update_plugins' ) ) ) {

trunk/src/wp-admin/js/plugin-install.js

@@ -18 +18 @@
                         if ( typeof document.body.style.maxWidth !== 'undefined' ) {
                                 tbWindow.css({
-                                        'top': ( ( 792 < width ) ? 30 : 10 ) + 'px',
+                                        'top': '30px',
                                         'margin-top': '0'
                                 });