{{ parent() }} in root/templates/components/dashboard/navbar.html.twig breaks UI

[brunomnsilva]

This is noticeable in smaller screens, e.g., smartphone (used chromium developer tools).
The mentioned file creates a new navbar in the DOM and it does not allow to access the sidemenu options, because it overlaps the toggle buttom previously set in the parent twigs.

Suggested fix is to add a new empty block to @admin/components/dashboard/navbar.html.twig to be extended by root/templates/components/dashboard/navbar.html.twig.

This twig only adds a "LOGIN WITH ROOT ACCOUNT" to the navbar.

[brunomnsilva]

Current UI:

After proposed fix:

[lcharette]

The root message should actually be hidden on small width devices.

[brunomnsilva]

Don't see any code that would impose that. Nevertheless, the current twig structure breaks the UI the same.

Proposed fix in admin/components/dashboard/navbar.html.twig:

{% block dashboard_navbar %}
    <div class="navbar-custom-menu">
        <ul class="nav navbar-nav">
          <!-- additional elements (e.g., menus, messages) before the user account drop down -->
          {% block dashboard_navbar_extra %} {% endblock %}
          <!-- User Account: style can be found in dropdown.less -->
          {% include "components/user-card.html.twig" %}
        </ul>
    </div>
{% endblock %}

Proposed fix in root/templates/components/dashboard/navbar.html.twig:

{% extends "@admin/components/dashboard/navbar.html.twig" %}

{% block dashboard_navbar_extra %}
  <li><a href="#">{{ translate("HEADER_MESSAGE_ROOT") | upper }}</a></li>
{% endblock %}

However, the hierarchy does not seem natural because the root component is extending an additional admin sprinkle component.

[lcharette]

It's not hidden currently, but it should be as a different locale could display a longer string that would be wrapped on two or more line anyway (for example French: VOUS ÊTES CONNECTÉ EN TANT QUE L'UTILISATEUR ROOT).

Can you submit a pull request with the proposed changes?

[brunomnsilva]

Done!

[lcharette]

PR Merged !

Like I said, there's still an issue when the locale is set to french as the string is longer and make things warp on more than one line. I'll just hide it on mobile for now.

[lcharette]

There we go. Tested on different screen size using Safari Responsive Design Mode ;)

[brunomnsilva]

I understand, but that isn't that a corner case? Other solutions would be a shorter translation, or the use of the twig slice filter to cap longer strings.

[lcharette]

Other situation will require a more sophisticated fix, I agree, but as far as the root message goes, I guess it's enough. That string shouldn't be seen by many users (well, one actually).

For the best user experience on a mobile size, icons should be used anyway