Making WordPress.org

Opened 9 years ago

Closed 9 years ago

#1367 closed defect (bug) (fixed)

Plugin directory: Adjust CSS for Japanese download button

Reported by: nao's profile Nao Owned by: samuelsidler's profile samuelsidler
Milestone: Priority: normal
Component: Plugin Directory Keywords:
Cc:

Description

The button to download a plugin ("Download Version X.X") is wider in Japanese that it overlaps with the plugin description. See: https://ja.wordpress.org/plugins/favicon-rotator/

The width for the description area is defined in this CSS:

#plugin-description .shortdesc {
	width: 502px;
	float: left;
	margin-bottom: 0;
	font-family: Georgia,"Bitstream Vera Serif","Times New Roman",serif;
}

My suggestion is to reduce the width to 480px.

Attachments (3)

japanese-description.png (90.7 KB) - added by Nao 9 years ago.
Japanese plugin description / download button
en-updated-description.png (130.7 KB) - added by Nao 9 years ago.
English plugin page with reduced div size
plugin-directory-ja.png (65.5 KB) - added by Nao 9 years ago.
Plugin description / download button as of Nov. 7

Download all attachments as: .zip

Change History (10)

@Nao
9 years ago

Japanese plugin description / download button

@Nao
9 years ago

English plugin page with reduced div size

#1 @Nao
9 years ago

  • Component changed from General to International Sites (Rosetta)
  • Keywords needs-refresh added

#2 @ocean90
9 years ago

  • Component changed from International Sites (Rosetta) to Plugin Directory
  • Keywords needs-refresh removed

#3 @ocean90
9 years ago

We could also reduce the padding on the left side

Index: style-wp4.css
===================================================================
--- style-wp4.css	(revision 11093)
+++ style-wp4.css	(working copy)
@@ -294,7 +294,7 @@

 #plugin-description {
 	overflow: hidden;
-	padding: 30px 15px 55px 30px;
+	padding: 30px 15px 55px;
 	font-size: 16px;
 	line-height: 24px;
 	margin: 0 0 30px;
@@ -307,7 +307,7 @@
 }

 #plugin-description .shortdesc {
-	width: 502px;
+	width: 497px;
 	float: left;
 	margin-bottom: 0;
 	font-family: Georgia,"Bitstream Vera Serif","Times New Roman",serif;
@@ -357,7 +357,7 @@
 	overflow: hidden;
 	width: 743px;
 	height: 30px;
-	padding: 10px 0 0 29px;
+	padding: 10px 0 0 15px;
 	margin-bottom: 29px;
 }

#4 @Nao
9 years ago

@ocean90 Did someone make any CSS changes since last Sunday? I'm seeing a different layout on the page. I'm on Mac Safari. The download button is not overlapping the description anymore, but it's pushed below it.

I can't find the code for the plugin directory in public repositories so I tried testing your change on a browser's developer mode.
Looks like the width you tried to change is overwritten by this in wp4.css.

#plugin-description .shortdesc {
		width: 100%;
	}

The rule that sets padding of the p elements to 0 in wp4.css also overwrites the .shortdesc padding.

Well, the new layout is not perfect but it's as bad as the one I used to see (accidently enabled? or fixed on purpose?). I'm ok with marking this as wontfix.

@Nao
9 years ago

Plugin description / download button as of Nov. 7

This ticket was mentioned in Slack in #meta by ocean90. View the logs.


9 years ago

#6 @ocean90
9 years ago

  • Owner set to samuelsidler
  • Status changed from new to assigned

#7 @samuelsidler
9 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

Fixed in [dotorg-11535].

Note: See TracTickets for help on using tickets.