Making WordPress.org

Opened 2 years ago

Closed 2 years ago

Last modified 2 years ago

#6037 closed enhancement (fixed)

Refine custom styles, now that translate is running a different base-theme

Reported by: vladytimy's profile vladytimy Owned by: iandunn's profile iandunn
Milestone: Priority: normal
Component: Translate Site & Plugins Keywords:
Cc:

Description

This is a list of things that seem to be needing adjustments:

Global Stats

  • consider using the same default background color (not based on being odd/even). See before.
  • consider centering cells content

Local stats

  • consider centering cells content

Consistency

  • consider using styles that clearly separate the projects and different translations. With current styles we don't take advantage of latest changes such as this one.

Locale sub-project

  • consider adding back the the arrow from Per project

Locale glossary

  • consider using smaller fonts (also in the meta/edit section)

Plugins & themes sub-project

  • consider centering cell content

Translation table

  • checkboxes are missplaced
  • consider making the textarea back to being larger
  • Summary/Details from References, TM & Other languages are missing the arrows/triangles
  • Paginated navigation is not centered vertically

This list is probably not complete, but it's a place to track the changes we need to make.

Attachments (3)

translate-wordpress.JPG (74.7 KB) - added by psmits1567 2 years ago.
Image showing the large footer and issue with header from learn
translate1-wordpress.JPG (49.3 KB) - added by psmits1567 2 years ago.
Issue with size of the Meta and Edit box
consistency.gif (1.1 MB) - added by vladytimy 2 years ago.
Consistency floating translation version

Download all attachments as: .zip

Change History (35)

#1 @vladytimy
2 years ago

Some suggested fixes:

  • Seems that this would fix some layout issues.
    * {
        box-sizing: content-box;
    }
    
  • The textarea for translations is not actually smaller - my bad, but it has additional shaddow. This should fix it.
