Skip to content

Restored search hotkey for desktop. (alternative) #2442

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

Merged
SaptakS merged 1 commit into from
Jan 16, 2026
Merged

Restored search hotkey for desktop. (alternative) #2442

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
33 changes: 6 additions & 27 deletions djangoproject/scss/_dark-mode.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -284,13 +284,17 @@ html[data-theme="dark"] .img-release {
cursor: pointer;
border: none;
background: transparent;
vertical-align: middle;
margin: 0 2px;
padding: 0;
color: var(--menu);
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
}

.theme-toggle svg {
vertical-align: middle;
max-width: 16px;
max-height: 16px;
display: none;
Expand Down Expand Up @@ -347,31 +351,6 @@ html[data-theme="light"] .theme-toggle .theme-label-when-light {
background-color: var(--body-bg);
}

// Section of the header that is only visible on mobile.
.header-mobile-only {
line-height: 45px;
text-align: center;
display: flex;
align-items: center;

@include respond-min(1080px) {
display: none;
}

.light-dark-mode-toggle {
height: 45px;
width: 45px;
}
}

// The last 2 items of the nav list are the searchbar and the light/dark mode toggle.
// These are not visible on mobile as they are within the .header-mobile-only section.
header nav li:nth-last-child(-n+2) {
@include respond-max(1079px) {
display: none;
}
}

html[data-theme="light"] .admonition {
.admonition-title::before {
opacity: 0.5;
Expand Down
38 changes: 29 additions & 9 deletions djangoproject/scss/_style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -465,8 +465,6 @@ header {
align-items: center;
}

.header-mobile-only {margin-left: auto}

.meta {
@include font-size(13);
color: var(--primary);
Expand All @@ -475,7 +473,7 @@ header {
margin: 8px 0 0 10px;
display: none;

@include respond-min(1080px) {
@include respond-min(1500px) {
width: 200px;
display: block;
}
Expand Down Expand Up @@ -509,6 +507,22 @@ header {
}
}

.header-tools {
display: flex;
align-items: center;
order: 1;
margin-left: auto;

.search {
flex: 0 1 240px;
}

@include respond-min(1280px) {
order: 3;
margin-left: 0;
}
}

.menu-button {
@include font-size(20);
background: $green-dark;
Expand All @@ -520,8 +534,9 @@ header {
text-align: center;
text-decoration: none;
width: 45px;
order: 2;

@include respond-min(1080px) {
@include respond-min(1280px) {
display: none;
}

Expand All @@ -535,30 +550,35 @@ header {
}

nav {
order: 4;
width: 100%;
background: $green-dark;
transition: max-height 0.3s ease-out;
max-height: 0; // hide mobile menu by default
overflow: hidden;
padding: 0 2px;
flex-basis: 100%;

&.active {
max-height: 580px;
}

@include respond-min(1080px) {
@include respond-min(1280px) {
width: auto;
order: 2;
margin-left: auto;
flex-basis: auto;
max-height: none; // always show menu on a desktop width
}

ul {
margin: 10px 0 0;
padding: 0;

@include respond-min(1080px) {
@include respond-min(1280px) {
display: flex;
align-items: center;
margin: 0;
margin: 2px 0;
}
}

Expand All @@ -576,7 +596,7 @@ header {
padding: 20px 0px;
}

@include respond-min(1080px) {
@include respond-min(1280px) {
margin: 0;
border: 0;
float: left;
Expand Down Expand Up @@ -616,7 +636,7 @@ header {
color: var(--secondary-accent);
}

@include respond-min(1080px) {
@include respond-min(1280px) {
padding: 20px 10px;
}
}
Expand Down
16 changes: 4 additions & 12 deletions djangoproject/templates/includes/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,6 @@
<div class="container container--flex--wrap--mobile">
<a class="logo" href="{% url 'homepage' %}">Django</a>
<p class="meta">The web framework for perfectionists with deadlines.</p>
<div class="header-mobile-only">
{% search_form %}
<div class="light-dark-mode-toggle">
{% include "includes/toggle_theme.html" %}
</div>
</div>
<button class="menu-button">
<i class="icon icon-reorder"></i>
<span class="visuallyhidden">Menu</span>
Expand Down Expand Up @@ -46,13 +40,11 @@
<li{% if 'fundraising' in request.path %} class="active"{% endif %}>
<a href="{% url 'fundraising:index' %}">&#9829; Donate</a>
</li>
<li>
{% search_form %}
</li>
<li>
{% include "includes/toggle_theme.html" %}
</li>
</ul>
</nav>
<div class="header-tools">
{% search_form %}
{% include "includes/toggle_theme.html" %}
Copy link
Member

@adamzap adamzap Jan 7, 2026

Choose a reason for hiding this comment

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

I suppose we could remove this include now, but it's probably out of scope here.

</div>
</div>
</header>
36 changes: 0 additions & 36 deletions djangoproject/utils.py
View file
Open in desktop

This file was deleted.

6 changes: 2 additions & 4 deletions docs/templatetags/docs.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,15 @@
from pygments.formatters.html import HtmlFormatter
from pygments.lexers import get_lexer_by_name

from djangoproject.utils import CachedLibrary

from ..forms import DocSearchForm
from ..models import DocumentRelease
from ..search import START_SEL, STOP_SEL
from ..utils import get_doc_path, get_doc_root, get_module_path

register = CachedLibrary()
register = template.Library()


@register.cached_context_inclusion_tag("search_form.html")
@register.inclusion_tag("search_form.html", takes_context=True)
def search_form(context):
if "request" not in context:
# Django's built-in error views (like django.views.defaults.server_error)
Expand Down
17 changes: 0 additions & 17 deletions docs/tests/test_templates.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
import shutil
import tempfile
from pathlib import Path
from unittest.mock import Mock

from django.conf import settings
from django.template import Context, Template
Expand Down Expand Up @@ -251,19 +250,3 @@ def test_search_form_renders_without_request_in_template(self):
kwargs={"lang": settings.DEFAULT_LANGUAGE_CODE, "version": "dev"},
)
self.assertIn(f'<form action="{docs_search_url}">', rendered)

def test_search_form_queries_multiple_renders(self):
r2 = Release.objects.create(version="2.0")
DocumentRelease.objects.create(
lang=settings.DEFAULT_LANGUAGE_CODE, release=r2, is_default=True
)
template = Template("{% load docs %}{% search_form %}{% search_form %}")
with self.assertNumQueries(1):
rendered = template.render(Context({"request": Mock()}))

docs_search_url = reverse_with_host(
"document-search",
host="docs",
kwargs={"lang": settings.DEFAULT_LANGUAGE_CODE, "version": "2.0"},
)
self.assertEqual(rendered.count(f'<form action="{docs_search_url}">'), 2)