Improve empty events UI by Vachanbs · Pull Request #3129 · fossasia/eventyay

Vachanbs · 2026-04-01T17:37:06Z

Description

This PR improves the empty state UI of the event list page.

Previously, when no events were available, the page displayed a simple message inside a table row. This update enhances the user experience by introducing a more structured and user-friendly layout, along with a clear call-to-action button.

Changes Made

Replaced plain text with a structured UI block
Added descriptive message for clarity
Added "Create Your First Event" button
Used Django URL reversing instead of hardcoded paths
Ensured all text uses {% trans %} for internationalization
Added accessibility improvements using ARIA attributes

File Modified

eventyay/app/eventyay/control/templates/control/event_list.html

Impact

Improves usability, accessibility, and maintainability of the event list page.

sourcery-ai

Sorry @Vachanbs, you have reached your weekly rate limit of 500000 diff characters.

Please try again later or upgrade to continue using Sourcery

Vachanbs · 2026-04-01T17:37:31Z

Added accessibility improvements (ARIA attributes) to the empty state UI.

Saksham-Sirohi · 2026-04-02T20:02:25Z

Please mention what issue this solves and attach screenshots

Copilot

Pull request overview

This PR updates the Video Admin event list empty state (control/event_list.html) to replace the current “no events” table-row message with a more structured, call-to-action focused layout.

Changes:

Reformats the event list template markup and spacing.
Replaces the {% empty %} table row with a richer empty-state block (headline, description, CTA button).
Adds/adjusts accessibility-related attributes in the empty state and action UI.

Copilot · 2026-04-02T20:06:40Z

+{% extends "pretixcontrol/admin/base.html" %} {% load i18n %} {% block
+video_admin_content %}


