0_0_1

2025-03-30 03:51:35 +03:00
parent 9d4585f573
commit c634edd56d
3 changed files with 50 additions and 17 deletions
--- a/templates/manga_view.html
+++ b/templates/manga_view.html
@@ -5,16 +5,26 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ manga.original_title }}</title>
-    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
-    <script src="{% static 'js/script.js' %}" defer></script>
+    <link rel="stylesheet" type="text/css" href="{% static 'css/manga_view.css' %}">
+    <script src="{% static 'js/manga_view.js' %}" defer></script>
 </head>
 <body>

 <div class="container">
-    <h1>{{ manga.original_title }}</h1>
-
    <!-- Основной контейнер для контента -->
    <div class="content-wrapper">
+    
+        <div class="chapter">
+                <ul style="display: block">
+                    <li class="breadcrumb">
+                        <a href="/manga/111">Каталог</a>
+                        <span>-</span>
+                        <a href="/manga/111">{{ manga.original_title }}</a>
+                    </li>
+                </ul>
+        </div>
+    
+    
        <!-- Бокс с изображением -->
        <div class="image-box" id="imageBox">
            <img id="mangaImage" src="" alt="Страница">
@@ -32,7 +42,7 @@
                {% endfor %}
            </div>
        </div>
-    </div>
+    
    
            <!-- Выпадающий список страниц -->
        <div class="page postload">
@@ -45,5 +55,8 @@
        </div>
    </div>

+
+</div>
+
 </body>
 </html>
--- a/templates/static/css/manga_view.css
+++ b/templates/static/css/manga_view.css
@@ -1,7 +1,13 @@
 /* Основные стили */
-.content-wrapper {
-    position: relative;
-    min-height: 500px;
+.centered-box {
+    width: 800px;
+    margin: 0 auto;  /* Автоматические отступы по бокам */
+    background: #f0f0f0;
+    padding: 20px;
+    align-content: center;
+}
+.centered-box > *{
+    margin: 10px 15px;
 }

 .image-box {
@@ -24,7 +30,7 @@

 .manga-grid {
    display: grid;
-    grid-template-columns: repeat(6, 102px);
+    grid-template-columns: repeat(9, 102px);
    gap: 10px;
    justify-content: center;
    margin: 0 auto;
@@ -53,6 +59,20 @@
    transform: scale(1.05);
 }

+.breadcrumb {
+    font-weight: bold;
+    list-style: none;
+    text-decoration: none;
+
+}
+
+li.breadcrumb > a {
+    text-decoration: none !important;
+    color: green;
+}
+
+
+
 /* Адаптивность */
@media (max-width: 768px) {
    .manga-grid {
--- a/templates/static/js/manga_view.js
+++ b/templates/static/js/manga_view.js