search template and functionality

posts/templates/posts/post/search.html

@@ -0,0 +1,19 @@
+{% extends "base.html" %}
+
+{% block title %}Search results{% endblock %}
+
+{% block content %}
+  <h1>Search results</h1>
+  {% if query %}
+    <h2>Results for "{{ query }}":</h2>
+    {% if results %}
+      <ul>
+        {% for post in results %}
+          <li><a href="{% url 'posts:post_detail' post.uuid %}">{{ post.title }}</a></li>
+        {% endfor %}
+      </ul>
+    {% else %}
+      <p>No results found.</p>
+    {% endif %}
+  {% endif %}
+{% endblock %}

posts/urls.py

@@ -6,11 +6,12 @@
 
 urlpatterns = [
     # post views
-    path('', views.post_list, name='post_list'),
-    path('tag/<slug:tag_slug>/', views.post_list, name='post_list_by_tag'),
+    path("", views.post_list, name="post_list"),
+    path("tag/<slug:tag_slug>/", views.post_list, name="post_list_by_tag"),
     # path('', views.PostListView.as_view(), name='post_list'),
-    path('<uuid:uuid>/', views.post_detail, name='post_detail'),
-    path('<uuid:post_uuid>/share/', views.post_share, name='post_share'),
-    path('<uuid:post_uuid>/comment/', views.post_comment, name='post_comment'),
-    path('feed/', LatestPostsFeed(), name='post_feed'),
-]
+    path("<uuid:uuid>/", views.post_detail, name="post_detail"),
+    path("<uuid:post_uuid>/share/", views.post_share, name="post_share"),
+    path("<uuid:post_uuid>/comment/", views.post_comment, name="post_comment"),
+    path("feed/", LatestPostsFeed(), name="post_feed"),
+    path("search/", views.post_search, name="post_search"),
+]

posts/views.py

@@ -157,30 +157,20 @@ def post_comment(request, post_uuid):
         context,
     )
 
+
 def post_search(request):
-    form = SearchForm()
+    form = SearchForm(request.GET)
     query = None
-    results = []
-
-    if 'query' in request.GET:
-        form = SearchForm(request.GET)
-        if form.is_valid():
-            query = form.cleaned_data['query']
-            results = (
-                Post.published.annotate(
-                    search=SearchVector('title', 'body'),
-                )
-                .filter(search=query)
-            )
-
-    context = {
-        'form': form,
-        'query': query,
-        'results': results,
-    }
+    if form.is_valid():
+        query = form.cleaned_data["query"]
+        results = Post.published.annotate(
+            search=SearchVector("title", "body"),
+        ).filter(search=query)
+    else:
+        results = []
 
     return render(
-        request, 
-        'posts/post/search.html',
-        context
-    )
+        request,
+        "posts/post/search.html",
+        {"form": form, "query": query, "results": results},
+    )

static/css/base.css

@@ -24,12 +24,19 @@ body {
     padding: 0 1rem;
 }
 
-/* Header styles */
+/* Header Styles */
 .site-header {
-    background: white;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     padding: 1rem 0;
-    margin-bottom: 2rem;
+}
+
+.site-header nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
 }
 
 .site-title {
@@ -39,6 +46,96 @@ body {
     font-weight: bold;
 }
 
+.search-form {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex-grow: 1;
+    justify-content: flex-end;
+}
+
+.search-input {
+    flex-grow: 1;
+    padding: 0.75rem 1.2rem;
+    border: 1px solid var(--border-color);
+    border-radius: 20px;
+    font-size: 1rem;
+    background-color: #f8f9fa;
+}
+
+.search-input:focus {
+    outline: none;
+    border-color: var(--primary-color);
+}
+
+.search-button {
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    padding: 0.75rem 1.2rem;
+    border-radius: 20px;
+    cursor: pointer;
+    font-size: 1rem;
+    transition: background-color 0.3s;
+}
+
+.search-button:hover {
+    background-color: #0090d9;
+}
+
+.search-button i {
+    font-size: 1.1rem;
+}
+
+/* Search Results Template Styles */
+.search-results {
+    margin-top: 2rem;
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    padding: 1.5rem;
+}
+
+.search-results h2 {
+    font-size: 1.8rem;
+    margin-bottom: 1.2rem;
+    color: var(--text-color);
+}
+
+.search-results ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+.search-results li {
+    margin-bottom: 1rem;
+    border-bottom: 1px solid var(--light-gray);
+    padding-bottom: 1rem;
+}
+
+.search-results li:last-child {
+    margin-bottom: 0;
+    border-bottom: none;
+}
+
+.search-results a {
+    color: var(--primary-color);
+    font-size: 1.2rem;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+.search-results a:hover {
+    color: #0090d9;
+}
+
+.search-results p.no-results {
+    font-style: italic;
+    color: var(--comment-info-color);
+    text-align: center;
+    margin-top: 1.5rem;
+}
+
 /* Layout */
 .main-content {
     display: grid;
@@ -89,7 +186,7 @@ body {
         gap: 0.75rem;
     }
 
-    .post-count {
+    Copy.post-count {
         font-size: 0.85rem;
         padding: 0.4rem 0.75rem;
     }

templates/base.html

@@ -20,9 +20,15 @@
       <div class="container">
         <nav>
           <a href="{% url 'posts:post_list' %}" class="site-title">My Blog</a>
+          <form method="get" action="{% url 'posts:post_search' %}" class="search-form">
+            <input type="text" name="query" placeholder="Search posts..." class="search-input" />
+            <button type="submit" class="search-button">
+              <i class="fas fa-search"></i>
+            </button>
+          </form>
         </nav>
       </div>
-    </header>
+  </header>
 
     <div class="container">
       <div class="main-content">