Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Outreachy Task Submission] Fixed Mobile Screen Navigation at the bottom of the screen menubar #865

Closed

Conversation

crocmons
Copy link

@crocmons crocmons commented Mar 11, 2024

This pull request resolves issue #4807 where the menu bar at the bottom of the screen was non-functional in mobile mode, hindering users from navigating to other pages effectively. The current behavior triggered a popup share action instead of allowing navigation. To improve the user experience and accessibility on mobile devices, this PR enhances the functionality of the bottom menu bar by adding the CSS bottom position of 125px and enabling seamless navigation between pages.

Changes Made:

  • Modified the mobile navigation behavior by adding the bottom position CSS of 125px .
  • Implemented a solution that enables users to navigate between pages smoothly by tapping on the icons in the bottom menu bar.
  • Ensured that the bottom menu bar icons are responsive and easily accessible on various mobile screen sizes.
  • Tested the solution across different mobile devices and screen resolutions to ensure consistent behavior and usability.

Screenshots/Attachments:

Testing:

  • Conducted comprehensive testing to verify the functionality of the bottom menu bar on mobile devices.
  • Tested the ability to navigate between pages by tapping on the icons in the bottom menu bar.
  • Ensured that the share popup is no longer triggered when interacting with the bottom menu bar icons.
  • Verified the responsiveness and usability of the solution across different mobile devices and screen orientations.

Impact:
With this enhancement, users can now navigate between pages seamlessly on mobile devices, improving the accessibility and usability of the application. By adding the CSS bottom position of 125px and enabling direct navigation from the bottom menu bar, I'm enhancing the overall user experience and satisfaction.

Additional Notes:

  • No changes were made to the layout or visual appearance of the bottom menu bar.
  • This fix aligns with the project's goal of improving accessibility and the user experience on mobile devices.
screencast-127.0.0.1_4200-2024.03.24-22_17_32.webm

@crocmons crocmons changed the title Fixed Mobile Screen Navigation or Smaller Screen Navigation at the bottom of the screen [Outreachy Task Submission] Fixed Mobile Screen Navigation or Smaller Screen Navigation at the bottom of the screen Mar 11, 2024
@crocmons crocmons changed the title [Outreachy Task Submission] Fixed Mobile Screen Navigation or Smaller Screen Navigation at the bottom of the screen [Outreachy Task Submission] Fixed Mobile Screen Navigation or Smaller Screen Navigation at the bottom of the screen menubar Mar 11, 2024
@crocmons crocmons changed the title [Outreachy Task Submission] Fixed Mobile Screen Navigation or Smaller Screen Navigation at the bottom of the screen menubar [Outreachy Task Submission] Fixed Mobile Screen Navigation at the bottom of the screen menubar Mar 11, 2024
@Angamanga Angamanga self-requested a review March 15, 2024 14:01
Copy link
Contributor

@Angamanga Angamanga left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for your PR. While this solves the problem, there is actually something else that causes this problem, not that the button is actually there or not. I would rather keep the button since its a piece of functionality. My hint is: Check the positioning and use of CSS for the share-button :).

crocmons and others added 23 commits March 24, 2024 16:17
…latform-client-mzima into #4807-fixed-mobile-navigation
* update-test

* fix failing test

* the test is fine, the platform is broken
…shahidi#827)

* wip wip wip

* Added location handling

---------

Co-authored-by: ushahidlee <[email protected]> , Angamanga <[email protected]>
* add step to reveal child category

* fix failing category test
* wip wip wip

* Added location handling

* Fix for required fields.

* removed stupid comment

---------

Co-authored-by: Anna Iosif <[email protected]>
* Fix: Submitting post via mobile app (ushahidi#829)

* Gives each date|time widget a unique id so they can be dealt with separately. (ushahidi#792)

* fix(USH-1128): rewrite mobile image uploader component

---------

Co-authored-by: ushahidlee <[email protected]>

* chore: bump to mobile app version 2.202410.0

* chore: remove backend_url env.json to avoid it being built into mobile app

* chore: remove feature from create/edit collection form

* chore: fix issue with fetching api url when no choosen deployment

---------

Co-authored-by: ushahidlee <[email protected]>
…i#892)

* Bug fixes

* Fixing duplication across tasks

* Tidied and removed un-necessary translation code
* update cypress to latest version

* remove unused configuration

* rerun tests

---------

Co-authored-by: Walt <[email protected]>
* add waits to stabilize edit post test

* fix failing edit post test
…page size (ushahidi#802)

* fix disappearing account info browser resize

* add function to detect mobile devices

* make requested fixes

---------

Co-authored-by: Anna Iosif <[email protected]>
…ore they're published (ushahidi#861)

* Add tests for survey configurations

* Correct test method

* Add specific locator for survey

* Fix failing tests

* Fix failing tests

* Add force true

* Rectify the locator in the form

* Fix locators

* Edit the locators for the selected survey item

* Edit the locators

* Fix failing test

* Fix failing test

* Ensure locator is updated

* Remove the force true on save

* Clear filters

* Edit clear locator

* Add wait period after loading

* Change status locator

* Fix failing tests

* minor changes to wordings around the tests

* minor changes to wordings around the tests

---------

Co-authored-by: Shakira <[email protected]>
Co-authored-by: AmTryingMyBest <[email protected]>
Co-authored-by: Walter <[email protected]>
…latform-client-mzima into #4807-fixed-mobile-navigation
@crocmons
Copy link
Author

crocmons commented Mar 24, 2024

@Angamanga the pr is now ready for review.. I have fixed all the issues and also changed the description. Please review it.

@crocmons crocmons requested a review from Angamanga March 24, 2024 17:06
Copy link
Contributor

@Angamanga Angamanga left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well done :) Approved!

@Angamanga
Copy link
Contributor

@Angamanga To release

@Angamanga Angamanga closed this Oct 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

8 participants