WordPress.org

Making WordPress.org

Opened 3 years ago

Closed 3 years ago

#2154 closed defect (fixed)

Ensures that i18n-teams.css loads after P2-Breath to prevent getting overridden.

Reported by: Kenshino Owned by: ocean90
Milestone: Priority: normal
Component: Make (Get Involved) / P2 Keywords: dev-feedback has-patch
Cc:

Description

Will help to fix the responsive table issue on https://make.wordpress.org/polyglots/teams/

Tables are currently messed up in mobile view due to P2-Breathe overriding key styles

Attachments (1)

2154.patch (1.3 KB) - added by Kenshino 3 years ago.

Download all attachments as: .zip

Change History (7)

@Kenshino
3 years ago

#1 @coffee2code
3 years ago

  • Keywords reporter-feedback added

@Kenshino: Can you provide before and after screenshots of an example of what this change will fix? The table on the page looks the same before and after the patch is applied, which is to say it still looks bad at small page widths. (I verified that the CSS source ordering was changed to ensure i18n-teams.css came after the p2-breathe styling as you intended.)

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


3 years ago

#3 @Kenshino
3 years ago

  • Keywords dev-feedback added; reporter-feedback removed

So update

Currently broken layout (Desktop) is like this

https://cloudup.com/cPHt91mxzO3/f

  • The left and right padding of the first and last column respectively have issues
  • The table is out of it's container.

The padding is getting overridden by by p2-breathe's style sheet

article.post .entry-content table tr td:first-child, article.post .entry-content table tr th:first-child, article#post-new .entry-content table tr td:first-child, article#post-new .entry-content table tr th:first-child, article.page .entry-content table tr td:first-child, article.page .entry-content table tr th:first-child {
    /* padding-left: 0; */
}

Because the p2 stylesheet has a much more specific selector, it has high priority regardless of load order.

So I'd have to submit a patch to change the specificity of the rule in i18n-teams.css as well

Which would get us this https://cloudup.com/cg1kMCWGmU6/f

In addition, because the table is overflowing likely because of the smaller content space now, it'd make sense to apply table-layout: fixed to it.

But by doing that, the text has not enough space and breaks line like this https://cloudup.com/cczVxALwTph/f

So giving the first th around 32% of width would solve that, but now would make the word WP Locale overflow https://cloudup.com/cgkwCeL73w8/f

Which can be easily solved by adding a selector to th 2nd child that sets word-break: break-word and white-space:normal;

So desktop view is fixed

Mobile view however is still messed up

.translators-info table tbody td:nth-of-type(1) {
    display: inline-block;
    padding-left: 40%;
    padding-right: 5px;
    width: 30%;
    border-bottom: none !important;
}

The padding-left and width is being overridden so it looks like this https://cloudup.com/cboWdBDIww7/f

which is being overriden by p2-breathe and my 32% width change

article.post .entry-content table tr td:first-child, article.post .entry-content table tr th:first-child, article#post-new .entry-content table tr td:first-child, article#post-new .entry-content table tr th:first-child, article.page .entry-content table tr td:first-child, article.page .entry-content table tr th:first-child {
    padding-left: 0;
    width: 32%;
}

So a more specific selector is needed plus the 32% width change for the first th column needs a min-width media query.

Changing that almost gets it fixed like https://cloudup.com/c7AVUjEeOTk/f

With the reduced width on the content column, the padding is a little too much causing the overflow column to break line.

@media (max-width: 768px)
.translators-info table tbody td {
    padding: 6px 10px;
    position: relative;
    padding-left: 40%;
}

Changing 10px to 8px fixes that

and https://cloudup.com/cM6v6TKzMEv/f is the final product for the mobile view.

While that patch makes sense to just have, we need to do more. Let me know if that makes sense and I'll be happy to submit a patch. But take note since I can't actually test it for real, I only have Inspector to count on

#4 @ocean90
3 years ago

In 4428:

Breathe: Add full-width page template.

See #2154.

#5 @ocean90
3 years ago

In 4429:

WP i18n teams: Ensure that the stylesheet is loaded after theme's stylesheets.

Props Kenshino.
See #2154.

#6 @ocean90
3 years ago

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

In 4430:

WP i18n teams: Update styles for overview and team pages to play nice with o2.

Fixes #2154.

Note: See TracTickets for help on using tickets.