From f57e594e9cbfe14e89212088cae647d645fbdf7b Mon Sep 17 00:00:00 2001
From: Artur Borecki <me@pufereq.pl>
Date: Thu, 12 Mar 2026 13:47:11 +0100
Subject: [PATCH] refactor(header.html): use one unified search bar

---
 kursy/templates/header.html | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/kursy/templates/header.html b/kursy/templates/header.html
index 23bdc1e..350e750 100644
--- a/kursy/templates/header.html
+++ b/kursy/templates/header.html
@@ -1,15 +1,9 @@
 {% load i18n wagtailcore_tags %}
-<header class="bg-blue-900 text-white shadow-md">
+<header class="bg-blue-900 text-white shadow-md relative">
   <div class="container mx-auto flex items-center justify-between py-4 px-6">
     {% wagtail_site as current_site %}
     <a class="text-xl font-bold" href="/">{{ current_site.site_name }}</a>
 
-    <!-- search bar for large screens -->
-    <form action="{% url 'search' %}" method="get" class="hidden md:flex items-center bg-blue-950 rounded-md absolute left-1/2 transform -translate-x-1/2">
-      <input type="text" name="query" placeholder="{% trans 'Search courses...' %}" class="rounded-md px-3 py-2 focus:outline-none">
-      <button type="submit" class="bg-white text-blue-900 rounded-md px-3 py-2 hover:bg-gray-200 transition"><i class="fi fi-br-search"></i></button>
-    </form>
-
     <nav class="flex items-center gap-4">
       {% if user.is_authenticated %}
         <a href="{% url 'account_logout' %}" class="hover:underline">{% trans "Logout" %}</a>
@@ -32,10 +26,9 @@
     </nav>
   </div>
 
-  <!-- search bar for small screens -->
-  <div class="container mx-auto px-6 pb-4 md:hidden">
-    <form action="{% url 'search' %}" method="get" class="flex items-center bg-blue-950 rounded-md w-full">
-      <input type="text" name="query" placeholder="{% trans 'Search courses...' %}" class="rounded-md px-3 py-2 w-full focus:outline-none">
+  <div class="container mx-auto px-6 mb-2 md:mb-0">
+    <form action="{% url 'search' %}" method="get" class="flex items-center bg-blue-950 rounded-md md:w-auto md:absolute md:left-1/2 md:top-1/2 md:transform md:-translate-x-1/2 md:-translate-y-1/2 md:mt-0">
+      <input type="text" name="query" placeholder="{% trans 'Search courses...' %}" class="rounded-md px-3 py-2 w-full md:w-auto focus:outline-none">
       <button type="submit" class="bg-white text-blue-900 rounded-md px-3 py-2 hover:bg-gray-200 transition"><i class="fi fi-br-search"></i></button>
     </form>
   </div>