Extend homepage with additional context and visuals #1507

Sethsuraj579 · 2026-01-23T07:05:59Z

The current homepage for logged-out users is optimized solely for login and lacks context regarding what The Wikipedia Library actually is. This creates confusion for new editors who have recently reached access thresholds.

This patch extends the landing page to include:

A new About section explaining the tool's purpose and utility.
Usage statistics (monthly users, citations) to demonstrate impact.
Responsive styling to ensure the layout works on both desktop and mobile views.

Bug: T337486
Change-Id: If442d8476605ac31f4a037dc63a6fef28604cc7b

Description

Describe your changes in detail following the commit message guidelines

Rationale

Phabricator Ticket

How Has This Been Tested?

Screenshots of your changes (if appropriate):

Types of changes

What types of changes does your code introduce? Add an x in all the boxes that apply:

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Minor change (fix a typo, add a translation tag, add section to README, etc.)

The current homepage for logged-out users is optimized solely for login and lacks context regarding what The Wikipedia Library actually is. This creates confusion for new editors who have recently reached access thresholds. This patch extends the landing page to include: - A new About section explaining the tool's purpose and utility. - Usage statistics (monthly users, citations) to demonstrate impact. - Responsive styling to ensure the layout works on both desktop and mobile views. Bug: T337486 Change-Id: If442d8476605ac31f4a037dc63a6fef28604cc7b

Copilot

Pull request overview

This pull request redesigns the logged-out homepage for The Wikipedia Library to provide more context about the service. The previous design was primarily focused on login functionality and used a Glide.js carousel to display partner logos. The new design replaces the carousel with a static partner grid, adds an "About" section with service information, displays usage statistics, and introduces a new topbar with search functionality.

Changes:

Redesigned homepage with hero section, partner grid, about section, and statistics
Removed Glide.js carousel and associated JavaScript
Added comprehensive CSS styling for new modern design with responsive breakpoints
Updated About page with improved visual styling and card-based layout

Reviewed changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated 17 comments.

Show a summary per file

File	Description
`TWLight/templates/partner_carousel.html`	Replaced carousel with static partner grid (limited to 8 partners), added About section with features, and statistics section
`TWLight/templates/login_partial.html`	Added new topbar with search form and language selector, redesigned hero section with criteria card
`TWLight/templates/homepage.html`	Removed Glide.js CSS imports and JavaScript initialization code
`TWLight/templates/about.html`	Restructured with hero section, intro box, and card-based content sections for improved visual hierarchy
`TWLight/static/css/new-local.css`	Added extensive CSS for new homepage design including topbar, hero, partners, about, and statistics sections with responsive breakpoints

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-23T07:12:48Z

TWLight/templates/partner_carousel.html

+            <span class="feature-text">{% trans 'Free Access' %}</span>
+          </div>
+        </div>
+        <a href="about" class="about-cta-btn">{% trans 'Learn More' %} <i class="fa fa-arrow-right"></i></a>


The link to the about page uses a relative URL "about" instead of the Django URL reverse pattern. This should use {% url 'about' %} to ensure the link works correctly regardless of the current URL path and is consistent with other links in the template.

Suggested change

<a href="about" class="about-cta-btn">{% trans 'Learn More' %} <i class="fa fa-arrow-right"></i></a>

<a href="{% url 'about' %}" class="about-cta-btn">{% trans 'Learn More' %} <i class="fa fa-arrow-right"></i></a>

Copilot · 2026-01-23T07:12:48Z

TWLight/templates/partner_carousel.html

+        <div class="partner-logo-box">
+          <img src="{{ partner.partner_logo }}"
+               class="partner-logo"
+               alt="{{partner.partner_name}} logo"


The partner logo images lack proper spacing in the alt text. The template uses alt="{{partner.partner_name}} logo" which will render without a space between the partner name and "logo" (e.g., "ProQuestlogo" instead of "ProQuest logo"). Add a space before "logo" to ensure proper accessibility.

Suggested change

alt="{{partner.partner_name}} logo"

alt="{{ partner.partner_name|add:' logo' }}"

Copilot · 2026-01-23T07:12:48Z

TWLight/templates/login_partial.html

+            <i class="fa fa-info-circle" aria-hidden="true" data-toggle="tooltip" data-placement="bottom"
+               data-html="true" title="{% trans 'These criteria grant you access to certain collections but not all. Some collections are accessible on a per application basis only.' %}"></i>


