Changeset 29474

Timestamp:

08/12/2014 11:01:38 PM (10 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'
                 });