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

Slightly misaligned icons in user menu #16595

Closed
mvarblow opened this issue Aug 21, 2024 · 0 comments · Fixed by #16596
Closed

Slightly misaligned icons in user menu #16595

mvarblow opened this issue Aug 21, 2024 · 0 comments · Fixed by #16596
Labels

Comments

@mvarblow
Copy link
Contributor

Describe the bug

Most of the standard user menu items include icons that are tagged with the "fixed width" (fa-fw) font awesome class which allows them to align nicely in the drop-down menu. However, a few are missing the fa-fw class so they appear a bit askew.
 

Orchard Core version

1.8.3

To Reproduce

Steps to reproduce the behavior:

  1. Sign in to the admin dashboard
  2. Enable the "Users Change Email" feature and then under Security > Settings > User Change email, check "Allow the users to change their email" setting and press Save. (This just makes the problem a bit more obvious.)
  3. Click on the user icon and notice that the drop-down menu text is not aligned quite right.

Expected behavior

The menu should have nicely aligned icons and text. The problem is a bit subtle but it's enough that it gives just a bit of a sloppy appearance that some users (and our UX team) have noted.

Logs and screenshots

Here's a screenshot showing the menu with a straight red line added to help clarify that the text is not properly aligned.

image

Notice that most of the UserMenuItem-*.cshml templates use the fa-fw (fontawesome fixed width class) to ensure that the text after the icon will be aligned correctly. For example, the Change Email shape:

<li>
    <a class="dropdown-item" asp-route-area="@UserConstants.Features.Users" asp-controller="ChangeEmail" asp-action="Index">
        <i class="fa-solid fa-envelope fa-fw" aria-hidden="true"></i> @T["Change Email"]
    </a>
</li>

However, some of them are missing the fa-fw class. For example, the Sign Out shape:

<li>
    <a class="dropdown-item" asp-area="@UserConstants.Features.Users" asp-controller="Account" asp-action="ChangePassword" asp-route-returnUrl="@FullRequestPath">
        <i class="fa-solid fa-key" aria-hidden="true"></i> @T["Change password"]
    </a>
</li>
<li>
    <form asp-route-area="@UserConstants.Features.Users" asp-controller="Account" asp-action="LogOff" method="post" class="no-multisubmit">
        <button type="submit" class="dropdown-item">
            <i class="fa-solid fa-sign-out-alt" aria-hidden="true"></i> @T["Log off"]
        </button>
    </form>
</li>

If I add the missing fa-fw classes, then the problem is resolved.

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant