From 13c1f0ccaecc92317d3d51c6414660e3915652bc Mon Sep 17 00:00:00 2001 From: Vinejar <Хуев@мыло.чпок> Date: Mon, 31 Mar 2025 09:21:38 +0300 Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=BE=D0=B8=D1=81=D0=BA=20=D0=BF=D0=BE?= =?UTF-8?q?=20=D1=82=D0=B5=D0=B3=D0=B0=D0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Hentai_manga_model/views.py | 26 +++- templates/manga_catalog.html | 54 ++++--- templates/static/css/manga_catalog.css | 198 ++++++++++++++++++++----- 3 files changed, 208 insertions(+), 70 deletions(-) diff --git a/Hentai_manga_model/views.py b/Hentai_manga_model/views.py index a0d6acd..6736951 100644 --- a/Hentai_manga_model/views.py +++ b/Hentai_manga_model/views.py @@ -1,24 +1,36 @@ from django.shortcuts import render -from .models import manga_collection from django.core.paginator import Paginator +from .models import manga_collection def manga_catalog(request): - # Получаем все записи - all_manga = list(manga_collection.find({})) + # Получаем список всех уникальных тегов + all_tags = manga_collection.distinct("tags") - # Создаем пагинатор - paginator = Paginator(all_manga, 20) + # Получаем выбранные теги из GET-параметров + selected_tags = request.GET.getlist('tags') + + # Формируем запрос для фильтрации + query = {} + if selected_tags: + query['tags'] = {'$all': selected_tags} + + # Получаем отфильтрованные записи + filtered_manga = list(manga_collection.find(query)) + + # Пагинация + paginator = Paginator(filtered_manga, 20) page_number = request.GET.get('page') page_obj = paginator.get_page(page_number) - # Получаем общее количество манги в базе total_manga_count = manga_collection.count_documents({}) return render(request, 'manga_catalog.html', { 'page_obj': page_obj, 'manga_list': page_obj.object_list, - 'total_manga_count': total_manga_count # Добавляем счетчик в контекст + 'total_manga_count': total_manga_count, + 'all_tags': sorted(all_tags), + 'selected_tags': selected_tags }) def show_manga(request, manga_id): diff --git a/templates/manga_catalog.html b/templates/manga_catalog.html index 04cbcac..487c01a 100644 --- a/templates/manga_catalog.html +++ b/templates/manga_catalog.html @@ -1,15 +1,32 @@ {% load static %} -
-

Дроч.кам

-
Манги на сайте: {{ total_manga_count }}
- -
+
+

Дроч.кам

+
Манги на сайте: {{ total_manga_count }}
+
+ + +
+

Фильтр по тегам

+
+
+ {% for tag in all_tags %} +
+ + +
+ {% endfor %} +
+ + {% if selected_tags %} + Сбросить + {% endif %} +
+
+
- - -
{% for manga in manga_list %}
@@ -34,7 +51,6 @@

{{ manga.original_title }}

