Добавление списка страниц
This commit is contained in:
Vinejar
48
templates/base_manga.html
Normal file
48
templates/base_manga.html
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
{% load static %}
|
||||||
|
<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_view.css' %}">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="main-container">
|
||||||
|
<!-- Хедер -->
|
||||||
|
<header class="navigation-box">
|
||||||
|
<ul>
|
||||||
|
<li class="breadcrumb">
|
||||||
|
<a href="/manga/111">Каталог</a>
|
||||||
|
<span>-</span>
|
||||||
|
<a href="/manga/111">{{ manga.original_title }}</a>
|
||||||
|
{% block page_title %}{% endblock %}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Основной контент -->
|
||||||
|
<main>
|
||||||
|
{% block content %}{% endblock %}
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Футер -->
|
||||||
|
<footer class="footer-navigation">
|
||||||
|
<div class="dropdown-box">
|
||||||
|
<select id="page-selector" onchange="changePage(this)">
|
||||||
|
{% block page_options %}{% endblock %}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="page-buttons">
|
||||||
|
{% block page_buttons %}{% endblock %}
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function changePage(select) {
|
||||||
|
window.location.href = select.value;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -1,45 +1,33 @@
|
|||||||
<!DOCTYPE html>
|
{% extends 'base_manga.html' %}
|
||||||
<html lang="ru">
|
|
||||||
<head>
|
{% block title %}{{ manga.original_title }} - Страница {{ page_number }}{% endblock %}
|
||||||
{% load static %}
|
|
||||||
<meta charset="UTF-8">
|
{% block page_title %}
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>{{ manga.original_title }} - Страница {{ page_number }}</title>
|
|
||||||
<link rel="stylesheet" type="text/css" href="{% static 'css/manga_view.css' %}">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="main-container">
|
|
||||||
<!-- Навигация -->
|
|
||||||
<div class="navigation-box">
|
|
||||||
<ul>
|
|
||||||
<li class="breadcrumb">
|
|
||||||
<a href="/manga/111">Каталог</a>
|
|
||||||
<span>-</span>
|
|
||||||
<a href="/manga/111">{{ manga.original_title }}</a>
|
|
||||||
<span>-</span>
|
<span>-</span>
|
||||||
<span>Страница {{ page_number }}</span>
|
<span>Страница {{ page_number }}</span>
|
||||||
</li>
|
{% endblock %}
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Изображение и навигация -->
|
{% block content %}
|
||||||
<div class="image-navigation-container">
|
<div class="image-container">
|
||||||
<div class="image-box">
|
<img src="{{ img_url }}" alt="Страница {{ page_number }}" class="manga-page">
|
||||||
<img src="{{ img_url }}" alt="Страница {{ page_number }}">
|
|
||||||
</div>
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
<div class="page-navigation">
|
{% block page_options %}
|
||||||
|
<option value="{% url 'show_manga' manga.id %}">🔍 Превью</option>
|
||||||
|
{% for img in manga.imgs_manga %}
|
||||||
|
<option value="{% url 'show_manga_page' manga.id forloop.counter %}"
|
||||||
|
{% if forloop.counter == page_number %}selected{% endif %}>
|
||||||
|
Страница {{ forloop.counter }}
|
||||||
|
</option>
|
||||||
|
{% endfor %}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block page_buttons %}
|
||||||
{% if page_number > 1 %}
|
{% if page_number > 1 %}
|
||||||
<a href="{% url 'show_manga_page' manga.id page_number|add:'-1' %}" class="nav-button">← Назад</a>
|
<a href="{% url 'show_manga_page' manga.id page_number|add:'-1' %}" class="nav-button">← Назад</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<a href="{% url 'show_manga' manga.id %}" class="nav-button">К превью</a>
|
|
||||||
|
|
||||||
{% if page_number < manga.len_manga %}
|
{% if page_number < manga.len_manga %}
|
||||||
<a href="{% url 'show_manga_page' manga.id page_number|add:'1' %}" class="nav-button">Вперед →</a>
|
<a href="{% url 'show_manga_page' manga.id page_number|add:'1' %}" class="nav-button">Вперед →</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
{% endblock %}
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,26 +1,10 @@
|
|||||||
<!DOCTYPE html>
|
{% extends 'base_manga.html' %}
|
||||||
<html lang="ru">
|
|
||||||
<head>
|
|
||||||
{% load static %}
|
|
||||||
<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/manga_view.css' %}">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="main-container">
|
|
||||||
<!-- Навигация -->
|
|
||||||
<div class="navigation-box">
|
|
||||||
<ul>
|
|
||||||
<li class="breadcrumb">
|
|
||||||
<a href="/manga/111">Каталог</a>
|
|
||||||
<span>-</span>
|
|
||||||
<a href="/manga/111">{{ manga.original_title }}</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Сетка превью -->
|
{% block title %}{{ manga.original_title }} - Превью{% endblock %}
|
||||||
|
|
||||||
|
{% block page_title %}{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
<div class="manga-grid-container">
|
<div class="manga-grid-container">
|
||||||
<div class="manga-grid">
|
<div class="manga-grid">
|
||||||
{% for img in manga.imgs_manga %}
|
{% for img in manga.imgs_manga %}
|
||||||
@@ -32,6 +16,17 @@
|
|||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
{% endblock %}
|
||||||
</body>
|
|
||||||
</html>
|
{% block page_options %}
|
||||||
|
<option value="{% url 'show_manga' manga.id %}">🔍 Превью</option>
|
||||||
|
{% for img in manga.imgs_manga %}
|
||||||
|
<option value="{% url 'show_manga_page' manga.id forloop.counter %}">
|
||||||
|
Страница {{ forloop.counter }}
|
||||||
|
</option>
|
||||||
|
{% endfor %}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block page_buttons %}
|
||||||
|
<!-- Пусто, так как в превью не нужны кнопки навигации -->
|
||||||
|
{% endblock %}
|
||||||
@@ -76,3 +76,66 @@
|
|||||||
.nav-button:hover {
|
.nav-button:hover {
|
||||||
background: #e0e0e0;
|
background: #e0e0e0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Хедер */
|
||||||
|
.navigation-box {
|
||||||
|
padding: 15px 0;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb a, .breadcrumb span {
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Футер */
|
||||||
|
.footer-navigation {
|
||||||
|
margin-top: 30px;
|
||||||
|
padding-top: 20px;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-box select {
|
||||||
|
padding: 8px 15px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
min-width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button {
|
||||||
|
padding: 8px 15px;
|
||||||
|
background: #f0f0f0;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button:hover {
|
||||||
|
background: #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Контент */
|
||||||
|
.manga-page {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 70vh;
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user