konstantin/iamkonstantin
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages 1 Wiki Activity

Improve search look and feel

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

10
search/templates/search/search.html
View file

@ -13,13 +13,11 @@
<form action="{% url 'search' %}" method="get" class="container">
<div class="flex flex-col space-y-4">
<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..."
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 %}>
</div>
<div>
<input type="submit" class="primary-button" value="Search">
</div>
</div>
@ -30,7 +28,7 @@
</div>
</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">
<h2 class="sr-only">Search results</h2>
@ -48,6 +46,8 @@
<h4><a href="{% pageurl result %}">{{ result }}</a></h4>
{% if result.search_description %}
{{ result.search_description }}
{% elif result.post.intro %}
{{ result.post.intro }}
{% endif %}
</li>
{% endfor %}

10
theme/static_src/src/styles.css
View file

@ -60,11 +60,19 @@
@apply my-2 text-lg;
}
.search li {
@apply my-6;
}
.search li h4 {
@apply inline;
}
.blog-content ul, .home-content ul {
@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: "👉";
font-family: NotoEmoji;
@apply inline-block mr-2 py-1;