- {% if manga.tags %}
{% for tag in manga.tags %} @@ -44,11 +60,11 @@ {% endif %}
-
- Страниц: - {{ manga.len_manga }} -
- +
+ Страниц: + {{ manga.len_manga }} +
+
Дата: @@ -60,21 +76,13 @@ Читать в источнике {% endif %} -
- - - -
- -
{% endfor %}
- -
+ \ No newline at end of file diff --git a/templates/static/css/manga_catalog.css b/templates/static/css/manga_catalog.css index fe32a94..22337ba 100644 --- a/templates/static/css/manga_catalog.css +++ b/templates/static/css/manga_catalog.css @@ -4,6 +4,23 @@ body { padding: 0; background: #f8f9fa; font-family: Arial, sans-serif; + position: relative; +} + +.content-wrapper { + display: flex; + justify-content: center; + gap: 20px; + max-width: 1400px; + margin: 0 auto; + padding: 20px; +} + +.center-container { + display: flex; + justify-content: center; + width: 100%; + max-width: 800px; } .catalog-header { @@ -17,20 +34,18 @@ body { background-color: #3987cf; z-index: 1000; align-items: center; - justify-content: space-between; /* Распределяет пространство между элементами */ - padding: 0 20px; /* Добавляем отступы по бокам */ + justify-content: space-between; + padding: 0 20px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; - - } .title-site { color: #ffffff; - position: absolute; /* Абсолютное позиционирование */ - left: 50%; /* Сдвигаем на 50% вправо */ - transform: translateX(-50%); /* Корректируем положение на половину своей ширины */ - margin: 0; /* Убираем стандартные отступы */ + position: absolute; + left: 50%; + transform: translateX(-50%); + margin: 0; } .titles-cont { @@ -38,14 +53,14 @@ body { color: #ffffff; left: 65%; top: 10%; - } - .catalog-container { - max-width: 50%; + max-width: 900px; margin: 0 auto; padding: 20px; + position: relative; + z-index: 1; } /* Карточка манги */ @@ -94,31 +109,6 @@ body { font-weight: bold; transition: background 0.3s; } -/* Строка с мета-информацией */ -.meta-row { - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; - margin-top: auto; -} - -/* Кнопка "Читать в источнике" */ -.read-original-button { - padding: 6px 12px; - background: #6497c5; - color: white; - text-decoration: none; - border-radius: 4px; - font-size: 14px; - transition: background 0.3s; - white-space: nowrap; - margin-left: 15px; -} - -.read-original-button:hover { - background: #5a6268; -} .read-button:hover { background: #2478c2; @@ -166,19 +156,147 @@ body { margin-bottom: 10px; } -.manga-meta{ +.manga-meta { font-weight: bold; color: #555; margin-right: 5px; } +/* Строка с мета-информацией */ +.meta-row { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + margin-top: auto; +} + +/* Кнопка "Читать в источнике" */ +.read-original-button { + padding: 6px 12px; + background: #6497c5; + color: white; + text-decoration: none; + border-radius: 4px; + font-size: 14px; + transition: background 0.3s; + white-space: nowrap; + margin-left: 15px; +} + +.read-original-button:hover { + background: #5a6268; +} + +/* Боковая панель */ +.filter-sidebar { + width: 250px; + background: white; + padding: 15px; + border-radius: 8px; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); + position: fixed; + right: 20px; + top: 100px; + z-index: 100; +} + +.filter-sidebar h3 { + margin-top: 0; + color: #333; + border-bottom: 1px solid #eee; + padding-bottom: 10px; +} + +.tag-filters { + max-height: 500px; + overflow-y: auto; + margin-bottom: 15px; +} + +.tag-filter-item { + margin-bottom: 8px; +} + +.tag-filter-item label { + margin-left: 8px; + cursor: pointer; +} + +.filter-button { + width: 100%; + padding: 10px; + background: #3987cf; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + font-weight: bold; + margin-bottom: 10px; +} + +.filter-button:hover { + background: #2c6db1; +} + +.clear-filter { + display: block; + text-align: center; + color: #666; + text-decoration: none; + font-size: 14px; +} + +.clear-filter:hover { + text-decoration: underline; +} + +/* Пагинация */ +.pagination { + display: flex; + justify-content: center; + padding: 20px 0; + gap: 10px; +} + +.pagination a { + color: #3987cf; + text-decoration: none; + padding: 5px 10px; + border: 1px solid #ddd; + border-radius: 4px; +} + +.pagination a:hover { + background: #eee; +} + +.pagination .current { + padding: 5px 10px; + color: #666; +} /* Адаптивность */ -@media (max-width: 768px) { - .catalog-container { - max-width: 90%; +@media (max-width: 1000px) { + .content-wrapper { + flex-direction: column; + align-items: center; } + .filter-sidebar { + width: 100%; + max-width: 500px; + position: static; + margin-top: 20px; + } + + .catalog-header { + width: 100%; + border-radius: 0; + } +} + +@media (max-width: 768px) { .manga-item { flex-direction: column; }