Changeset 40672

Timestamp:

05/15/2017 08:12:59 PM (6 years ago)

Author:

melchoyce

Message:

Plugins: Fix plugin name display on Chrome 58 and above.

On Chrome 58 and above, plugin names within the plugin details modal were collapsed down into an ellipsis. This fix rewrites the CSS to make sure the titles are always shown.

Props mrwweb, afercia, Presskopp.
Fixes #40579.

File:

• trunk/src/wp-admin/css/common.css (modified) (8 diffs)

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

@@ -2536 +2536 @@
 
 #plugin-information-title {
-    padding: 0 20px;
+    padding: 0 26px;
     background: #f5f5f5;
     font-size: 22px;
@@ -2542 +2542 @@
     line-height: 56px;
     position: relative;
-    top: 0;
-    right: 0;
-    left: 0;
     height: 56px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
 }
 
@@ -2554 +2548 @@
     margin-right: 0;
     height: 250px;
-    bottom: 250px;
     -webkit-background-size: cover;
     background-size: cover;
@@ -2564 +2557 @@
     padding: 0;
     margin: 0;
-    max-width: 680px;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -2571 +2563 @@
 
 #plugin-information-title.with-banner h2 {
+    position: relative;
     font-family: "Helvetica Neue", sans-serif;
     display: inline-block;
     font-size: 30px;
     line-height: 50px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    max-width: 100%;
     padding: 0 15px;
-    margin: 174px 0 0 10px;
+    margin-top: 174px;
     color: #fff;
     background: rgba( 30, 30, 30, 0.9 );
@@ -2591 +2588 @@
 
 #plugin-information-title.with-banner div.vignette {
+    position: absolute;
     display: block;
-    float: right;
     top: 0;
+    left: 0;
     height: 250px;
-    width: 772px;
-    margin: 0 -20px;
+    width: 100%;
     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 );
@@ -2899 +2896 @@
     #plugin-information-title.with-banner {
         height: 100px;
-        bottom: 100px;
     }
 
@@ -2911 +2907 @@
     #plugin-information-title.with-banner div.vignette {
         height: 100px;
-        bottom: 100px;
-        width: 800%;
     }