WordPress.org

Making WordPress.org

#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 14 months ago.
not-toggled.png (72.5 KB) - added by imath 14 months ago.
Screenshot of the unfolded hamburger menu
not-toggled.2.png (72.5 KB) - added by imath 14 months ago.
Screenshot of the folded hamburger menu
toggled.png (55.4 KB) - added by imath 14 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 14 months ago.
button-outside-ul.png (23.5 KB) - added by imath 14 months ago.
Button should be outside the ul
wporg-header-color.png (32.5 KB) - added by imath 14 months ago.
The #wporg-header should be styled in style-buddypress.css
result.png (22.1 KB) - added by imath 14 months ago.
It should look like this
4472.2.patch (1.4 KB) - added by imath 14 months ago.

Download all attachments as: .zip

Change History (24)

@imath
14 months ago

@imath
14 months ago

Screenshot of the unfolded hamburger menu

@imath
14 months ago

Screenshot of the folded hamburger menu

@imath
14 months ago

Screenshot of the folded hamburger menu

#1 @imath
14 months ago

Ouch sorry I've attached one screenshot twice :(

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


14 months ago

#3 @johnjamesjacoby
14 months ago

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

#4 @johnjamesjacoby
14 months ago

In 8883:

BuddyPress/bbPress: include mobile responsive support for Trac.

Props imath. See #4472.

#5 @johnjamesjacoby
14 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
14 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

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

#7 @imath
14 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
14 months ago

In 8885:

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

See #4472.

@imath
14 months ago

Button should be outside the ul

@imath
14 months ago

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

@imath
14 months ago

It should look like this

#9 @imath
14 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
14 months ago

In 8887:

BuddyPress/bbPress: move mobile menu out of UL.

See #4472.

#11 @johnjamesjacoby
14 months ago

In 8888:

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

See #4472.

#12 @johnjamesjacoby
14 months ago

In 8889:

BuddyPress/bbPress: bump CSS versions in Trac headers.

See #4472.

@imath
14 months ago

#13 @imath
14 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.


14 months ago

#15 @netweb
10 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.