From fb77446187d0eff96eb41241544226bd08435898 Mon Sep 17 00:00:00 2001 From: RUDRAKSH FANSE Date: Sat, 18 Oct 2025 11:39:17 +0530 Subject: [PATCH 1/4] Fix horizontal scroll on mobile search filters --- djangoproject/scss/_style.scss | 37 +++++++++++++++++++++++-- docs/templates/docs/search_results.html | 20 ++++++++++--- 2 files changed, 51 insertions(+), 6 deletions(-) diff --git a/djangoproject/scss/_style.scss b/djangoproject/scss/_style.scss index 2fe7c0cfd1..a7b12ec73d 100644 --- a/djangoproject/scss/_style.scss +++ b/djangoproject/scss/_style.scss @@ -2640,11 +2640,44 @@ search.filters { display: flex; gap: 10px; border-bottom: 2px solid var(--hairline-color); - overflow-x: auto; - white-space: nowrap; padding-bottom: 0; position: relative; + // Desktop: Show horizontal tabs + .filter-tabs { + display: flex; + gap: 10px; + overflow-x: auto; + white-space: nowrap; + flex: 1; + + @media (max-width: 768px) { + display: none; // Hide tabs on mobile + } + } + + // Mobile: Show dropdown + .filter-dropdown { + display: none; // Hide on desktop + width: 100%; + padding: 10px; + font-size: 16px; + border: 1px solid var(--hairline-color); + border-radius: 4px; + background-color: var(--body-bg); + color: var(--body-fg); + cursor: pointer; + + @media (max-width: 768px) { + display: block; // Show dropdown on mobile + } + + &:focus { + outline: 2px solid var(--primary); + outline-offset: 2px; + } + } + a { padding: 10px 20px; text-decoration: none; diff --git a/docs/templates/docs/search_results.html b/docs/templates/docs/search_results.html index 4f400a8384..67dc1dcd37 100644 --- a/docs/templates/docs/search_results.html +++ b/docs/templates/docs/search_results.html @@ -13,10 +13,22 @@ {% if query %} - {% translate "All" context "all documentation categories" %} - {% for category in DocumentationCategory %} - {{ category.label }} - {% endfor %} + + {# Desktop: Horizontal tabs #} +
+ {% translate "All" context "all documentation categories" %} + {% for category in DocumentationCategory %} + {{ category.label }} + {% endfor %} +
+ + {# Mobile: Dropdown select #} +

{% if release.is_dev %} From b11fe4bee4bc379079fc9051fb09b130f290b154 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Sat, 18 Oct 2025 06:13:18 +0000 Subject: [PATCH 2/4] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- docs/templates/docs/search_results.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/templates/docs/search_results.html b/docs/templates/docs/search_results.html index 67dc1dcd37..b4f8d37b5b 100644 --- a/docs/templates/docs/search_results.html +++ b/docs/templates/docs/search_results.html @@ -13,7 +13,7 @@ {% if query %} - + {# Desktop: Horizontal tabs #}
{% translate "All" context "all documentation categories" %} @@ -21,7 +21,7 @@ {{ category.label }} {% endfor %}
- + {# Mobile: Dropdown select #} - - {% for category in DocumentationCategory %} - - {% endfor %} - + {# Tablet/Mobile: Show "All" + "More" dropdown (selected shown in dropdown) #} +
+ {% translate "All" context "all documentation categories" %} + +
+ + +
+

{% if release.is_dev %} @@ -121,4 +135,39 @@

{% endif %} {% endif %} + + {% endblock %} From 24331eaab50adfa364ec5d5ed9430d976fcb2e73 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Sun, 19 Oct 2025 11:52:43 +0000 Subject: [PATCH 4/4] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- djangoproject/scss/_style.scss | 10 +++++----- docs/templates/docs/search_results.html | 12 ++++++------ 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/djangoproject/scss/_style.scss b/djangoproject/scss/_style.scss index 92dc4d7a1e..a012e6a5f3 100644 --- a/djangoproject/scss/_style.scss +++ b/djangoproject/scss/_style.scss @@ -2667,7 +2667,7 @@ search.filters { // Tablet/Mobile: Show hybrid (All + selected + More dropdown) .filter-tabs-responsive { display: none; // Hide on desktop - + @media (max-width: 1024px) { display: flex; gap: 10px; @@ -2714,7 +2714,7 @@ search.filters { &[aria-expanded="true"] { color: var(--body-fg); - + .filter-more-icon { transform: rotate(180deg); } @@ -2789,7 +2789,7 @@ search.filters { box-shadow: none !important; // Remove underline from all child elements - *, + *, .filter-checkmark { text-decoration: none !important; text-decoration-line: none !important; @@ -2810,7 +2810,7 @@ search.filters { text-underline-offset: 0 !important; transform: none !important; outline: none !important; - + // Add subtle left border on hover &::before { content: ""; @@ -2835,7 +2835,7 @@ search.filters { color: var(--body-fg) !important; border: none !important; border-bottom: none !important; - + &:hover { background-color: rgba(0, 0, 0, 0.12) !important; border: none !important; diff --git a/docs/templates/docs/search_results.html b/docs/templates/docs/search_results.html index 1705093476..7cf277eadb 100644 --- a/docs/templates/docs/search_results.html +++ b/docs/templates/docs/search_results.html @@ -13,7 +13,7 @@ {% if query %} - + {# Desktop: All horizontal tabs #}
{% translate "All" context "all documentation categories" %} @@ -21,11 +21,11 @@ {{ category.label }} {% endfor %}
- + {# Tablet/Mobile: Show "All" + "More" dropdown (selected shown in dropdown) #}
{% translate "All" context "all documentation categories" %} - +