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

feat: Improve edit button visibility #11037

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

davisjrule
Copy link

@davisjrule davisjrule commented Nov 22, 2024

What

This pull request addresses issue [#10865] by improving the web user experience on the product page. Previously, the "Edit" and "Share" buttons were positioned at the top and bottom of the page. This placement required users to scroll back to those specific areas to access these actions, which could be inconvenient, especially on pages with extensive product information.

Changes Made:

  • Moved "Edit" and "Share" Buttons to Navbar:

    • Updated the product_page.tt.html template to include the "Edit" and "Share" buttons within the navbar's inline list.
    • This change makes the buttons always visible as the user scrolls down the page, enhancing accessibility.
  • Adjusted HTML Structure:

    • Incorporated the buttons as <li> elements within the existing <ul class="inline-list"> in the navbar.
    • Ensured that the buttons are properly integrated without disrupting the existing navigation items.
  • Removed Redundant "Edit" Button at Bottom:

    • Eliminated the duplicate "Edit" button from the bottom of the product page to streamline the user interface.
    • This reduces clutter and potential confusion for users.

Why These Changes Were Made:

  • Enhanced Usability:

    • Keeping the "Edit" and "Share" buttons visible at all times allows users to access these actions without unnecessary scrolling.
    • Improves the overall user experience by making key functionalities readily available.
  • Consistency Across Pages:

    • Aligns the product page with modern web design practices where important actions are accessible within sticky navigation elements.
    • Provides a consistent interface for users across different sections of the website.

Screenshot

Screenshot 2024-11-22 at 4 51 18 PM

Related issue(s) and discussion

@davisjrule davisjrule requested a review from a team as a code owner November 22, 2024 21:53
@github-actions github-actions bot added Product Page Template::Toolkit The templating toolkit used by product opener. The starting point for HTML/JS/CSS fixes. labels Nov 22, 2024
Copy link

sonarcloud bot commented Nov 22, 2024

@stephanegigandet stephanegigandet changed the title Improve edit button visibility feat: Improve edit button visibility Nov 26, 2024
@codecov-commenter
Copy link

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 48.88%. Comparing base (dc04d18) to head (ec44ac3).
Report is 789 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main   #11037      +/-   ##
==========================================
- Coverage   49.54%   48.88%   -0.66%     
==========================================
  Files          67       77      +10     
  Lines       20650    22283    +1633     
  Branches     4980     5339     +359     
==========================================
+ Hits        10231    10893     +662     
- Misses       9131    10057     +926     
- Partials     1288     1333      +45     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Product Page Road to editing Template::Toolkit The templating toolkit used by product opener. The starting point for HTML/JS/CSS fixes.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants