Zein/hentai_manga_site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Адаптивный футтер\хедер, увеличили размер пикч через root

Browse Source
This commit is contained in:
Vinejar
2025-03-30 05:55:37 +03:00
parent 13b00579c2
commit c0a5ff6b90
4 changed files with 105 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
templates/base_manga.html
View File

@@ -6,6 +6,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{{ manga.original_title }}{% endblock %}</title> <title>{% block title %}{{ manga.original_title }}{% endblock %}</title>
<link rel="stylesheet" href="{% static 'css/manga_view.css' %}"> <link rel="stylesheet" href="{% static 'css/manga_view.css' %}">
<!-- Меняем размер пикч -->
<style>
:root {
--manga-page-height: 120vh;
}
</style>
</head> </head>
<body> <body>
<div class="main-container"> <div class="main-container">
@@ -22,7 +28,7 @@
</header> </header>
<!-- Основной контент --> <!-- Основной контент -->
<main> <main class="content-area">
{% block content %}{% endblock %} {% block content %}{% endblock %}
</main> </main>

4
templates/manga_page.html
View File

@@ -8,8 +8,8 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="image-container"> <div class="image-scaling-container">
<img src="{{ img_url }}" alt="Страница {{ page_number }}" class="manga-page"> <img src="{{ img_url }}" alt="Страница {{ page_number }}" class="scalable-image">
</div> </div>
{% endblock %} {% endblock %}

8
templates/manga_view.html
View File

@@ -2,10 +2,8 @@
{% block title %}{{ manga.original_title }} - Превью{% endblock %} {% block title %}{{ manga.original_title }} - Превью{% endblock %}
{% block page_title %}{% endblock %}
{% block content %} {% block content %}
<div class="manga-grid-container"> <div class="grid-container">
<div class="manga-grid"> <div class="manga-grid">
{% for img in manga.imgs_manga %} {% for img in manga.imgs_manga %}
<div class="manga-preview"> <div class="manga-preview">
@@ -25,8 +23,4 @@
Страница {{ forloop.counter }} Страница {{ forloop.counter }}
</option> </option>
{% endfor %} {% endfor %}
{% endblock %}
{% block page_buttons %}
<!-- Пусто, так как в превью не нужны кнопки навигации -->
{% endblock %} {% endblock %}

176
templates/static/css/manga_view.css
View File

@@ -1,86 +1,26 @@
/* Основные стили */ /* Базовые стили */
body {
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
background: #f8f9fa;
}
.main-container { .main-container {
max-width: 900px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 20px;
} flex: 1;
/* Навигационная цепочка */
.breadcrumb {
display: flex; display: flex;
align-items: center; flex-direction: column;
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 {
width: 100%; 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 { .navigation-box {
padding: 15px 0; padding: 15px 0;
border-bottom: 1px solid #eee;
margin-bottom: 20px; margin-bottom: 20px;
} }
@@ -91,21 +31,82 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 16px; font-size: 16px;
flex-wrap: wrap;
} }
.breadcrumb a, .breadcrumb span { .breadcrumb a, .breadcrumb span {
margin: 0 5px; 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 { .footer-navigation {
margin-top: 30px; margin-top: auto;
padding-top: 20px; padding: 20px 0;
border-top: 1px solid #eee; border-top: 1px solid #eee;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 15px; gap: 15px;
width: 100%;
} }
.dropdown-box select { .dropdown-box select {
@@ -113,11 +114,14 @@
border-radius: 4px; border-radius: 4px;
border: 1px solid #ccc; border: 1px solid #ccc;
min-width: 200px; min-width: 200px;
max-width: 100%;
} }
.page-buttons { .page-buttons {
display: flex; display: flex;
gap: 10px; gap: 10px;
flex-wrap: wrap;
justify-content: center;
} }
.nav-button { .nav-button {
@@ -126,16 +130,26 @@
border-radius: 4px; border-radius: 4px;
text-decoration: none; text-decoration: none;
color: #333; color: #333;
border: none;
cursor: pointer;
font-size: 14px;
} }
.nav-button:hover { .nav-button:hover {
background: #e0e0e0; background: #e0e0e0;
} }
/* Контент */ /* Адаптивность */
.manga-page { @media (max-width: 768px) {
max-width: 100%; .manga-grid {
max-height: 70vh; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
display: block; }
margin: 0 auto; .manga-preview {
width: 80px;
height: 112px;
}
:root {
--manga-page-width: 95vw;
--manga-page-height: 60vh;
}
} }