wowlikon/LibraryAPI
1
0
Fork 0
mirror of https://github.com/wowlikon/LiB.git synced 2026-02-04 04:31:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Добавление функционала поиска и обновление документации

Browse Source
This commit is contained in:
wowlikon
2025-12-20 00:49:09 +03:00
parent 85b531e6e1
commit e7f2987eea
2 changed files with 332 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
library_service/templates/books.html
+17 -42
View File
@@ -11,7 +11,9 @@ content %}
type="text"
id="book-search-input"
class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-gray-500"
placeholder="Поиск книг..."
placeholder="Поиск книг (мин. 3 символа)..."
minlength="3"
maxlength="50"
/>
<svg
class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"
@@ -34,26 +36,26 @@ content %}
<h3 class="font-medium mb-2">Авторы</h3>
<div class="relative">
<div
class="flex flex-wrap gap-2 p-2 border border-gray-300 rounded-md bg-white"
class="flex flex-wrap gap-2 p-2 border border-gray-300 rounded-md bg-white min-h-[42px]"
id="selected-authors-container"
>
<input
type="text"
id="author-search-input"
class="flex-grow outline-none bg-transparent"
class="flex-grow outline-none bg-transparent min-w-[100px]"
placeholder="Начните вводить..."
/>
</div>
<div
id="author-dropdown"
class="absolute z-10 w-full bg-white border border-gray-300 rounded-md mt-1 hidden max-h-60 overflow-y-auto"
class="absolute z-10 w-full bg-white border border-gray-300 rounded-md mt-1 hidden max-h-60 overflow-y-auto shadow-lg"
></div>
</div>
</div>
<div class="mb-4">
<h3 class="font-medium mb-2">Жанры</h3>
<ul id="genres-list"></ul>
<ul id="genres-list" class="max-h-60 overflow-y-auto"></ul>
</div>
<button
@@ -68,46 +70,19 @@ content %}
>
Сбросить фильтры
</button>
<!-- Счётчик результатов -->
<div
id="results-counter"
class="mt-4 text-center text-sm text-gray-500"
></div>
</aside>
<main class="flex-1" id="books-container">
<div
class="bg-white p-4 rounded-lg shadow-md mb-4 flex justify-between items-start"
>
<div>
<h3 class="text-lg font-bold mb-1">Product Title 1</h3>
<p class="text-gray-700 text-sm">
A short description of the product, highlighting its key
features and benefits.
</p>
</div>
<span class="text-lg font-semibold text-gray-600">$29.99</span>
</div>
<div
class="bg-white p-4 rounded-lg shadow-md mb-4 flex justify-between items-start"
>
<div>
<h3 class="text-lg font-bold mb-1">Product Title 2</h3>
<p class="text-gray-700 text-sm">
Another great product with amazing features. You'll love it!
</p>
</div>
<span class="text-lg font-semibold text-blue-600">$49.99</span>
</div>
<div
class="bg-white p-4 rounded-lg shadow-md mb-4 flex justify-between items-start"
>
<div>
<h3 class="text-lg font-bold mb-1">Product Title 3</h3>
<p class="text-gray-700 text-sm">
This product is a must-have for every modern home. High
quality and durable.
</p>
</div>
<span class="text-lg font-semibold text-gray-600">$19.99</span>
<main class="flex-1">
<div id="books-container">
<!-- Книги будут загружены через JS -->
</div>
<!-- Пагинация добавляется динамически после books-container -->
</main>
</div>
{% endblock %} {% block scripts %}