WordPress.org

Making WordPress.org

Opened 6 months ago

Closed 3 months ago

#4472 closed enhancement (fixed)

Improve BuddyPress Trac's header for mobile devices

Reported by: imath Owned by: johnjamesjacoby
Milestone: Priority: normal
Component: buddypress.org Keywords: has-patch has-screenshots
Cc:

Description

Hi !

Following #4460, I'm suggesting to improve the BuddyPress Trac's header for mobile devices.

I've noticed, there was a JavaScript to toggle the "hamburger" menu, this patch is using the expected selector IDs for this navigation.min.js script. This means the layout of trac.wordpress.org/templates/buddypress/wporg-header.html has been edited.

I've also changed the navigation links as there were using http protocole instead of the https one.

You'll find screenshots and the patch attached to this ticket.

Attachments (9)

4472.patch (6.9 KB) - added by imath 6 months ago.
not-toggled.png (72.5 KB) - added by imath 6 months ago.
Screenshot of the unfolded hamburger menu
not-toggled.2.png (72.5 KB) - added by imath 6 months ago.
Screenshot of the folded hamburger menu
toggled.png (55.4 KB) - added by imath 6 months ago.
Screenshot of the folded hamburger menu
Screen Shot 2019-05-27 at 2.24.21 PM.png (197.6 KB) - added by johnjamesjacoby 6 months ago.
button-outside-ul.png (23.5 KB) - added by imath 6 months ago.
Button should be outside the ul
wporg-header-color.png (32.5 KB) - added by imath 6 months ago.
The #wporg-header should be styled in style-buddypress.css
result.png (22.1 KB) - added by imath 6 months ago.
It should look like this
4472.2.patch (1.4 KB) - added by imath 6 months ago.

Download all attachments as: .zip

Change History (24)

@imath
6 months ago

@imath
6 months ago

Screenshot of the unfolded hamburger menu

@imath
6 months ago

Screenshot of the folded hamburger menu

@imath
6 months ago

Screenshot of the folded hamburger menu

#1 @imath
6 months ago

Ouch sorry I've attached one screenshot twice :(

This ticket was mentioned in Slack in #buddypress by imath. View the logs.


6 months ago

#3 @johnjamesjacoby
6 months ago

  • Owner set to johnjamesjacoby
  • Status changed from new to assigned

#4 @johnjamesjacoby
6 months ago

In 8883:

BuddyPress/bbPress: include mobile responsive support for Trac.

Props imath. See #4472.

#5 @johnjamesjacoby
6 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 8884:

BuddyPress/bbPress: trac template changes for mobile responsive support.

Rename #header to #wporg-header, and bump CSS versions.

Props imath.

Fixes #4472.

#6 @johnjamesjacoby
6 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening. Trac header's are looking pretty broken now.

#7 @imath
6 months ago

@johnjamesjacoby Thanks for the commits I think there's some edits missing around line 12 in sites/trunk/trac.wordpress.org/templates/bbpress/wporg-header.html and sites/trunk/trac.wordpress.org/templates/buddypress/wporg-header.html

<button id="mobile-menu-button" aria-expanded="false"><span class="screen-reader-text">Toggle Menu</span></button>
	            <ul id="wporg-header-menu">

#8 @johnjamesjacoby
6 months ago

In 8885:

BuddyPress/bbPress: update Trac header markup (https, and menu ID)

See #4472.

@imath
6 months ago

Button should be outside the ul

@imath
6 months ago

The #wporg-header should be styled in style-buddypress.css

@imath
6 months ago

It should look like this

#9 @imath
6 months ago

Hi @johnjamesjacoby

I've just had a look, here's what I suggest :

  • Make sure the button is outside the <ul> but inside the .header-inner (> button-outside-ul.png)
  • Make sure the #wporg-header is styled in style-buddypress.css ( > wporg-header-color.png )

Then it should look like result.png :)

#10 @johnjamesjacoby
6 months ago

In 8887:

BuddyPress/bbPress: move mobile menu out of UL.

See #4472.

#11 @johnjamesjacoby
6 months ago

In 8888:

BuddyPress/bbPress: add #wporg-header styling to site-specific CSS files.

See #4472.

#12 @johnjamesjacoby
6 months ago

In 8889:

BuddyPress/bbPress: bump CSS versions in Trac headers.

See #4472.

@imath
6 months ago

#13 @imath
6 months ago

Hi @johnjamesjacoby

I've just ran some other tests and I missed the single ticket view in my first patch. In this view the #subnav is missing and it makes the main nav hidden.

See > https://cldup.com/xSkoYrJOik.png

The patch is fixing the hover effect on the header links and this ticket single view

See > https://cldup.com/0QEi1AFO4O.png

Thanks a lot for your help with it 👍

This ticket was mentioned in Slack in #meta by tellyworth. View the logs.


6 months ago

#15 @netweb
3 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 9122:

BuddyPress/bbPress: add #wporg-header styling to site-specific CSS files.

Props imath.
Fixes #4472.

Note: See TracTickets for help on using tickets.