The tooltip on this icon requires JavaScript initialization to function (typically $('[data-toggle="tooltip"]').tooltip()). The homepage.html previously included this initialization but it has been removed in this PR. Without this initialization, the tooltip will not display on hover. Either add the initialization back to the homepage template's JavaScript block or add it to a global script file.

Copilot · 2026-01-23T07:12:48Z

TWLight/static/css/new-local.css

+    display: flex;
+    align-items: center;
+    justify-content: center;


The pseudo-elements (lines 2100-2116) use display: flex to center the checkmark icon. While this works in modern browsers, it's not universally supported for pseudo-elements in older browsers. Consider using alternative centering methods like line-height matching the height, or text-align: center with appropriate padding for better cross-browser compatibility.

Suggested change

display: flex;

align-items: center;

justify-content: center;

line-height: 24px;

text-align: center;

Copilot · 2026-01-23T07:12:49Z

TWLight/templates/partner_carousel.html

+        <div class="about-features">
+          <div class="feature-item">
+            <i class="fa fa-database feature-icon"></i>
+            <span class="feature-text">{% trans '90+ Databases' %}</span>
+          </div>
+          <div class="feature-item">
+            <i class="fa fa-globe feature-icon"></i>
+            <span class="feature-text">{% trans '34 Languages' %}</span>
+          </div>
+          <div class="feature-item">
+            <i class="fa fa-lock feature-icon"></i>
+            <span class="feature-text">{% trans 'Free Access' %}</span>
+          </div>


The feature statistics "90+ Databases" and "34 Languages" are hardcoded. Similar to the statistics section, these values should be dynamically generated from the database. The view already provides a no_of_languages context variable (though it's no longer used) and could provide database counts as well.

Copilot · 2026-01-23T07:12:51Z

TWLight/static/css/new-local.css

+    backdrop-filter: blur(10px);
+    padding: 32px 40px;
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+


The backdrop-filter: blur(10px) property is not supported in all browsers (notably older versions of Firefox and Safari). Consider adding a fallback for browsers that don't support this property, or ensure the design still looks acceptable without it. You can use the @supports CSS feature query to provide fallback styles.

Suggested change

backdrop-filter: blur(10px);

padding: 32px 40px;

border-radius: 12px;

border: 1px solid rgba(255, 255, 255, 0.2);

}

padding: 32px 40px;

border-radius: 12px;

border: 1px solid rgba(255, 255, 255, 0.2);

}

@supports (backdrop-filter: blur(10px)) {

.about-intro-box {

backdrop-filter: blur(10px);

}

}

@supports not (backdrop-filter: blur(10px)) {

.about-intro-box {

/* Fallback for browsers that do not support backdrop-filter */

background: rgba(255, 255, 255, 0.9);

}

}

Copilot · 2026-01-23T07:12:51Z

TWLight/templates/login_partial.html

+  <form class="topbar-search" method="get" action="/">
+    <input type="search" name="q" class="topbar-search-input" placeholder="{% trans 'Search the library' %}" aria-label="{% trans 'Search the library' %}">
+    <button type="submit" class="btn topbar-search-btn">{% trans "Search" %}</button>
  </form>
+


The search form submits to "/" (homepage) with a "q" parameter, but the NewHomePageView doesn't handle search queries. This form appears to be non-functional as there's no backend logic to process the search. Either implement the search functionality in the view or remove this form if search is not intended for logged-out users on the homepage.

Suggested change

<form class="topbar-search" method="get" action="/">

<input type="search" name="q" class="topbar-search-input" placeholder="{% trans 'Search the library' %}" aria-label="{% trans 'Search the library' %}">

<button type="submit" class="btn topbar-search-btn">{% trans "Search" %}</button>

</form>

Copilot · 2026-01-23T07:12:51Z

TWLight/templates/partner_carousel.html

+<div class="row statistics-section">
+  <div class="col-md-4 col-sm-12 text-center stat-box">
+    <div class="stat-icon">
+      <i class="fa fa-user fa-3x"></i>
+    </div>
+    <div class="stat-number">2000+</div>
+    <div class="stat-label">
+      {% comment %}Translators: Statistics label for active users.{% endcomment %}
+      {% trans "Monthly users" %}
+    </div>
+  </div>
+  <div class="col-md-4 col-sm-12 text-center stat-box">
+    <div class="stat-icon">
+      <i class="fa fa-bar-chart fa-3x"></i>
+    </div>
+    <div class="stat-number">200,000+</div>
+    <div class="stat-label">
+      {% comment %}Translators: Statistics label for yearly citations.{% endcomment %}
+      {% trans "Yearly citations" %}
+    </div>
+  </div>
+  <div class="col-md-4 col-sm-12 text-center stat-box">
+    <div class="stat-icon">
+      <i class="fa fa-folder-open-o fa-3x"></i>
+    </div>
+    <div class="stat-number">140+</div>
+    <div class="stat-label">
+      {% comment %}Translators: Statistics label for projects.{% endcomment %}
+      {% trans "Projects" %}
    </div>
  </div>


