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

4
templates/manga_page.html
View File

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

8
templates/manga_view.html
View File

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