[wp-meta] [Making WordPress.org] #2154: Ensures that i18n-teams.css loads after P2-Breath to prevent getting overridden.

[Making WordPress.org]

#2154: Ensures that i18n-teams.css loads after P2-Breath to prevent getting
overridden.
--------------------------------------+------------------
 Reporter:  Kenshino                  |       Owner:
     Type:  defect                    |      Status:  new
 Priority:  normal                    |   Milestone:
Component:  Make (Get Involved) / P2  |  Resolution:
 Keywords:  dev-feedback has-patch    |
--------------------------------------+------------------
Changes (by Kenshino):

 * keywords:  has-patch reporter-feedback => dev-feedback has-patch


Comment:

 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

--
Ticket URL: <https://meta.trac.wordpress.org/ticket/2154#comment:3>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org