Making WordPress.org

Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#5761 closed defect (bug) (fixed)

Better responsive styles for translate.w.org

Reported by: sumitsingh's profile sumitsingh Owned by: ocean90's profile ocean90
Milestone: Priority: normal
Component: Translate Site & Plugins Keywords: has-patch needs-testing
Cc:

Description

Hi,

I am translating WP using mobile devices.and I have founded some UI issue on below page link.

https://translate.wordpress.org/locale/hi/default/wp/dev/#contributor-sumitsingh.

More information you can see mentioned screenshot.

Attachments (4)

Screenshot_2021-05-13-21-35-05-157_com.android.chrome.jpg (322.8 KB) - added by sumitsingh 3 years ago.
UI issue on IPhone device
5761.1.patch (1.6 KB) - added by vladytimy 3 years ago.
5761.1_bef_after_1.jpg (795.4 KB) - added by vladytimy 3 years ago.
5761.1_bef_after_2.jpg (368.5 KB) - added by vladytimy 3 years ago.

Download all attachments as: .zip

Change History (10)

#1 @sabernhardt
3 years ago

  • Component changed from General to Translate Site & Plugins

Adding float: left to all spans in the .contributor-name cell includes the "Last translation submitted" span (see r9497). On smaller screens (up to 500px), that text appears before the avatar link.

This ticket was mentioned in Slack in #polyglots by vladytimy. View the logs.


3 years ago

#3 @vladytimy
3 years ago

  • Summary changed from UI issue on Mobile devices. to Better responsive styles for translate.w.org

I am renaming this to better describe the issue and to make ticket easier to find.
Apart form the one you mentioned, there are a few other responsive things that could be addressed.

  1. The float:left for .contributor-name spans that @sabernhardt mentioned
  2. Long project description will overflow, creating a white space
  3. Set / Sub Project table is not responsve and will, again, create a white space

Proposed 5761.1.patch (only for (max-width: 500px))

  1. Unsets float:left for .contributor-name spans
  2. Unsets .project-description width to allow a fluid width
  3. Creates a possible responsive table (maybe not the best approach - maybe a mainstream solution with markup modifications might be better)

@vladytimy
3 years ago

#4 @vladytimy
3 years ago

  • Keywords has-patch needs-testing added

#5 @ocean90
3 years ago

  • Owner set to ocean90
  • Resolution set to fixed
  • Status changed from new to closed

In 11011:

Translate: Improve styles of various elements on smaller screens.

Props vladytimy, ocean90.
Fixes #5761.

#6 @sumitsingh
3 years ago

Hi,
Thank you for fixed.

I have founded issue then I can't get Meta Props @ocean90 ?

Thank you again:)

Note: See TracTickets for help on using tickets.