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

wp-admin/css/common.css

@@ -2132 +2132 @@
         right: 0;
         bottom: 0;
         left: 0;
-        height: auto;
+        height: 100%;
         padding: 0;
 }
 
+#plugin-information-scrollable {
+        display: block;
+        overflow: auto;
+        height: 100%;
+}
+
+
+
 #plugin-information-title {
         margin-right: 56px; /* avoid collisions with the close icon */
         padding: 0 20px;
@@ -2170 +2178 @@
         font-size: 30px;
         line-height: 50px;
         font-weight: bold;
-        max-width: 760px;
-        position: absolute;
-        left: 20px;
-        top: 145px;
+        max-width: 700px;
+        float: left;
         padding: 0 15px;
         margin: 0;
         color: #fff;
@@ -2186 +2192 @@
 }
 
 #plugin-information-title div.vignette {
-        display: none;
 }
 
 #plugin-information-title.with-banner div.vignette {
@@ -2198 +2203 @@
         background: transparent;
         -webkit-box-shadow: inset 0 0 50px 4px rgba( 0, 0, 0, 0.2 ), inset 0 -1px 0 rgba( 0, 0, 0, 0.1 );
         box-shadow: inset 0 0 50px 4px rgba( 0, 0, 0, 0.2 ), inset 0 -1px 0 rgba( 0, 0, 0, 0.1 );
+        padding: 145px 20px 0 20px;
 }
 
 #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 );
-}
-
 #plugin-information-tabs a {
         position: relative;
         float: left;
@@ -2251 +2251 @@
         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;
+        margin-bottom: 58px;
 }
 
 #plugin-information-content.with-banner {
         border-top: none;
-        top: 250px;
 }
 
 #section-holder {
-        margin: 0;
+        margin: 0 250px 0 0;
         padding: 10px 26px;
-        position: absolute;
+        position: relative;
         top: 0;
         right: 250px;
         bottom: 0;
         left: 0;
-        overflow: auto;
 }
 
 #section-holder .updated {
@@ -2285 +2283 @@
         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;
 }
 
 #plugin-information .fyi strong {
@@ -2375 +2373 @@
         bottom: 0;
         left: 0;
         height: 28px;
+        background: rgba( 255, 255, 255, 0.85 );
 }
 
 #plugin-information .section ul,
@@ -2426 +2425 @@
         }
 
         #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 ) {
@@ -2460 +2451 @@
 
         #section-holder {
                 position: static;
+                margin: 0;
         }
 
         #plugin-information .fyi h3,

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'] ) ) ) {
@@ -392 +392 @@
                 </style>
                 <?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}-title' class='{$_with_banner}'><div class='vignette'><h2>{$api->name}</h2></div></div>";
         echo "<div id='{$_tab}-tabs' class='{$_with_banner}'>\n";
 
         foreach ( (array) $api->sections as $section_name => $content ) {
@@ -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 );