Restored search hotkey for desktop.

4 files changed, 39 insertions, 84 deletions

diff --git a/djangoproject/scss/_dark-mode.scss b/djangoproject/scss/_dark-mode.scss
index 717ba1ae..6da713f5 100644
--- a/djangoproject/scss/_dark-mode.scss
+++ b/djangoproject/scss/_dark-mode.scss
@@ -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;
@@ -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;
diff --git a/djangoproject/scss/_style.scss b/djangoproject/scss/_style.scss
index e1c14e82..c8db3b45 100644
--- a/djangoproject/scss/_style.scss
+++ b/djangoproject/scss/_style.scss
@@ -465,8 +465,6 @@ header {
         align-items: center;
     }
 
-    .header-mobile-only {margin-left: auto}
-
     .meta {
         @include font-size(13);
         color: var(--primary);
@@ -475,7 +473,7 @@ header {
         margin: 8px 0 0 10px;
         display: none;
 
-        @include respond-min(1080px) {
+        @include respond-min(1500px) {
             width: 200px;
             display: block;
         }
@@ -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;
@@ -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;
         }
 
@@ -535,19 +550,24 @@ 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
         }
 
@@ -555,10 +575,10 @@ header {
             margin: 10px 0 0;
             padding: 0;
 
-            @include respond-min(1080px) {
+            @include respond-min(1280px) {
                 display: flex;
                 align-items: center;
-                margin: 0;
+                margin: 2px 0;
             }
         }
 
@@ -576,7 +596,7 @@ header {
               padding: 20px 0px;
             }
 
-            @include respond-min(1080px) {
+            @include respond-min(1280px) {
                 margin: 0;
                 border: 0;
                 float: left;
@@ -616,7 +636,7 @@ header {
                 color: var(--secondary-accent);
             }
 
-            @include respond-min(1080px) {
+            @include respond-min(1280px) {
                 padding: 20px 10px;
             }
         }
diff --git a/djangoproject/templates/includes/header.html b/djangoproject/templates/includes/header.html
index aa62a1bc..d8fe681d 100644
--- a/djangoproject/templates/includes/header.html
+++ b/djangoproject/templates/includes/header.html
@@ -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>
@@ -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" %}
+    </div>
   </div>
 </header>
diff --git a/djangoproject/utils.py b/djangoproject/utils.py
deleted file mode 100644
index d06f1863..00000000
--- a/djangoproject/utils.py
+++ /dev/null
@@ -1,36 +0,0 @@
-from django import template
-
-
-class CachedLibrary(template.Library):
-    def cached_context_inclusion_tag(self, template_name, *, name=None):
-        """
-        Wraps @register.inclusion_tag(template_name, takes_context=True) to
-        automatically cache the returned context dictionary inside the
-        template's render_context for the duration of a single render pass.
-
-        This is useful when a tag may be rendered multiple times within the
-        same template and computing its context is expensive (e.g. due to
-        database queries).
-        """
-
-        def decorator(func):
-            tag_name = name or func.__name__
-
-            @self.inclusion_tag(template_name, takes_context=True, name=tag_name)
-            def wrapper(context, *args, **kwargs):
-                render_context = getattr(context, "render_context", None)
-                cache_key = f"{tag_name}_cached_context"
-
-                if render_context is not None and cache_key in render_context:
-                    return render_context[cache_key]
-
-                result = func(context, *args, **kwargs)
-
-                if render_context is not None:
-                    render_context[cache_key] = result
-
-                return result
-
-            return wrapper
-
-        return decorator