pufereq/kursy-mirror
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(templates/header.html): make search bar responsive

Browse Source
This commit is contained in:
Artur Borecki
2026-03-11 12:58:05 +01:00
parent 87989fb134
commit 8dda2ecd52
1 changed files with 16 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
kursy/templates/header.html
View File

@@ -1,7 +1,14 @@
{% load i18n %} {% load i18n %}
<header class="bg-blue-900 text-white shadow-md"> <header class="bg-blue-900 text-white shadow-md">
<div class="container mx-auto flex items-center justify-between py-4 px-6"> <div class="container mx-auto flex items-center justify-between py-4 px-6">
<a class="text-xl font-bold" href="/">Kursy</a> <a class="text-xl font-bold" href="/">Kursy</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"> <nav class="flex items-center gap-4">
{% if user.is_authenticated %} {% if user.is_authenticated %}
<a href="{% url 'account_logout' %}" class="hover:underline">{% trans "Logout" %}</a> <a href="{% url 'account_logout' %}" class="hover:underline">{% trans "Logout" %}</a>
@@ -23,4 +30,12 @@
</div> </div>
</nav> </nav>
</div> </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">
<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>
</header> </header>