Improve search look and feel

This commit is contained in:
Konstantin 2025-02-13 10:53:55 +01:00
parent 41508948c6
commit e7cab9534e
Signed by: konstantin
GPG key ID: A128B78773E41ACE
2 changed files with 14 additions and 6 deletions

View file

@ -13,13 +13,11 @@
<form action="{% url 'search' %}" method="get" class="container"> <form action="{% url 'search' %}" method="get" class="container">
<div class="flex flex-col space-y-4"> <div class="flex flex-col space-y-4">
<label for="query" class="sr-only block text-sm font-medium leading-6">Search</label> <label for="query" class="sr-only block text-sm font-medium leading-6">Search</label>
<div class="mt-2"> <div class="mt-2 flex space-x-4">
<input type="text" placeholder="Type search keywords..." <input type="text" placeholder="Type search keywords..."
class="block w-full rounded-md border-0 py-1.5 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-klavender sm:text-sm sm:leading-6" class="block w-full rounded-xl border-0 py-1.5 px-2 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-klavender sm:text-sm sm:leading-6"
id="query" name="query"{% if search_query %} value="{{ search_query }}"{% endif %}> id="query" name="query"{% if search_query %} value="{{ search_query }}"{% endif %}>
</div>
<div>
<input type="submit" class="primary-button" value="Search"> <input type="submit" class="primary-button" value="Search">
</div> </div>
</div> </div>
@ -30,7 +28,7 @@
</div> </div>
</section> </section>
<section class="h-full px-0 md:px-4 lg:px-8"> <section class="h-full px-0 md:px-4 lg:px-8 search">
<div class="px-0 md:px-4 lg:px-8"> <div class="px-0 md:px-4 lg:px-8">
<h2 class="sr-only">Search results</h2> <h2 class="sr-only">Search results</h2>
@ -48,6 +46,8 @@
<h4><a href="{% pageurl result %}">{{ result }}</a></h4> <h4><a href="{% pageurl result %}">{{ result }}</a></h4>
{% if result.search_description %} {% if result.search_description %}
{{ result.search_description }} {{ result.search_description }}
{% elif result.post.intro %}
{{ result.post.intro }}
{% endif %} {% endif %}
</li> </li>
{% endfor %} {% endfor %}

View file

@ -60,11 +60,19 @@
@apply my-2 text-lg; @apply my-2 text-lg;
} }
.search li {
@apply my-6;
}
.search li h4 {
@apply inline;
}
.blog-content ul, .home-content ul { .blog-content ul, .home-content ul {
@apply list-none list-inside; @apply list-none list-inside;
} }
.blog-content ul li::before, .home-content ul li::before { .blog-content ul li::before, .home-content ul li::before, .search li::before {
content: "👉"; content: "👉";
font-family: NotoEmoji; font-family: NotoEmoji;
@apply inline-block mr-2 py-1; @apply inline-block mr-2 py-1;