WordPress.org

Making WordPress.org

Opened 3 years ago

Last modified 6 months ago

#2822 new enhancement

Support forum should have better styling on mobile (6.44′ screen)

Reported by: alkesh7 Owned by:
Milestone: Priority: low
Component: Support Forums Keywords: needs-patch needs-ui
Cc:

Description

Hi guys,

I noticed some issues with wordpress.org support forum with my Mi Max smartphone (screens size - 6.444').

Gravatar image showing outside the content, http://prnt.sc/eu2eey

There are lots of issues, not only single one that I have listed above. Someone need to play with the same smartphone and access whole wordpress.org site

Regards,
Alkesh

Attachments (5)

2822.diff (1.7 KB) - added by dufresnesteven 6 months ago.
Improve: Pagination control on smaller viewports.
current.png (147.3 KB) - added by dufresnesteven 6 months ago.
Current layout of the pagination component.
Updated-layout.png (126.3 KB) - added by dufresnesteven 6 months ago.
Updated Layout
2822.pagination-count-misaligned.png (6.0 KB) - added by SergeyBiryukov 6 months ago.
reg_fix.diff (623 bytes) - added by dufresnesteven 6 months ago.
Patch to fix regression of "Viewing" alignment.

Download all attachments as: .zip

Change History (16)

#1 @ocean90
3 years ago

  • Component changed from Browse Happy to Support Forums
  • Priority changed from normal to low

#2 @melchoyce
3 years ago

  • Keywords needs-ui added

#3 @kjellr
16 months ago

👋 I spent a little time thinking about some light adjustments to help the forums behave better on mobile. Here are some comps along with some specific notes:


Landing Page:

  • The Create Issue / Pagination should be stacked.
  • Pagination should be wider and (at least a little) taller to be more amenable to touch interfaces.
  • The entire content width could be widened a bit to take advantage of the smaller available space.
  • The "Pinned" and "Resolved" icons should hang off to the left of the text, rather than simply being inline.
  • On the smallest screens (320ish), the table headings do not line up with the content. We should rework to include those inline instead.

https://cldup.com/ZSDkoJrZK8-3000x3000.png


Individual Topic

  • In general, tighten up margins to make better use of space.
  • Like the landing page, we should widen the content area a little bit.
  • Reduce the font size of the title, for better line lengths.
  • We should tighten the extra-tall line height for the breadcrumb.
  • Make the avatars smaller and stack the "Resolved" tag.
  • Add larger body font sizes for improved readability.

https://cldup.com/HmlViDClRm-2000x2000.png

#4 @melchoyce
16 months ago

These look great, @kjellr 👍

This ticket was mentioned in Slack in #forums by clorith. View the logs.


8 months ago

@dufresnesteven
6 months ago

Improve: Pagination control on smaller viewports.

@dufresnesteven
6 months ago

Current layout of the pagination component.

@dufresnesteven
6 months ago

Updated Layout

#6 @dufresnesteven
6 months ago

I updated the pagination control to be more mobile friendly in: 2822.diff

Images above.

Regression Testing Matrix

OS Browser Support
WIndows 7 IE 9
Window 8 IE 10
Window 8 IE 11
Window 8.1 IE 11
Window 10 IE 11
Window 10 Edge
Android Galaxy 9 Firefox
MacOS Mojave Safari 12.1

#7 @dd32
6 months ago

In 9620:

Support: Better styling for pagination on smaller screen widths.

Props dufresnesteven, kjellr.
See #2822.

#8 follow-up: @SergeyBiryukov
6 months ago

[9620] has introduced a regression in replies pagination inside a topic, as seen in this topic for example.

The replies count is overlapping with the page links, see 2822.pagination-count-misaligned.png. Previously, it used to be aligned to the left.

#9 in reply to: ↑ 8 @dufresnesteven
6 months ago

Replying to SergeyBiryukov:

[9620] has introduced a regression in replies pagination inside a topic, as seen in this topic for example.

The replies count is overlapping with the page links, see 2822.pagination-count-misaligned.png. Previously, it used to be aligned to the left.

Great catch. I'll submit a patch.

@dufresnesteven
6 months ago

Patch to fix regression of "Viewing" alignment.

#10 @dd32
6 months ago

In 9696:

Support: Fix the alignment of the "Viewing" text inside topics when multiple pages exist.

Props dufresnesteven, SergeyBiryukov.
See #2822.

#11 @dd32
6 months ago

In 9697:

Support: Restore some styles removed in [9696] by adding a missing SCSS file from [9664].

See #3659, #2822.

Note: See TracTickets for help on using tickets.