Align Talk component UI with Tickets page #1467
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -40,22 +40,41 @@ | |||||
| <img src="{{ event.settings.event_logo_image.url }}" alt="{% translate 'Event logo' %}" class="img-fluid event-logo-image"> | ||||||
| </div> | ||||||
| {% endif %} | ||||||
| <div class="container-fluid page-header-links {% if event.settings.theme_color_background|upper != "#FFFFFF" or event.settings.logo_image_large %}page-header-links-outside{% endif %}"> | ||||||
|
There was a problem hiding this comment. Changing from
Suggested change
|
||||||
| {% if event.settings.theme_color_background|upper != "#FFFFFF" or event.settings.logo_image_large %} | ||||||
| <div class="header-part header-right hidden-print header-content"> | ||||||
| <nav class="locales" aria-label="{% trans "select language" %}"> | ||||||
| {% if event.settings.locales|length > 1 %} | ||||||
| <details id="locale-dropdown-label" class="dropdown locales" aria-haspopup="menu" role="menu"> | ||||||
| <summary> | ||||||
| {% for l in languages %} | ||||||
| {% if l.code == request.LANGUAGE_CODE %}{{ l.name_local }}{% endif %} | ||||||
| {% endfor %} | ||||||
| <i class="fa fa-caret-down ml-1"></i> | ||||||
| </summary> | ||||||
|
Comment on lines
+48
to
+54
There was a problem hiding this comment. The details/summary dropdown implementation lacks proper keyboard accessibility. The summary element should have a |
||||||
| <div id="locale-dropdown" class="dropdown-content dropdown-content-sw"> | ||||||
|
iamapoorv476 marked this conversation as resolved.
Outdated
|
||||||
| {% for l in languages %} | ||||||
| {% if l.code != request.LANGUAGE_CODE %} | ||||||
| <a href="{% url "presale:locale.set" %}?locale={{ l.code }}&next={{ request.path }}{% if request.META.QUERY_STRING %}%3F{{ request.META.QUERY_STRING|urlencode }}{% endif %}" | ||||||
| class="dropdown-item" | ||||||
| rel="nofollow" | ||||||
| lang="{{ l.code }}" | ||||||
| hreflang="{{ l.code }}" | ||||||
| role="menuitem" | ||||||
| tabindex="-1"> | ||||||
| {{ l.name_local }} | ||||||
| </a> | ||||||
| {% endif %} | ||||||
| {% endfor %} | ||||||
| </div> | ||||||
| </details> | ||||||
| {% endif %} | ||||||
| </nav> | ||||||
| {% include "pretixpresale/fragment_login_status.html" %} | ||||||
| </div> | ||||||
| {% endif %} | ||||||
| {% if request.event.settings.organizer_link_back %} | ||||||
| <div class="header-part header-left hidden-print"> | ||||||
| <a href="{% eventurl request.organizer "presale:organizer.index" %}"> | ||||||
| « {% blocktrans trimmed with name=request.organizer.name %} | ||||||
| Show all events of {{ name }} | ||||||
|
|
@@ -70,12 +89,31 @@ | |||||
| <div class=" {% if event_logo and event.settings.logo_image_large %}logo-large{% endif %}"> | ||||||
| {% if event.settings.locales|length > 1 %} | ||||||
| {% if event.settings.theme_color_background|upper == "#FFFFFF" and not event.settings.logo_image_large %} | ||||||
| <div class="{% if not event_logo or not event.settings.logo_image_large %}header-right{% endif %} loginbox hidden-print"> | ||||||
| <nav class="locales" aria-label="{% trans "select language" %}"> | ||||||
| <details id="locale-dropdown-label" class="dropdown locales" aria-haspopup="menu" role="menu"> | ||||||
|
iamapoorv476 marked this conversation as resolved.
Outdated
|
||||||
| <summary> | ||||||
| {% for l in languages %} | ||||||
| {% if l.code == request.LANGUAGE_CODE %}{{ l.name_local }}{% endif %} | ||||||
| {% endfor %} | ||||||
| <i class="fa fa-caret-down ml-1"></i> | ||||||
| </summary> | ||||||
|
Comment on lines
+94
to
+100
There was a problem hiding this comment. The details/summary dropdown implementation lacks proper keyboard accessibility. The summary element should have a |
||||||
| <div id="locale-dropdown" class="dropdown-content dropdown-content-sw"> | ||||||
|
There was a problem hiding this comment. Duplicate ID 'locale-dropdown' exists in the same template (lines 55 and 101). HTML IDs must be unique within a document. Since both dropdown implementations can appear on the same page (one for when theme_color_background != "#FFFFFF" and another for when theme_color_background == "#FFFFFF"), this creates invalid HTML. Consider using classes instead of IDs for the dropdown content, or ensure these elements are mutually exclusive.
Suggested change
iamapoorv476 marked this conversation as resolved.
Outdated
|
||||||
| {% for l in languages %} | ||||||
| {% if l.code != request.LANGUAGE_CODE %} | ||||||
| <a href="{% url "presale:locale.set" %}?locale={{ l.code }}&next={{ request.path }}{% if request.META.QUERY_STRING %}%3F{{ request.META.QUERY_STRING|urlencode }}{% endif %}" | ||||||
| class="dropdown-item" | ||||||
| rel="nofollow" | ||||||
| lang="{{ l.code }}" | ||||||
| hreflang="{{ l.code }}" | ||||||
| role="menuitem" | ||||||
| tabindex="-1"> | ||||||
| {{ l.name_local }} | ||||||
| </a> | ||||||
| {% endif %} | ||||||
| {% endfor %} | ||||||
| </div> | ||||||
| </details> | ||||||
| </nav> | ||||||
| </div> | ||||||
| {% endif %} | ||||||
|
|
||||||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -167,15 +167,15 @@ section.front-page { | |
| max-height: 140px; | ||
| max-width: 240px; | ||
| width: auto; | ||
| border-radius: 0 !important; | ||
|
There was a problem hiding this comment. Using |
||
| } | ||
|
|
||
| @media (max-width: 768px) { | ||
| .event-logo-image { | ||
| max-height: 120px; | ||
| max-width: 120px; | ||
| width: auto; | ||
| border-radius: 0 !important; | ||
|
iamapoorv476 marked this conversation as resolved.
Outdated
|
||
| margin-bottom: 10px; | ||
| } | ||
| } | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The summary element is missing a visual indicator caret (dropdown arrow). While the CSS adds an ::after pseudo-element with '▼', this is not included in the HTML. Consider adding an explicit Font Awesome icon like the other implementation in common/base.html (line 53 uses
<i class="fa fa-caret-down ml-1"></i>), or ensure the CSS ::after pseudo-element is consistently applied.