Skip to content

Align Talk component UI with Tickets page #1467

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.

Sign up for GitHub

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

Closed
iamapoorv476 wants to merge 28 commits into from
Closed

Align Talk component UI with Tickets page #1467

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
735ba4f
Align Talk component UI with Tickets page: layout, dropdown, logo adj…
iamapoorv476 Dec 11, 2025
c9f27ad
Update app/eventyay/static/cfp/css/_layout.css
iamapoorv476 Dec 12, 2025
a51c37a
Update app/eventyay/static/cfp/css/_layout.css
iamapoorv476 Dec 12, 2025
c3bdcb5
Update app/eventyay/static/cfp/css/_layout.css
iamapoorv476 Dec 12, 2025
62b9589
Update app/eventyay/common/templates/common/base.html
iamapoorv476 Dec 12, 2025
a4bbb9c
Update app/eventyay/presale/templates/pretixpresale/event/base.html
iamapoorv476 Dec 12, 2025
e6f7b49
Update app/eventyay/static/cfp/css/_layout.css
iamapoorv476 Dec 12, 2025
6d24dd8
Update app/eventyay/static/cfp/css/_layout.css
iamapoorv476 Dec 12, 2025
ceba3c8
Update app/eventyay/static/pretixpresale/scss/main.scss
iamapoorv476 Dec 12, 2025
d9e8bc9
Update app/eventyay/presale/templates/pretixpresale/event/base.html
iamapoorv476 Dec 12, 2025
3450888
Update app/eventyay/static/cfp/css/_layout.css
iamapoorv476 Dec 12, 2025
3a1ed99
Update app/eventyay/static/cfp/css/_layout.css
iamapoorv476 Dec 12, 2025
0d4740d
Update app/eventyay/presale/templates/pretixpresale/event/base.html
iamapoorv476 Dec 12, 2025
457a1a8
Update app/eventyay/common/templates/common/base.html
iamapoorv476 Dec 12, 2025
737cfdb
Update app/eventyay/common/templates/common/base.html
iamapoorv476 Dec 12, 2025
2d32ce5
Update app/eventyay/static/pretixpresale/scss/_event.scss
iamapoorv476 Dec 12, 2025
b6a5e46
Update app/eventyay/static/cfp/css/_layout.css
iamapoorv476 Dec 12, 2025
b830c47
Update app/eventyay/static/cfp/css/_layout.css
iamapoorv476 Dec 12, 2025
05b974a
Update app/eventyay/static/cfp/css/_layout.css
iamapoorv476 Dec 12, 2025
75f2d31
Merge branch 'enext' into enext
mariobehling Dec 12, 2025
853a2ef
Update app/eventyay/static/pretixpresale/scss/_theme.scss
iamapoorv476 Dec 12, 2025
2a7df9d
Remove duplicate header-right styles from custom.css
iamapoorv476 Dec 12, 2025
6e83287
Update app/eventyay/static/cfp/css/_layout.css
iamapoorv476 Dec 12, 2025
8218e71
Update app/eventyay/static/cfp/css/_layout.css
iamapoorv476 Dec 12, 2025
b78fb0c
Update app/eventyay/static/cfp/css/_layout.css
iamapoorv476 Dec 12, 2025
b608a8f
Update app/eventyay/static/cfp/css/_layout.css
iamapoorv476 Dec 12, 2025
86c8b19
Update app/eventyay/presale/templates/pretixpresale/event/base.html
iamapoorv476 Dec 12, 2025
8c22530
Update app/eventyay/static/cfp/css/_layout.css
iamapoorv476 Dec 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 17 additions & 26 deletions app/eventyay/common/templates/common/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@
<body data-datetimeformat="{{ js_datetime_format }}" data-dateformat="{{ js_date_format }}" data-datetimelocale="{{ js_locale }}">
<div id="top-bg" class="header {{ request.event.display_settings.header_pattern|default:"bg-primary" }}">
{% if request.event and request.event.header_image %}
{# we’re not lazy-loading the header image, even though it can be large, because it’s a bit jarring to see it flash in 100ms after the page load #}
{# we're not lazy-loading the header image, even though it can be large, because it's a bit jarring to see it flash in 100ms after the page load #}
<img src="{{ request.event.header_image.url }}" id="header-image" alt="{{ request.event.name }}">
{% endif %}
</div>
Expand All @@ -87,39 +87,30 @@ <h1 class="public-event-header">
<div class="event-logo">
<a href="{% block nav_link %}{% endblock nav_link %}">
{% if request.event and request.event.logo %}
<img loading="lazy" src="{{ request.event.logo.url }}" id="event-logo" alt="{% translate "The event’s logo" %}">
<img loading="lazy" src="{{ request.event.logo.url }}" id="event-logo" alt="{% translate "The event's logo" %}">
{% endif %}
</a>
</div>
<div class="header-row-right">
{% if request.event and request.event.locales|length > 1 and not is_html_export %}
{% if request.event.locales|length > 3 %}
<details id="locale-dropdown-label" class="dropdown locales" aria-haspopup="menu" role="menu">
<summary>
{% for l, name in request.event.named_locales %}
{% if l|lower == request.LANGUAGE_CODE|lower %}{{ name }}{% endif %}
{% endfor %}
<i class="fa fa-caret-down ml-1"></i>
</summary>
<div id="locale-dropdown" class="dropdown-content dropdown-content-s{% if rtl %}e{% else %}w{% endif %}">
{% for l, name in request.event.named_locales %}
{# MODIFIED: Always use dropdown for multiple languages #}
<details id="locale-dropdown-label" class="dropdown locales" aria-haspopup="menu" role="menu">
<summary>
{% for l, name in request.event.named_locales %}
{% if l|lower == request.LANGUAGE_CODE|lower %}{{ name }}{% endif %}
{% endfor %}

Copy link

Copilot AI Dec 11, 2025

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.

Suggested change
<i class="fa fa-caret-down ml-1"></i>

Copilot uses AI. Check for mistakes.
</summary>
<div id="locale-dropdown" class="dropdown-content dropdown-content-s{% if rtl %}e{% else %}w{% endif %}">
{% for l, name in request.event.named_locales %}
{% if l|lower != request.LANGUAGE_CODE|lower %}
{% cfp_locale_switch_url l as locale_switch_url %}
<a href="{{ locale_switch_url }}"
class="dropdown-item {% if l|lower == request.LANGUAGE_CODE|lower %}active{% endif %}" role="menuitem" tabindex="-1">{{ name }}</a>
{% endfor %}
</div>
</details>
{% else %}
<div class="locales-inline">
{% for l, name in request.event.named_locales %}
{% cfp_locale_switch_url l as locale_switch_url %}
<a href="{{ locale_switch_url }}"
class="locale-link {% if l|lower == request.LANGUAGE_CODE|lower %}active{% endif %}">
{{ name }}
</a>
class="dropdown-item" role="menuitem" tabindex="-1">{{ name }}</a>
{% endif %}
{% endfor %}
</div>
{% endif %}
</details>
{% endif %}
{% block header_right %}{% endblock header_right %}
{% if request.event and request.user.is_authenticated and not is_html_export %}
Expand Down Expand Up @@ -217,4 +208,4 @@ <h1 class="public-event-header">
</div>
{% include "common/includes/modals.html" %}
</body>
</html>
</html>
62 changes: 50 additions & 12 deletions app/eventyay/presale/templates/pretixpresale/event/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 page-header-links {% if event.settings.theme_color_background|upper != "#FFFFFF" or event.settings.logo_image_large %}page-header-links-outside{% 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 %}">
Copy link

Copilot AI Dec 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changing from container to container-fluid alters the responsive behavior significantly. The container class uses fixed-width breakpoints while container-fluid spans the full viewport width. Ensure this change is intentional and that the layout still maintains appropriate content width constraints at larger viewport sizes, especially considering the horizontal padding added via the CSS classes.

Suggested change
<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 %}">
<div class="container page-header-links {% if event.settings.theme_color_background|upper != "#FFFFFF" or event.settings.logo_image_large %}page-header-links-outside{% endif %}">

Copilot uses AI. Check for mistakes.
{% if event.settings.theme_color_background|upper != "#FFFFFF" or event.settings.logo_image_large %}
<div class="pull-right header-part flip hidden-print header-content">
<div class="header-part header-right hidden-print header-content">
<nav class="locales" aria-label="{% trans "select language" %}">
{% if event.settings.locales|length > 1 %}
{% for l in languages %}
<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="{% if l.code == request.LANGUAGE_CODE %}active{% endif %}" rel="nofollow" lang="{{ l.code }}" hreflang="{{ l.code }}">
{{ l.name_local }}</a>
{% endfor %}
<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
Copy link

Copilot AI Dec 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The details/summary dropdown implementation lacks proper keyboard accessibility. The summary element should have a tabindex="0" to ensure keyboard users can focus and activate it. Additionally, consider adding aria-expanded attribute that toggles based on the open state of the details element for better screen reader support.

Copilot uses AI. Check for mistakes.
<div id="locale-dropdown" class="dropdown-content dropdown-content-sw">
{% 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="pull-left header-part flip hidden-print">
<div class="header-part header-left hidden-print">
<a href="{% eventurl request.organizer "presale:organizer.index" %}">
&laquo; {% blocktrans trimmed with name=request.organizer.name %}
Show all events of {{ name }}
Expand All @@ -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 %}pull-right flip{% endif %} loginbox hidden-print">
<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" %}">
{% for l in languages %}
<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="{% if l.code == request.LANGUAGE_CODE %}active{% endif %}" rel="nofollow">
{{ l.name_local }}</a>
{% endfor %}
<details class="dropdown locales locale-dropdown-label" 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 +94 to +100
Copy link

Copilot AI Dec 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The details/summary dropdown implementation lacks proper keyboard accessibility. The summary element should have a tabindex="0" to ensure keyboard users can focus and activate it. Additionally, consider adding aria-expanded attribute that toggles based on the open state of the details element for better screen reader support.

Copilot uses AI. Check for mistakes.
<div id="locale-dropdown-bottom" class="dropdown-content dropdown-content-sw">
{% 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 %}
Expand Down
84 changes: 70 additions & 14 deletions app/eventyay/static/cfp/css/_layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ header {

#event-logo {
max-height: 140px;
border-radius: 10px;
border-radius: 0;
}

.header-wrapper {
Expand Down Expand Up @@ -74,10 +74,13 @@ header {
display: flex;
flex-wrap: nowrap;
flex-shrink: 0;
align-items: flex-end;
align-items: center;
gap: 1rem;
font-size: 1rem;

/* Inline locale links */

/* Remove or comment out these styles: */
/*
.locales-inline {
display: inline-block;
margin-right: 0.8rem;
Expand All @@ -101,31 +104,68 @@ header {
font-weight: bold;
opacity: 1;
}
*/

.locales {
margin-right: 20px;
position: relative;

summary {
cursor: pointer;
color: white;
list-style: none;
padding: 6px 12px;

border-radius: 4px;
display: flex;
align-items: center;
gap: 8px;
transition: background 0.2s;
&::after {
content: '▼';
font-size: 0.7em;
margin-left: 4px;
}
}

summary::-webkit-details-marker {
display: none;
}

.dropdown-content {
position: absolute;
top: 100%;
right: 0;
background: white;
border: 1px solid var(--color-grey-lighter);
border-radius: 4px;
right: 0;
left: auto;
min-width: 100px;
min-width: 150px;
margin-top: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 1000;

.dropdown-item {
display: block;
padding: 8px 16px;
color: var(--color-grey-dark, #333);
text-decoration: none;
transition: background 0.2s;

&:hover {
background-color: var(--color-primary-lighter);
color: var(--color-grey-dark);
background-color: var(--color-primary-lighter, #e3f2fd);
color: var(--color-grey-dark, #333);
text-decoration: none;
}

&.active {
background-color: var(--color-primary);
color: white;
font-weight: bold;

&::before {
content: '✓ ';
margin-right: 6px;
}

&:hover {
background-color: var(--color-primary-dark, var(--color-primary));
Expand All @@ -147,15 +187,30 @@ header {
}

#main-card {
min-height: 300px;
box-shadow: 0 5px 10px rgb(0 0 0 / 0.2);
padding: 0;
min-height: 470px;
margin-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
margin-left: 0px;
margin-right: 0px;
line-height: 20px;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;

border: none;
box-shadow: none;

main {
padding: var(--size-spacer);
}
}
.header-row-right details.locales {
margin: 0;
padding: 0;
display: flex;
align-items: center;
}

#event-nonpublic {
background: var(--color-danger);
Expand All @@ -182,13 +237,14 @@ footer {
}
}


#main-container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
max-width: 1140px;
max-width: 1200px;
margin-top: 3.8rem !important;
}

Expand Down Expand Up @@ -263,7 +319,7 @@ footer {
padding: 0;
#event-logo {
max-height: 120px;
border-radius: 10px;
border-radius: 0;
}
}

Expand Down Expand Up @@ -335,4 +391,4 @@ footer {
}
}
}
}
}
4 changes: 2 additions & 2 deletions app/eventyay/static/pretixpresale/scss/_event.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,15 +167,15 @@ section.front-page {
max-height: 140px;
max-width: 240px;
width: auto;
border-radius: 10px;
border-radius: 0 !important;
Copy link

Copilot AI Dec 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using !important on the border-radius property is overly aggressive and may cause issues with specificity in the future. Consider refactoring the CSS to use proper specificity without relying on !important, or document why this override is necessary if it's truly unavoidable.

Copilot uses AI. Check for mistakes.
}

@media (max-width: 768px) {
.event-logo-image {
max-height: 120px;
max-width: 120px;
width: auto;
border-radius: 10px;
border-radius: 0 !important;
margin-bottom: 10px;
}
}
Expand Down
17 changes: 11 additions & 6 deletions app/eventyay/static/pretixpresale/scss/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,10 +105,15 @@

}

.page-header-links{
.header-part{
a {
color: #FFFFFF !important;
}
}
.page-header-links {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
padding-left: 1rem;
padding-right: 1rem;
}

.header-part.header-left {
margin-right: auto;
}
18 changes: 18 additions & 0 deletions app/eventyay/static/pretixpresale/scss/custom.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,3 +112,21 @@
}
}
}
.page-header-links {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
padding-left: 1rem;
padding-right: 1rem;
}
Comment on lines +115 to +122
Copy link

Copilot AI Dec 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Duplicate style definition detected. The .page-header-links selector is defined twice in this file (lines 108-114 and 115-122), with the second definition overriding the first. The first definition (lines 108-114) only contains nested styles for link colors, while the second adds layout properties. These should be merged into a single block to avoid confusion and maintain cleaner code.

Copilot uses AI. Check for mistakes.
.header-part.header-left {
margin-right: auto;
}

.header-part.header-right {
margin-left: auto;
display: flex;
align-items: center;
gap: 1rem;
Comment on lines +125 to +131
Copy link

Copilot AI Dec 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The same CSS rules for .header-part.header-right are defined in both custom.scss (lines 127-132) and custom.css (lines 121-126). This duplication should be avoided. Additionally, these rules are also duplicated in _theme.scss (lines 116-120), creating triple duplication of the same styling rules across multiple files.

Suggested change
}
.header-part.header-right {
margin-left: auto;
display: flex;
align-items: center;
gap: 1rem;

Copilot uses AI. Check for mistakes.
}
Loading