Поиск по тегам

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):

templates/manga_catalog.html

@@ -1,15 +1,32 @@
 {% load static %}
 
 <link rel="stylesheet" href="{% static 'css/manga_catalog.css' %}">    
-    <div class="catalog-header">
+<div class="catalog-header">
     <h1 class="title-site">Дроч.кам</h1>
     <h5 class="titles-cont">Манги на сайте: {{ total_manga_count }}</h5>
+</div>
 
+<!-- Боковая панель фильтрации (добавлена в начало, но будет справа благодаря CSS) -->
+<div class="filter-sidebar">
+    <h3>Фильтр по тегам</h3>
+    <form method="get" action="{% url 'manga_catalog' %}">
+        <div class="tag-filters">
+            {% for tag in all_tags %}
+            <div class="tag-filter-item">
+                <input type="checkbox" id="tag-{{ forloop.counter }}" name="tags" value="{{ tag }}"
+                       {% if tag in selected_tags %}checked{% endif %}>
+                <label for="tag-{{ forloop.counter }}">{{ tag }}</label>
             </div>
+            {% endfor %}
+        </div>
+        <button type="submit" class="filter-button">Применить фильтр</button>
+        {% if selected_tags %}
+        <a href="{% url 'manga_catalog' %}" class="clear-filter">Сбросить</a>
+        {% endif %}
+    </form>
+</div>
+
 <div class="catalog-container">
-
-
-    
     <div class="manga-list">
         {% for manga in manga_list %}
         <div class="manga-item">
@@ -34,7 +51,6 @@
                     <h3>{{ manga.original_title }}</h3>
                 </div>
                 
-                <!-- Теги -->
                 {% if manga.tags %}
                 <div class="tags">
                     {% for tag in manga.tags %}
@@ -60,21 +76,13 @@
                             Читать в источнике
                         </a>
                         {% endif %}
-
                     </div>
-                    
-
-                    
-
                 </div>
-          
-            
             </div>
         </div>
         {% endfor %}
     </div>
     
-    <!-- Пагинация снизу -->
     <div class="pagination">
         {% if page_obj.has_previous %}
             <a href="?page=1">&laquo; первая</a>

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;
     }