Changeset 11802

Timestamp:

04/27/2022 08:15:15 AM (17 months ago)

Author:

dd32

Message:

Trac: Better styles for GitHub PRs section.

When multiple PRs are attached, the various datapoints are now better aligned, as it's a tabular display.
Mobile views are now better handled, as it wraps to two lines
The PR title is now dynamic in sizing, so more of the title will display if possible.

See #4917.
Fixes #6290.

Location:

sites/trunk

Files:

• trac.wordpress.org/templates/site.html (modified) (1 diff)
• wordpress.org/public_html/style/trac/wp-trac.css (modified) (2 diffs)
• wordpress.org/public_html/style/trac/wp-trac.js (modified) (1 diff)

sites/trunk/trac.wordpress.org/templates/site.html

@@ -5 +5 @@
 
 <?python
-    scripts_version = '157'
+    scripts_version = '158'
     project_slug = req.environ['HTTP_HOST'].split(':')[0].split('.')[0]
     wporg_endpoint = 'https://make.wordpress.org/' + project_slug + '/'

sites/trunk/wordpress.org/public_html/style/trac/wp-trac.css

@@ -2451 +2451 @@
 #github-prs ul.pull-requests {
     border: 1px solid #ccc;
+    display: table;
+    margin: 0;
+    max-width: 56em;
     padding: 0 1em;
-    margin: 0;
     position: relative;
+    width: 100%;
 }
 #github-prs ul.pull-requests li {
     align-items: center;
-    display: flex;
+    display: table-row;
     justify-content: space-between;
     padding: 0;
 }
 #github-prs ul.pull-requests li div {
-    margin: 0.5em 0;
+    display: table-cell;
+    padding: 0.5em 0;
+}
+#github-prs ul.pull-requests li > div:first-of-type > a:first-of-type {
+    display: inline-block;
+    max-width: 20em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: text-bottom;
+    white-space: nowrap;
+}
+#github-prs ul.pull-requests li:not(.loading) > div:last-of-type {
+    text-align: right;
 }
 #github-prs .button {
@@ -2479 +2494 @@
     text-decoration: none;
 }
-@media screen and (max-width: 782px) {
+@media screen and (max-width: 820px) {
     #github-prs .button {
         line-height: 20px;
         margin-right: 0.3em;
     }
-    #github-prs li {
+    #github-prs ul.pull-requests {
         display: block;
+        width: auto;
+    }
+    #github-prs ul.pull-requests li {
+        display: flex;
+        flex-wrap: wrap;
+    }
+    #github-prs ul.pull-requests li > div:first-of-type {
+        width: 100%; /* force other items to wrap to second line. */
+    }
+    #github-prs ul.pull-requests li > div:first-of-type > a:first-of-type {
+        max-width: 70%;
+        margin-bottom: -1px;
     }
 }

sites/trunk/wordpress.org/public_html/style/trac/wp-trac.js

@@ -1930 +1930 @@
                             'a',
                             { href: data.changes.html_url, title: data.title },
-                            '#' + data.number + ' ' +
-                                ( data.title.length > 23 ? data.title.substr( 0, 20 ) + '...' : data.title )
+                            '#' + data.number + ' ' + data.title
                         ) +
                         ' by ' +