From c0a5ff6b90a1394a79558b91b3a24a5daf9b2805 Mon Sep 17 00:00:00 2001 From: Vinejar <Хуев@мыло.чпок> Date: Sun, 30 Mar 2025 05:55:37 +0300 Subject: [PATCH] =?UTF-8?q?=D0=90=D0=B4=D0=B0=D0=BF=D1=82=D0=B8=D0=B2?= =?UTF-8?q?=D0=BD=D1=8B=D0=B9=20=D1=84=D1=83=D1=82=D1=82=D0=B5=D1=80\?= =?UTF-8?q?=D1=85=D0=B5=D0=B4=D0=B5=D1=80,=20=D1=83=D0=B2=D0=B5=D0=BB?= =?UTF-8?q?=D0=B8=D1=87=D0=B8=D0=BB=D0=B8=20=D1=80=D0=B0=D0=B7=D0=BC=D0=B5?= =?UTF-8?q?=D1=80=20=D0=BF=D0=B8=D0=BA=D1=87=20=D1=87=D0=B5=D1=80=D0=B5?= =?UTF-8?q?=D0=B7=20root?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- templates/base_manga.html | 8 +- templates/manga_page.html | 4 +- templates/manga_view.html | 8 +- templates/static/css/manga_view.css | 176 +++++++++++++++------------- 4 files changed, 105 insertions(+), 91 deletions(-) diff --git a/templates/base_manga.html b/templates/base_manga.html index 77f7190..9c6b2c5 100644 --- a/templates/base_manga.html +++ b/templates/base_manga.html @@ -6,6 +6,12 @@ {% block title %}{{ manga.original_title }}{% endblock %} + +
@@ -22,7 +28,7 @@ -
+
{% block content %}{% endblock %}
diff --git a/templates/manga_page.html b/templates/manga_page.html index 179ab12..35a534f 100644 --- a/templates/manga_page.html +++ b/templates/manga_page.html @@ -8,8 +8,8 @@ {% endblock %} {% block content %} -
- Страница {{ page_number }} +
+ Страница {{ page_number }}
{% endblock %} diff --git a/templates/manga_view.html b/templates/manga_view.html index 041eecb..6711ac1 100644 --- a/templates/manga_view.html +++ b/templates/manga_view.html @@ -2,10 +2,8 @@ {% block title %}{{ manga.original_title }} - Превью{% endblock %} -{% block page_title %}{% endblock %} - {% block content %} -
+
{% for img in manga.imgs_manga %}
@@ -25,8 +23,4 @@ Страница {{ forloop.counter }} {% endfor %} -{% endblock %} - -{% block page_buttons %} - {% endblock %} \ No newline at end of file diff --git a/templates/static/css/manga_view.css b/templates/static/css/manga_view.css index 1b077d2..f77c21b 100644 --- a/templates/static/css/manga_view.css +++ b/templates/static/css/manga_view.css @@ -1,86 +1,26 @@ -/* Основные стили */ +/* Базовые стили */ +body { + margin: 0; + padding: 0; + min-height: 100vh; + display: flex; + flex-direction: column; + background: #f8f9fa; +} + .main-container { - max-width: 900px; + max-width: 1200px; margin: 0 auto; padding: 20px; -} - -/* Навигационная цепочка */ -.breadcrumb { + flex: 1; display: flex; - align-items: center; - list-style: none; - padding: 0; - margin: 0 0 20px 0; - font-size: 16px; -} - -.breadcrumb span { - margin: 0 5px; - color: #666; -} - -/* Сетка превью */ -.manga-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); - gap: 15px; -} - -.manga-preview { - width: 100px; - height: 140px; - overflow: hidden; - border-radius: 5px; - box-shadow: 0 2px 5px rgba(0,0,0,0.2); -} - -.manga-preview img { + flex-direction: column; width: 100%; - height: 100%; - object-fit: cover; - transition: transform 0.3s; -} - -.manga-preview:hover img { - transform: scale(1.05); -} - -/* Страница манги */ -.image-navigation-container { - margin-top: 20px; - text-align: center; -} - -.image-box img { - max-width: 100%; - max-height: 80vh; - object-fit: contain; -} - -.page-navigation { - margin-top: 20px; - display: flex; - justify-content: center; - gap: 15px; -} - -.nav-button { - padding: 8px 15px; - background: #f0f0f0; - border-radius: 4px; - text-decoration: none; - color: #333; -} - -.nav-button:hover { - background: #e0e0e0; } /* Хедер */ .navigation-box { padding: 15px 0; - border-bottom: 1px solid #eee; margin-bottom: 20px; } @@ -91,21 +31,82 @@ padding: 0; margin: 0; font-size: 16px; + flex-wrap: wrap; } .breadcrumb a, .breadcrumb span { margin: 0 5px; + white-space: nowrap; +} + +/* Основное содержимое */ +.content-area { + flex: 1; + display: flex; + flex-direction: column; +} + +/* Сетка превью */ +.grid-container { + width: 100%; + margin-bottom: 20px; +} + +.manga-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); + gap: 15px; + justify-items: center; +} + +.manga-preview { + width: 100px; + height: 140px; + overflow: hidden; + border-radius: 5px; + box-shadow: 0 2px 5px rgba(0,0,0,0.2); + transition: transform 0.3s; +} + +.manga-preview:hover { + transform: scale(1.05); +} + +.manga-preview img { + width: 100%; + height: 100%; + object-fit: cover; +} + +/* Страница манги */ +.image-scaling-container { + width: 100%; + flex: 1; + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 20px; +} + +.scalable-image { + max-width: var(--manga-page-width); + max-height: var(--manga-page-height); + width: auto; + height: auto; + object-fit: contain; + box-shadow: 0 2px 10px rgba(0,0,0,0.2); } /* Футер */ .footer-navigation { - margin-top: 30px; - padding-top: 20px; + margin-top: auto; + padding: 20px 0; border-top: 1px solid #eee; display: flex; flex-direction: column; align-items: center; gap: 15px; + width: 100%; } .dropdown-box select { @@ -113,11 +114,14 @@ border-radius: 4px; border: 1px solid #ccc; min-width: 200px; + max-width: 100%; } .page-buttons { display: flex; gap: 10px; + flex-wrap: wrap; + justify-content: center; } .nav-button { @@ -126,16 +130,26 @@ border-radius: 4px; text-decoration: none; color: #333; + border: none; + cursor: pointer; + font-size: 14px; } .nav-button:hover { background: #e0e0e0; } -/* Контент */ -.manga-page { - max-width: 100%; - max-height: 70vh; - display: block; - margin: 0 auto; +/* Адаптивность */ +@media (max-width: 768px) { + .manga-grid { + grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); + } + .manga-preview { + width: 80px; + height: 112px; + } + :root { + --manga-page-width: 95vw; + --manga-page-height: 60vh; + } } \ No newline at end of file