Ticket #27440: 27440-scrolling-content.3.diff

src/wp-admin/css/common.css

@@ -2122 +2122 @@
         right: 0;
         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;
@@ -2157 +2164 @@
 }
 
 #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 );
         text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.4 );
@@ -2181 +2186 @@
 
 #plugin-information-title.with-banner div.vignette {
         display: block;
+        float: right;
         top: 0;
-        height: 215px;
+        height: 250px;
         width: 830px;
         margin: 0 -20px;
         background: transparent;
@@ -2192 +2198 @@
 
 #plugin-information-tabs {
         padding: 0 16px;
-        position: absolute;
-        top: 56px;
+        position: relative;
         right: 0;
         left: 0;
         height: 36px;
@@ -2200 +2205 @@
         z-index: 1;
 }
 
-#plugin-information-tabs.with-banner {
-        top: 214px;
-        background: rgba( 255, 255, 255, 0.85 );
-}
-
 #plugin-information-tabs a {
         position: relative;
         float: left;
@@ -2241 +2241 @@
         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;
+        padding-bottom: 58px;
 }
 
-#plugin-information-content.with-banner {
-        border-top: none;
-        top: 250px;
-}
-
 #section-holder {
-        margin: 0;
+        margin: 0 250px 50px 0;
         padding: 10px 26px;
-        position: absolute;
+        position: relative;
         top: 0;
         right: 250px;
         bottom: 0;
         left: 0;
-        overflow: auto;
 }
 
 #section-holder .updated {
@@ -2275 +2268 @@
         border-left: 1px solid #ddd;
         color: #666;
         padding: 16px;
-        position: absolute;
+        position: relative;
         top: 0;
         right: 0;
         bottom: 0;
         width: 217px;
-        overflow: auto;
+        float: right;
+        margin: ;
 }
 
 #plugin-information .fyi strong {
@@ -2365 +2359 @@
         bottom: 0;
         left: 0;
         height: 28px;
+        background: rgba( 255, 255, 255, 0.85 );
 }
 
 #plugin-information .section ul,
@@ -2416 +2411 @@
         }
 
         #plugin-information-title.with-banner h2 {
-                top: 12px;
+                margin-top: 30px;
                 font-size: 20px;
                 line-height: 40px;
         }
 
         #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;
-        }
 }
 
 @media screen and ( max-width: 771px ) {
@@ -2450 +2437 @@
 
         #section-holder {
                 position: static;
+                margin: 0;
         }
 
         #plugin-information .fyi h3,

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

@@ -372 +372 @@
         }
 
         iframe_header( __( 'Plugin Install' ) );
-
+        
         $_with_banner = '';
 
         if ( ! empty( $api->banners ) && ( ! empty( $api->banners['low'] ) || ! empty( $api->banners['high'] ) ) ) {
@@ -393 +393 @@
                 <?php
         }
 
+        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";
 
@@ -513 +514 @@
                 }
         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' ) ) ) {
                 $status = install_plugin_install_status( $api );