Fix menu horizontal scroll when name is too long

[galette.git] / galette / templates / default / elements / logged_user.html.twig

diff --git a/galette/templates/default/elements/logged_user.html.twig b/galette/templates/default/elements/logged_user.html.twig
index 92275b8a185edc9e7868174d445d2c8ffebad51e..b7fb6ad96ab6c463d776b275f870d161673f4b69 100644 (file)
--- a/galette/templates/default/elements/logged_user.html.twig
+++ b/galette/templates/default/elements/logged_user.html.twig
@@ -28,7 +28,7 @@
         </div>
     {% else %}
         {% if not login.getCompactMenu() %}
-            <div class="{{ component_classes }}">
+            <nav class="{{ component_classes }}" aria-label="{{ _T('User menu') }}">
                 <div class="ui item">
                     <i class="user circle big icon" aria-hidden="true"></i>
                     {{ login.loggedInAs()|raw }}
@@ -42,7 +42,7 @@
                                 title="{% if login.isDarkModeEnabled() %}{{ _T("Disable dark mode") }}{% else %}{{ _T("Enable dark mode") }}{% endif %}"
                             >
                                 <i class="icon adjust" aria-hidden="true"></i>
-                                <span class="displaynone">{% if login.isDarkModeEnabled() %}{{ _T("Disable dark mode") }}{% else %}{{ _T("Enable dark mode") }}{% endif %}</span>
+                                <span class="visually-hidden">{% if login.isDarkModeEnabled() %}{{ _T("Disable dark mode") }}{% else %}{{ _T("Enable dark mode") }}{% endif %}</span>
                             </a>
                             <a
                                 class="ui {% if login.isImpersonated() %}purple{% else %}red{% endif %} icon button"
@@ -51,24 +51,32 @@
                                 data-position="bottom right"
                             >
                                 <i class="icon {% if login.isImpersonated() %}user secret{% else %}sign out alt{% endif %}" aria-hidden="true"></i>
-                                <span class="displaynone">{% if login.isImpersonated() %}{{ _T("Unimpersonate") }}{% else %}{{ _T("Log off") }}{% endif %}</span>
+                                <span class="visually-hidden">{% if login.isImpersonated() %}{{ _T("Unimpersonate") }}{% else %}{{ _T("Log off") }}{% endif %}</span>
                             </a>
                         </div>
                     </div>
                 </div>
+            </nav>
+            <div class="ui basic compact fitted segment">
+                {% include "elements/modes.html.twig" %}
             </div>
-            {% include "elements/modes.html.twig" %}
         {% else %}
             {% set component_classes = "ui vertical centered tiny icon fluid menu" %}
-            <div id="logoutmenu" class="{{ component_classes }}">
-                <div class="ui dropdown navigation item no-touch tooltip" data-html="{{ login.loggedInAs()|raw }}" data-position="right center">
+            <nav id="logoutmenu" class="{{ component_classes }}" aria-label="{{ _T('User menu') }}">
+                <div class="ui dropdown navigation item tooltip" data-html="{{ login.loggedInAs()|raw }}" data-position="right center">
                     <i class="user circle icon" aria-hidden="true"></i>
-                    <span class="displaynone">{{ login.loggedInAs()|raw }}</span>
+                    <span class="visually-hidden">{{ login.loggedInAs()|raw }}</span>
                     <i class="dropdown icon" aria-hidden="true"></i>
                     <div class="menu">
                         <div class="item">
                             <div class="ui basic center aligned fitted segment">
+            {% if preferences.pref_website is not empty %}
+                                <a href="{{ preferences.pref_website }}" target="_blank">
+                                    <img src="{{ url_for('logo') }}" width="{{ logo.getOptimalWidth() }}" height="{{ logo.getOptimalHeight() }}" alt="{{ preferences.pref_nom }}" class="icon" title="{{ _T("Open '%s' in a new window")|replace({"%s": preferences.pref_website}) }}"/>
+                                </a>
+            {% else %}
                                 <img src="{{ url_for('logo') }}" width="{{ logo.getOptimalWidth() }}" height="{{ logo.getOptimalHeight() }}" alt="{{ preferences.pref_nom }}" class="icon"/>
+            {% endif %}
                                 <div class="ui block huge brand header">
                                     {{ preferences.pref_nom }}
                                     {% if preferences.pref_slogan %}<div class="sub tiny header">{{ __(preferences.pref_slogan) }}</div>{% endif %}
@@ -88,7 +96,7 @@
                     data-position="right center"
                 >
                     <i class="icon adjust" aria-hidden="true"></i>
-                    <span class="displaynone">{% if login.isDarkModeEnabled() %}{{ _T("Disable dark mode") }}{% else %}{{ _T("Enable dark mode") }}{% endif %}</span>
+                    <span class="visually-hidden">{% if login.isDarkModeEnabled() %}{{ _T("Disable dark mode") }}{% else %}{{ _T("Enable dark mode") }}{% endif %}</span>
                 </a>
                 <a
                     class="item{% if login.isImpersonated() %} purple{% else %} red{% endif %}"
@@ -97,9 +105,9 @@
                     data-position="right center"
                 >
                     <i class="icon {% if login.isImpersonated() %}user secret{% else %}sign out alt{% endif %}" aria-hidden="true"></i>
-                    <span class="displaynone">{% if login.isImpersonated() %}{{ _T("Unimpersonate") }}{% else %}{{ _T("Log off") }}{% endif %}</span>
+                    <span class="visually-hidden">{% if login.isImpersonated() %}{{ _T("Unimpersonate") }}{% else %}{{ _T("Log off") }}{% endif %}</span>
                 </a>
-            </div>
+            </nav>
         {% endif %}
     {% endif %}
 {% endif %}