The statistics shown here (2000+ monthly users, 200,000+ yearly citations, 140+ projects) are hardcoded values. These should either be dynamically calculated from actual data in the database/analytics or clearly marked as approximate figures that are periodically updated. Hardcoded statistics can quickly become outdated and misleading.

Copilot · 2026-01-23T07:12:52Z

TWLight/templates/partner_carousel.html

+      {% for partner in partners|slice:":8" %}
+        <div class="partner-logo-box">
+          <img src="{{ partner.partner_logo }}"
+               class="partner-logo"
+               alt="{{partner.partner_name}} logo"
+               loading="lazy"
+          />
+        </div>
      {% endfor %}


The partner display is limited to only the first 8 partners using |slice:":8". If there are more than 8 partners available, users won't see them on the homepage. Consider either: 1) making this limit configurable, 2) adding pagination or a "View All Partners" link, or 3) documenting why only 8 partners are shown (e.g., to maintain visual consistency).

Copilot · 2026-01-23T07:12:52Z

TWLight/templates/login_partial.html

+          {% comment %}Translators: Subheading describing available collections.{% endcomment %}
+          {% blocktranslate trimmed %}
+          Over 90 of the world's top subscription-only databases, with content in 34 languages, free for Wikipedians of all backgrounds.


The hero subtitle hardcodes "Over 90" databases and "34 languages". These values should be dynamic and match the actual counts from the database. The view can provide these via context variables similar to how it currently provides no_of_languages (which is calculated but no longer used after this change).

Suggested change

{% comment %}Translators: Subheading describing available collections.{% endcomment %}

{% blocktranslate trimmed %}

Over 90 of the world's top subscription-only databases, with content in 34 languages, free for Wikipedians of all backgrounds.

{% comment %}Translators: Subheading describing available collections. `num_databases` and `num_languages` are numbers.{% endcomment %}

{% blocktranslate trimmed with num_databases=no_of_databases num_languages=no_of_languages %}

Over {{ num_databases }} of the world's top subscription-only databases, with content in {{ num_languages }} languages, free for Wikipedians of all backgrounds.

Copilot AI review requested due to automatic review settings January 23, 2026 07:06

Copilot started reviewing on behalf of Sethsuraj579 January 23, 2026 07:06 View session

Copilot AI reviewed Jan 23, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Extend homepage with additional context and visuals #1507

Extend homepage with additional context and visuals #1507

Sethsuraj579 commented Jan 23, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 23, 2026

Uh oh!

Copilot AI Jan 23, 2026

Uh oh!

Copilot AI Jan 23, 2026

Uh oh!

Copilot AI Jan 23, 2026

Uh oh!

Copilot AI Jan 23, 2026

Uh oh!

Copilot AI Jan 23, 2026

Uh oh!

Copilot AI Jan 23, 2026

Uh oh!

Copilot AI Jan 23, 2026

Uh oh!

Copilot AI Jan 23, 2026

Uh oh!

Copilot AI Jan 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

	<a href="about" class="about-cta-btn">{% trans 'Learn More' %} <i class="fa fa-arrow-right"></i></a>
	<a href="{% url 'about' %}" class="about-cta-btn">{% trans 'Learn More' %} <i class="fa fa-arrow-right"></i></a>

	alt="{{partner.partner_name}} logo"
	alt="{{ partner.partner_name\|add:' logo' }}"

		<i class="fa fa-info-circle" aria-hidden="true" data-toggle="tooltip" data-placement="bottom"
		data-html="true" title="{% trans 'These criteria grant you access to certain collections but not all. Some collections are accessible on a per application basis only.' %}"></i>

Extend homepage with additional context and visuals #1507

Are you sure you want to change the base?

Extend homepage with additional context and visuals #1507

Conversation

Sethsuraj579 commented Jan 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Rationale

Phabricator Ticket

How Has This Been Tested?

Screenshots of your changes (if appropriate):

Types of changes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Sethsuraj579 commented Jan 23, 2026 •

edited

Loading