WordPress.org

Making WordPress.org

Opened 8 months ago

Last modified 8 months ago

#3118 new defect

Trac: Improve mobile styling on report pages

Reported by: mitraval192 Owned by:
Milestone: Priority: normal
Component: Trac Keywords:
Cc:

Description

I found the "https://meta.trac.wordpress.org" site is not looking properly on the mobile device.

Attachments (2)

meta.trac.wordpress.org.png (31.2 KB) - added by mitraval192 8 months ago.
Displaying white space on the right side of the page.
responsive-table.jpg (51.6 KB) - added by birgire 8 months ago.
Example of a responsive trac table

Download all attachments as: .zip

Change History (7)

@mitraval192
8 months ago

Displaying white space on the right side of the page.

#1 @SergeyBiryukov
8 months ago

  • Component changed from General to Trac

#2 @mitraval192
8 months ago

Regarding this issue, we need to add one div on above the "<table class="listing tickets">".

and add below CSS.

div.CLASS_NAME { 
   width: auto;
   overflow: scroll;
}
Last edited 8 months ago by mitraval192 (previous) (diff)

#3 @SergeyBiryukov
8 months ago

  • Summary changed from Mobile Responsive issue to Trac: Improve mobile styling on report pages

@birgire
8 months ago

Example of a responsive trac table

#5 @birgire
8 months ago

In responsive-table.jpg we have an example of a responsive trac table, where each column has full width:

table.listing th, table.listing td {
    display: block;
}


where we would wrap this in a css mobile media query.

This would also need extra labels, only visible on mobile, for the column names in each row.

Note: See TracTickets for help on using tickets.