WordPress.org

Making WordPress.org

Opened 4 weeks ago

Last modified 3 weeks ago

#4472 reopened enhancement

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

Download all attachments as: .zip

Change History (23)

@imath
4 weeks ago

@imath
4 weeks ago

Screenshot of the unfolded hamburger menu

@imath
4 weeks ago

Screenshot of the folded hamburger menu

@imath
4 weeks ago

Screenshot of the folded hamburger menu

#1 @imath
4 weeks ago

Ouch sorry I've attached one screenshot twice :(

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


4 weeks ago

#3 @johnjamesjacoby
4 weeks ago

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

#4 @johnjamesjacoby
3 weeks ago

In 8883:

BuddyPress/bbPress: include mobile responsive support for Trac.

Props imath. See #4472.

#5 @johnjamesjacoby
3 weeks 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
3 weeks ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

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

#7 @imath
3 weeks 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
3 weeks ago

In 8885:

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

See #4472.

@imath
3 weeks ago

Button should be outside the ul

@imath
3 weeks ago

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

@imath
3 weeks ago

It should look like this

#9 @imath
3 weeks 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
3 weeks ago

In 8887:

BuddyPress/bbPress: move mobile menu out of UL.

See #4472.

#11 @johnjamesjacoby
3 weeks ago

In 8888:

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

See #4472.

#12 @johnjamesjacoby
3 weeks ago

In 8889:

BuddyPress/bbPress: bump CSS versions in Trac headers.

See #4472.

@imath
3 weeks ago

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


3 weeks ago

Note: See TracTickets for help on using tickets.