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

[vladytimy]

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.

[vladytimy]

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;
  }
  

[psmits1567]

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

[vladytimy]

@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.

[iandunn]

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.

[iandunn]

In 11468:

Translate: Fix various style conflicts with global header.

Props vladytimy
See #6037

[dd32]

In 11469:

Translate: Stick the translation headers to below the header.

See #6037

[vladytimy]

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

[iandunn]

In 11471:

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

See #6037

[iandunn]

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.

[vladytimy]

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!

[psmits1567]

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.

Looking again on my laptop it is even worse. The footer is a large black field with to much space on the top and bottom of the footer

[psmits1567]

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

[NekoJonez]

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

[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?

[psmits1567]

Image showing the large footer and issue with header from learn

[psmits1567]

Issue with size of the Meta and Edit box

[NekoJonez]

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.

[psmits1567]

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?

[psmits1567]

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

[costdev]

@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.

[Presskopp]

also on ​https://translate.wordpress.org/projects/wp/dev/

[vladytimy]

Consistency floating translation version

[vladytimy]

Link to test the Consistency issue: ​https://translate.wordpress.org/consistency/?search=Rated+%25s+out+of+5&set=ro%2Fdefault&consistencypage

[iandunn]

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

[iandunn]

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

[iandunn]

In 11493:

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

Props costdev, presskopp
See #6037

[iandunn]

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.

[SergeyBiryukov]

Follow-up: #6064, #6066.