Page MenuHomePhorge

Mobile: show Homepage contents and avoid duplicate menus
ClosedPublic

Authored by valerio.bozzolan on Apr 1 2023, 17:33.

Details

Summary

After this change, the Homepage finally shows contents on Mobile,
instead of just showing the sidebar menu twice.

Closes T15216

Test Plan

To test this change in general:

  • resize the window horizontally and enjoy

I tested it in:

  • tested homepage of Phorge
  • Audit
    • tested homepage of Audit
  • Auth
    • tested Auth homepage
    • tested Login page
    • tested Forgot your password page
  • Config
    • tested Config homepage
    • tested page Core Settings
    • tested page Unresolved Setup Issues
    • (Services)
      • tested page Database Status
      • tested page Cache Status
      • tested page Notification Servers
      • tested page Repository Services
      • tested page Search Servers
    • (Extensions/Modules)
      • tested page Constants: Differential
      • tested page Content Sources
  • Conpherence
    • tested open-close menu
    • tested persistent chat
    • tested Rooms list
    • tested single Chat
  • Dashboards
    • tested general homepage of Dashboards
    • tested specific Dashboard - view page
    • tested specific Dashboard - edit page
  • Differential
    • tested general homepage of Differential
    • tested Create Diff page
  • Diffusion
    • tested general homepage of Diffusion
    • tested specific Diffusion repository - view page
    • tested specific Diffusion repository - Manage page
    • tested specific Diffusion repository - Policy page
    • tested specific Diffusion repository - Automation page
    • tested specific commit page - view page
    • tested specific commit page - Edit Commit
  • Diviner
    • tested general homepage of Diviner
    • tested specific Diviner book
    • tested list of technical Classes
    • tested specific technical Class
    • tested search of All Atoms
  • Feed
    • tested Feed homepage ("All Stories")
    • tested specific feed - view page
  • Files
    • tested general homepage of Files
    • tested specific File - view page
    • tested specific File - Edit File
    • tested Award Token popup
    • tested Flag for Later
    • tested View Transforms
  • Form Engine
    • tested View Forms Configurations page
    • tested specific View Form Configuration
    • tested Use Form
  • Maniphest
    • tested general homepage of Maniphest
    • tested specific Maniphest Task - view page
    • tested specific Maniphest Task - Edit mode
    • tested specific Maniphest Task - Award Token popup
  • Menu
    • tested page Configure Menu
    • tested page Personal Menu Items
    • tested page Global Menu Items
  • Notifications
    • tested open action
    • tested close action
    • tested click action
  • People
    • tested general homepage of People
    • tested specific User - view page
    • tested specific User - Settings page - home
    • tested specific User - Settings page - Date & Time
    • tested specific User - Settings page - External Editor
    • tested specific User - Settings page - External Editor
    • tested specific User - Settings page - SSH Public Keys
    • tested specific User - Settings page - SSH Public Keys - upload popup
    • tested specific User - Settings page - SSH Public Keys - view history
  • Pholio
    • tested general homepage of Pholio
    • tested Create a Mock page
    • tested specific Pholio - view
    • tested specific Pholio - Edit page
    • tested specific Pholio - Award Token popup
    • tested specific Pholio - Edit Related Tasks popup
    • tested specific Pholio - add a Comment
  • Phriction
    • tested specific page of Phriction - view
    • tested specific page of Phriction - Create Page popup
    • tested specific page of Phriction - Create Page dedicated page
    • tested specific page of Phriction - Edit Page
    • tested specific page of Phriction - Award Token popup
  • Project
    • tested general homepage of Projects
    • tested Create Project page
  • Search
    • tested search results All Results
    • tested Advanced Search page
  • TOTP
    • tested input screen
  • Workboard
    • tested specific Workboard
    • tested Create Task popup
    • tested Add Column popup
    • tested Manage Workboard page
    • tested Edit Details page
    • test Flag for Later popup
    • test Edit Picture page

Diff Detail

Repository
rP Phorge
Branch
T15067_fix_home_mobile
Lint
Lint Passed
Unit
No Test Coverage
Build Status
Buildable 217
Build 217: arc lint + arc unit

Event Timeline

BeforeAfter
D25107 Before - menu closed.png (630×396 px, 31 KB)
D25107 After - menu closed.png (630×396 px, 47 KB)
D25107 Before - menu open.png (630×396 px, 48 KB)
{F274903}
Cigaryno added projects: Mobile, UX.

Recommended: Remove the old mobile home screen.

This is the kind of change that requires lots of testing.

In D25107#3303, @avivey wrote:

This is the kind of change that requires lots of testing.

Yep. That is why I pushed this change in production in my personal Phorge, so I can test it during my everyday, and you can test it as well.

I will keep this enabled since I love this:

Before D25107After D25107
Gitpull Before D25107.png (537×324 px, 30 KB)
Gitpull After D25107.png (537×324 px, 37 KB)

https://gitpull.it/

valerio.bozzolan attached a referenced file: Unknown Object (File). (Show Details)Apr 3 2023, 18:40

Trust me when I say that I never tested something more in my life.

Feel free to expand the list with things you have tested, stretching the screen violently, and screaming to your Phorge to raise its pressure etc.

Hi @speck, do you like this?

Before D25107After D25107
Gitpull Before D25107.png (537×324 px, 30 KB)
Gitpull After D25107.png (537×324 px, 37 KB)

Feel free to visit these on mobile to test on real-world:

https://gitpull.it/ (after)

https://we.phorge.it/ (before)

No need to accept, just to say if you like this is useful to me. Thank you for your precious feedback

Does this change anything other than the landing page? When using mobile the first thing I do is click the link to dashboard and it shows properly there. Any idea why the home page behaves differently from the dashboard page?

From a usability perspective this feels nice to be immediately at something more useful. I would just try to find why the dashboard page works as expected but the main landing page doesn’t. If this change is still the underlying reason it seems good to me.

And thank you for such an extensive test plan.

In D25107#3737, @speck wrote:

Does this change anything other than the landing page?

Nope, in my understanding and in this deep testing, I'm quite sure this only affects the homepage.

When using mobile the first thing I do is click the link to dashboard

Same :)

Any idea why the home page behaves differently from the dashboard page?

I think only the homepage is marked with the CSS class phabricator-home (fortunately) and so that is why only the homepage was broken in this way, hiding its contents instead of hiding its duplicated navigation bar.

Thank you for investigating! I think this is reasonable to land, given the investigation and testing there aren’t any immediate issues that seem to crop up on mobile.

This revision is now accepted and ready to land.Apr 9 2023, 16:13
speck requested changes to this revision.Apr 9 2023, 16:14
speck added inline comments.
webroot/rsrc/css/phui/phui-basic-nav-view.css
26

Oops one last question. It looks like this CSS selector matches the one immediately above. Should these be merged?

This revision now requires changes to proceed.Apr 9 2023, 16:14

Okay real accept

webroot/rsrc/css/phui/phui-basic-nav-view.css
26

Ah it looks like it’s not exactly the same after I expanded the context. Merging would likely cause nav to not display on desktop views.

This revision is now accepted and ready to land.Apr 9 2023, 16:16
webroot/rsrc/css/phui/phui-basic-nav-view.css
26

I think so

And - thanks to what you focused - I now see this line probably was historically in this exact position since this section is dedicated to the local navigation bar, and so, it makes even more sense to touch that here, instead of touching contents as it was before - and that was probably a mistake.