.editor-panel .textareas textarea {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
  • To bring back summary styles:
    summary {
        display: list-item;
    }
    
Last edited 2 years ago by vladytimy (previous) (diff)

#2 @psmits1567
2 years ago

Header of translate.wordpress.org is to high, it takes to much of the screen. Lower the space between top and menu, and lower the space between bottom of menu. Also in my opinion the sequence of the menu is not logical Openverse is at the end while learn is in the beginning. Also I would expect Support and Get involved next to each other.

Stats: this does look less then the original before the change. Make the borders of the cells grey instead of white. The current border is to much up front

#3 @vladytimy
2 years ago

@psmits1567 thank you for the comment.

Regarding the new header, you might want to open an issue at https://github.com/WordPress/wporg-mu-plugins

Here we are only tracking translate.w.org specific style issues for custom styles.

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


2 years ago

#5 @iandunn
2 years ago

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

Thanks for the detailed report!

Before the new header/footer was activated the site had TwentyFifteen activated, but the styles from it conflicted in a lot of ways. Rather than trying to fix those, it seemed simpler to switch to wporg-main, and I didn't notice the issues that caused.

The simplest approach might be to create a blank theme, since GP overwrites most of it anyway. Manually dequeuing all of TwentyFifteen's stylesheets might be simpler too, since it's a reasonably safe assumption that more won't be added in the future.

I'll look into that.

#6 @iandunn
2 years ago

In 11468:

Translate: Fix various style conflicts with global header.

Props vladytimy
See #6037

#7 @dd32
2 years ago

In 11469:

Translate: Stick the translation headers to below the header.

See #6037

#8 @vladytimy
2 years ago

Thank you for the updates above! Much appreciated!

Related ticket: https://meta.trac.wordpress.org/ticket/6046

Also, the font-size for H tags should be refined, as it's huge right now. Example

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


2 years ago

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


2 years ago

#11 @iandunn
2 years ago

In 11471:

Translate: Tweak wporg-main styles to better suite GlotPress.

See #6037

#12 @iandunn
2 years ago

I think most of the issues mentioned are fixed now, but please add a comment if anyone sees anything else.

Paginated navigation is not centered vertically

Is that referring to div.paging that comes before and after table#translations? That seems to be intentionally floated to the right.

#13 @vladytimy
2 years ago

Thank you very much for fixing these so quickly! :hero:

Paginated navigation is now fixed. box-sizing: content-box; fixed it. The numbers were not vertically aligned to the center within their border.

Sure, if anyone sees anything that needs to be fixed, will send them here.
Thanks again!

#14 @psmits1567
2 years ago

On mobile the footer of translate.wordpress.org when you list untranslated lines is a large black box. Would be nice if the margin from top and bottom of the footer could be reduced. Also the lineheight is a bit big, so the lines take a lot of space.

Version 0, edited 2 years ago by psmits1567 (next)

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


2 years ago

This ticket was mentioned in Slack in #glotpress by amieiro. View the logs.


2 years ago

#17 @psmits1567
2 years ago

I believe Yui has made some comments on the behavior of the glotpress editor in a different channel.But she did not mention the following: within the edit modus, the Meta box is to wide, which causes the edit field being to small which pushes the up and down arrows and history selector into the editor field. So if the width if Meta is reduced, the problem with the edit field will probably be resolved

#18 @NekoJonez
2 years ago

Is it me, or is the table bigger now? I have to scroll to see the "accept"/"fuzzy" and "reject" buttons...

#19 follow-ups: @iandunn
2 years ago

The footer is a large black field with to much space on the top and bottom

Does that look different on translate.w.org than other sites? If not, the spacing is how it's designed, so it's not a translate-specific bug that fits the scope of this ticket.

That'd be good feedback for the design team in #design or https://github.com/WordPress/wporg-mu-plugins/issues/, though.


the up and down arrows and history selector into the editor field.

I'm not seeing that, can you upload a screenshot?


I have to scroll to see the "accept"/"fuzzy" and "reject" buttons...

The header size is being reduced in https://github.com/WordPress/wporg-mu-plugins/pull/121, which will help that some, but maybe not enough. I don't think it changed much, though; what size is your browser viewport?

@psmits1567
2 years ago

Image showing the large footer and issue with header from learn

@psmits1567
2 years ago

Issue with size of the Meta and Edit box

#20 in reply to: ↑ 19 @NekoJonez
2 years ago

Replying to iandunn:

The footer is a large black field with to much space on the top and bottom

Does that look different on translate.w.org than other sites? If not, the spacing is how it's designed, so it's not a translate-specific bug that fits the scope of this ticket.

That'd be good feedback for the design team in #design or https://github.com/WordPress/wporg-mu-plugins/issues/, though.


the up and down arrows and history selector into the editor field.

I'm not seeing that, can you upload a screenshot?


I have to scroll to see the "accept"/"fuzzy" and "reject" buttons...

The header size is being reduced in https://github.com/WordPress/wporg-mu-plugins/pull/121, which will help that some, but maybe not enough. I don't think it changed much, though; what size is your browser viewport?

I'm not too familiar with the term viewport... I'm using Opera. But I have that issue on various PC's and monitors.

#21 in reply to: ↑ 19 @psmits1567
2 years ago

Replying to iandunn:

The footer is a large black field with to much space on the top and bottom

Does that look different on translate.w.org than other sites? If not, the spacing is how it's designed, so it's not a translate-specific bug that fits the scope of this ticket.

That'd be good feedback for the design team in #design or https://github.com/WordPress/wporg-mu-plugins/issues/, though.


the up and down arrows and history selector into the editor field.

I'm not seeing that, can you upload a screenshot?

I can solve this issue by altering the following
.editor-panelright {
flex: 0 0 21rem >12rem


I have to scroll to see the "accept"/"fuzzy" and "reject" buttons...

The header size is being reduced in https://github.com/WordPress/wporg-mu-plugins/pull/121, which will help that some, but maybe not enough. I don't think it changed much, though; what size is your browser viewport?

#22 @psmits1567
2 years ago

Where can I find the size if the viewport?
If I look with the inspector, I @media (min-width:890)
Within the source if the page "viewport content "width=device, initial-scale=1"
Noting else about that, I use a 17 inch laptop screen. But I do not think that it makes a difference, because on my mobile, it is also very big. I suspect part if that is caused by adding more links into the footer. But also the margins are to big

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


2 years ago

#24 @costdev
2 years ago

@presskopp flagged an issue on https://translate.wordpress.org/projects/wp/dev/admin/ where the table extends beyond the width of its container.

A quick test showed that removing width: 100% from .with-sub-projects #translation-sets causes the table to align correctly.

@vladytimy
2 years ago

Consistency floating translation version

#27 @iandunn
2 years ago

In 11491:

Translate: Set TwentyFifteen root size to restore Meta box width.

Some of GlotPress uses rems for layout, and switching the base theme changed the root font-size. This restores it to what it was previously.

See #6037

#28 @iandunn
2 years ago

In 11492:

Translate: Stick editor panels to top at all breakpoints.

The global header doesn't start sticking until 890px, so previously there was a gap above the panels.

See #6037

#29 @iandunn
2 years ago

In 11493:

Translate: Set auto width for translation sets to avoid overlap.

Props costdev, presskopp
See #6037

#30 @iandunn
2 years ago

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

I think the remaining issues are fixed now, but I might have missed something since there's a lot here.

If there is anything else, I think it'd be best to open a new issue, so that it'll be easier to track.

#31 @SergeyBiryukov
2 years ago

Follow-up: #6064, #6066.

Last edited 2 years ago by SergeyBiryukov (previous) (diff)

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


2 years ago

Note: See TracTickets for help on using tickets.