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.

Built from https://develop.svn.wordpress.org/trunk@40672


git-svn-id: http://core.svn.wordpress.org/trunk@40535 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Mel Choyce
2017-05-15 20:13:42 +00:00
parent 9cb2cbc26f
commit 66d3a486f6
5 changed files with 23 additions and 35 deletions

View File

@@ -2535,25 +2535,18 @@ div.action-links {
}
#plugin-information-title {
padding: 0 20px;
padding: 0 26px;
background: #f5f5f5;
font-size: 22px;
font-weight: 600;
line-height: 56px;
position: relative;
top: 0;
right: 0;
left: 0;
height: 56px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#plugin-information-title.with-banner {
margin-right: 0;
height: 250px;
bottom: 250px;
-webkit-background-size: cover;
background-size: cover;
}
@@ -2563,19 +2556,23 @@ div.action-links {
font-weight: 600;
padding: 0;
margin: 0;
max-width: 680px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#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 );
text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.4 );
@@ -2590,12 +2587,12 @@ div.action-links {
}
#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 );
box-shadow: inset 0 0 50px 4px rgba( 0, 0, 0, 0.2 ), inset 0 -1px 0 rgba( 0, 0, 0, 0.1 );
@@ -2898,7 +2895,6 @@ div.action-links {
@media screen and ( max-width: 771px ) {
#plugin-information-title.with-banner {
height: 100px;
bottom: 100px;
}
#plugin-information-title.with-banner h2 {
@@ -2910,8 +2906,6 @@ div.action-links {
#plugin-information-title.with-banner div.vignette {
height: 100px;
bottom: 100px;
width: 800%;
}
#plugin-information-tabs {