The opening template tags are broken across lines: {% block on line 1 is not closed until line 2, which will raise a Django TemplateSyntaxError. Keep {% extends %}, {% load %}, and {% block video_admin_content %} as complete tags (typically one per line).

Suggested change

{% extends "pretixcontrol/admin/base.html" %} {% load i18n %} {% block

video_admin_content %}

{% extends "pretixcontrol/admin/base.html" %}

{% load i18n %}

{% block video_admin_content %}

Copilot · 2026-04-02T20:06:40Z

+  {% trans "Overview of events managed by the Video Admin. Use the table actions
+  to manage settings, generate admin tokens, or clear data." %}


The {% trans %} string literal spans multiple lines, which will embed a newline and indentation into the translation key and rendered output. Use a single-line {% trans %} string or switch to {% blocktrans trimmed %} for multiline text.

Suggested change

{% trans "Overview of events managed by the Video Admin. Use the table actions

to manage settings, generate admin tokens, or clear data." %}

{% blocktrans trimmed %}Overview of events managed by the Video Admin. Use the table actions

to manage settings, generate admin tokens, or clear data.{% endblocktrans %}

Copilot · 2026-04-02T20:06:40Z

-            </a>
-            {% endif %}
+          {% if event.domain %}
+          <a href="https://{{ event.domain }}" target="_blank">


Links opened with target="_blank" should include rel="noopener" (or noopener noreferrer) to prevent tabnabbing and avoid giving the new page access to window.opener.

Suggested change

<a href="https://{{ event.domain }}" target="_blank">

<a href="https://{{ event.domain }}" target="_blank" rel="noopener noreferrer">

Copilot · 2026-04-02T20:06:41Z

+      <a href="{% url 'control:organizers.add' %}" 
+         class="btn btn-primary mt-3"
+         aria-label="{% trans 'Create your first event' %}">
+        {% trans "Create Your First Event" %}


The empty-state CTA says “Create Your First Event” but links to control:organizers.add (create organizer). This is likely the wrong destination for an event-list empty state; link to the video admin event creation route instead (e.g. the same namespace used for cloning: eventyay_admin:video_admin:event.create) or adjust the button text to match the actual action.

Suggested change

<a href="{% url 'control:organizers.add' %}"

class="btn btn-primary mt-3"

aria-label="{% trans 'Create your first event' %}">

{% trans "Create Your First Event" %}

<a href="{% url 'control:organizers.add' %}"

class="btn btn-primary mt-3"

aria-label="{% trans 'Create your first organizer' %}">

{% trans "Create Your First Organizer" %}

Copilot · 2026-04-02T20:06:41Z

+    <div class="text-center mt-5 text-muted">
+
+      <h3 class="fw-bold" role="status">
+        {% trans "No events available" %}
+      </h3>
+
+      <p>{% trans "Looks like there are no events yet." %}</p>
+
+      <a href="{% url 'control:organizers.add' %}" 
+         class="btn btn-primary mt-3"


The empty-state markup uses utility classes like mt-5 and fw-bold, but this admin UI is built on Bootstrap 3.4.1 and there is no .mt-5/.fw-bold defined in the repository stylesheets. This means the spacing/bold styling likely won’t apply; consider using existing Bootstrap 3 classes or add a dedicated class with CSS.

Suggested change

<div class="text-center mt-5 text-muted">

<h3 class="fw-bold" role="status">

{% trans "No events available" %}

</h3>

<p>{% trans "Looks like there are no events yet." %}</p>

<a href="{% url 'control:organizers.add' %}"

class="btn btn-primary mt-3"

<div class="text-center text-muted" style="margin-top: 30px;">

<h3 role="status">

{% trans "No events available" %}

</h3>

<p>{% trans "Looks like there are no events yet." %}</p>

<a href="{% url 'control:organizers.add' %}"

class="btn btn-primary"

style="margin-top: 15px;"

Copilot · 2026-04-02T20:06:41Z

+            <span class="fa fa-trash"></span> {% trans "Delete data" %}
+          </a>


Decorative FontAwesome icons should be marked aria-hidden="true" to avoid noise for screen readers (see similar patterns in other video admin templates).

Copilot · 2026-04-02T20:06:41Z

+            <span class="fa fa-lock"></span> {% trans "Admin access" %}
+          </a>


Decorative FontAwesome icons should be marked aria-hidden="true" to avoid noise for screen readers (see similar patterns in other video admin templates).

Copilot · 2026-04-02T20:06:42Z

+            <span class="fa fa-clone"></span> {% trans "Clone" %}
+          </a>


Decorative FontAwesome icons should be marked aria-hidden="true" to avoid noise for screen readers (see similar patterns in other video admin templates).

Copilot · 2026-04-02T20:06:42Z

+            <span class="fa fa-pencil"></span> {% trans "Edit" %}
+          </a>


Decorative FontAwesome icons should be marked aria-hidden="true" to avoid noise for screen readers (see similar patterns in other video admin templates).

ArnavBallinCode

thanks for the contribution, please add screenshots for the UI changes (before/after)?

ArnavBallinCode

also do address ai reviews

ArnavBallinCode

Please add screenshots for the UI changes (before/after)

Saksham-Sirohi · 2026-04-18T13:12:34Z

Closing as no proper response to the reviews and a denial to provide screenshots. Thank you for your contribution. Feel free to open it again properly

Vachanbs added 3 commits March 31, 2026 21:19

Improve empty state UI for event list page

c918e97

Add translation support to empty state UI

03991f9

Improve accessibility for empty state UI

e54c2aa

github-project-automation Bot added this to Eventyay Next Apr 1, 2026

github-project-automation Bot moved this to Backlog in Eventyay Next Apr 1, 2026

sourcery-ai Bot reviewed Apr 1, 2026

View reviewed changes

Merge branch 'dev' into improve-empty-events-ui

02abb65

Saksham-Sirohi requested review from Copilot April 2, 2026 20:02

Copilot started reviewing on behalf of Saksham-Sirohi April 2, 2026 20:03 View session

Copilot AI reviewed Apr 2, 2026

View reviewed changes

ArnavBallinCode suggested changes Apr 2, 2026

View reviewed changes

ArnavBallinCode reviewed Apr 2, 2026

View reviewed changes

Address review comments and fixes

fab8868

ArnavBallinCode suggested changes Apr 6, 2026

View reviewed changes

Saksham-Sirohi closed this Apr 18, 2026

github-project-automation Bot moved this from Backlog to Done in Eventyay Next Apr 18, 2026

		{% extends "pretixcontrol/admin/base.html" %} {% load i18n %} {% block
		video_admin_content %}

		{% trans "Overview of events managed by the Video Admin. Use the table actions
		to manage settings, generate admin tokens, or clear data." %}

	<a href="https://{{ event.domain }}" target="_blank">
	<a href="https://{{ event.domain }}" target="_blank" rel="noopener noreferrer">

		<span class="fa fa-trash"></span> {% trans "Delete data" %}
		</a>

		<span class="fa fa-lock"></span> {% trans "Admin access" %}
		</a>

Conversation

Vachanbs commented Apr 1, 2026

Description

Changes Made

File Modified

Impact

Uh oh!

sourcery-ai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Vachanbs commented Apr 1, 2026

Uh oh!

Saksham-Sirohi commented Apr 2, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

ArnavBallinCode left a comment

Choose a reason for hiding this comment

Uh oh!

ArnavBallinCode left a comment

Choose a reason for hiding this comment

Uh oh!

ArnavBallinCode left a comment

Choose a reason for hiding this comment

Uh oh!

Saksham-Sirohi commented Apr 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants