Отображение каталога

templates/base_manga.html

@@ -5,7 +5,6 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}{{ manga.original_title }}{% endblock %}</title>
-    <link rel="stylesheet" href="{% static 'css/manga_catalog.css' %}">    
     
     <link rel="stylesheet" href="{% static 'css/manga_view.css' %}">
         <!-- Меняем размер пикч -->
@@ -31,8 +30,7 @@
             <header class="navigation-box">
                 <ul>
                     <li class="breadcrumb">
-                        <a href="/manga/111">Каталог</a>
-                        <span>-</span>
+                        <a href="/catalog/">Каталог</a>
                         <a href="/manga/111">{{ manga.original_title }}</a>
                         {% block page_title %}{% endblock %}
                     </li>

templates/manga_catalog.html

@@ -1,46 +1,59 @@
-{% extends 'base_manga.html' %}
 {% load static %}
 
-{% block title %}Каталог манги{% endblock %}
+<link rel="stylesheet" href="{% static 'css/manga_catalog.css' %}">    
     
-{% block content %}
 <div class="catalog-container">
-    <h1>Каталог манги</h1>
+    <div >
+        <h1>Каталог манги</h1>
+        
+    </div>
+
     
     <div class="manga-list">
         {% for manga in manga_list %}
         <div class="manga-item">
-            <!-- Изображение слева -->
-            <div class="manga-cover">
-                <img src="{{ manga.img }}" 
-                     alt="{{ manga.original_title }}"
-                     onerror="this.onerror=null; this.src='{% static 'images/default_cover.jpg' %}'">
-            </div>
-            
-            <!-- Информация справа -->
-            <div class="manga-info">
-                <h2>{{ manga.original_title }}</h2>
-                {% if manga.russian_title %}
-                <p class="alt-title">{{ manga.russian_title }}</p>
-                {% endif %}
-                
-                <div class="meta-data">
-                    <span class="pages">{{ manga.len_manga }} страниц</span>
-                    {% if manga.tags %}
-                    <div class="tags">
-                        {% for tag in manga.tags %}
-                        <span class="tag">{{ tag }}</span>
-                        {% endfor %}
-                    </div>
+            <div class="manga-cover-container">
+                <div class="manga-cover">
+                    {% if manga.img %}
+                        <a href={% url 'show_manga' manga.id %}>
+                            <img src="{{ manga.img }}" alt="{{ manga.original_title }}" 
+                                onerror="this.src='{% static 'images/default_cover.jpg' %}'">
+                        </a>
+                    {% else %}
+                        <a href={% url 'show_manga' manga.id %}>
+                            <img src="{% static 'images/default_cover.jpg' %}" alt="Обложка отсутствует">
+                        </a>
                     {% endif %}
                 </div>
-                
                 <a href="{% url 'show_manga' manga.id %}" class="read-button">Читать</a>
             </div>
+            
+            <div class="manga-details">
+                <div class="manga-title">
+                    <h3>{{ manga.original_title }}</h3>
+                </div>
+                
+                <!-- Теги возвращены наверх -->
+                {% if manga.tags %}
+                <div class="tags">
+                    {% for tag in manga.tags %}
+                    <span class="tag">{{ tag }}</span>
+                    {% endfor %}
+                </div>
+                {% endif %}
+                
+                <div class="manga-meta">
+                    <div class="meta-item">
+                        <span class="meta-label">Страниц:</span>
+                        <span class="meta-value">{{ manga.len_manga }}</span>
+                    </div>
+                </div>
+            </div>
         </div>
         {% endfor %}
     </div>
     
+    <!-- Пагинация снизу -->
     <div class="pagination">
         {% if page_obj.has_previous %}
             <a href="?page=1">&laquo; первая</a>
@@ -57,4 +70,3 @@
         {% endif %}
     </div>
 </div>
-{% endblock %}

templates/static/css/manga_catalog.css

@@ -7,7 +7,7 @@ body {
 }
 
 .catalog-container {
-    max-width: 1200px;
+    max-width: 50%;
     margin: 0 auto;
     padding: 20px;
 }
@@ -23,11 +23,17 @@ body {
     box-shadow: 0 2px 5px rgba(0,0,0,0.1);
 }
 
-/* Изображение слева (фиксированная ширина) */
-.manga-cover {
+/* Контейнер для обложки и кнопки */
+.manga-cover-container {
     width: 200px;
-    height: 280px;
     flex-shrink: 0;
+    position: relative;
+}
+
+/* Изображение */
+.manga-cover {
+    width: 100%;
+    height: 280px;
 }
 
 .manga-cover img {
@@ -37,38 +43,45 @@ body {
     display: block;
 }
 
-/* Информация справа */
-.manga-info {
-    padding: 25px;
-    flex-grow: 1;
+/* Кнопка "Читать" поверх изображения */
+.read-button {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 12px 0;
+    background: rgba(74, 137, 220, 0.9);
+    color: white;
+    text-align: center;
+    text-decoration: none;
+    font-weight: bold;
+    transition: background 0.3s;
 }
 
-.manga-info h2 {
+.read-button:hover {
+    background: rgba(59, 125, 216, 0.95);
+}
+
+/* Информация справа */
+.manga-details {
+    padding: 20px;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.manga-title h3 {
     margin: 0 0 8px 0;
     color: #333;
-    font-size: 24px;
-}
-
-.alt-title {
-    color: #666;
-    margin: 0 0 15px 0;
-    font-size: 16px;
-}
-
-.meta-data {
-    margin-top: 20px;
-}
-
-.pages {
-    display: block;
-    color: #888;
-    margin-bottom: 12px;
+    font-size: 20px;
 }
 
+/* Теги под заголовком */
 .tags {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
+    margin: 10px 0 15px 0;
 }
 
 .tag {
@@ -79,29 +92,40 @@ body {
     color: #555;
 }
 
-.read-button {
-    display: inline-block;
-    padding: 10px 25px;
-    background: #4a89dc;
-    color: white;
-    text-decoration: none;
-    border-radius: 5px;
-    margin-top: 15px;
-    transition: background 0.3s;
+/* Мета-информация внизу блока */
+.manga-meta {
+    margin-top: auto;
 }
 
-.read-button:hover {
-    background: #3b7dd8;
+.meta-item {
+    margin-bottom: 10px;
+}
+
+.meta-label {
+    font-weight: bold;
+    color: #555;
+    margin-right: 5px;
 }
 
 /* Адаптивность */
 @media (max-width: 768px) {
+    .catalog-container {
+        max-width: 90%;
+    }
+
     .manga-item {
         flex-direction: column;
     }
 
-    .manga-cover {
+    .manga-cover-container {
         width: 100%;
-        height: 300px;
+    }
+
+    .manga-cover {
+        height: 350px;
+    }
+
+    .manga-details {
+        padding: 15px;
     }
 }