поправил страницу отображения фильма
This commit is contained in:
parent
c517ee49aa
commit
0fc5e8b52f
@ -1,23 +1,23 @@
|
|||||||
.film_preview_image {
|
.film_preview_image {
|
||||||
height: 35vw !important;
|
height: 35vw !important;
|
||||||
width: 20vw !important;
|
width: 25vw !important;
|
||||||
margin-top: 3%;
|
object-fit: cover;
|
||||||
margin-left: 22%;
|
border-radius: 2vw;
|
||||||
width: 10%;
|
margin-right: 1vw;
|
||||||
}
|
}
|
||||||
.description_card {
|
.description_card {
|
||||||
width: 32%;
|
width: 32%;
|
||||||
height: 35vw !important;
|
height: 35vw !important;
|
||||||
background-color: #eaeaea;
|
background-color: #eaeaea;
|
||||||
border-radius: 3vw;
|
border-radius: 3vw;
|
||||||
float: right;
|
display: flex;
|
||||||
margin-top: 0;
|
flex-direction: column;
|
||||||
margin-bottom: 1vw;
|
|
||||||
margin-right: 22%;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
align-items: center;
|
align-items: start;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
margin-left: 1vw;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
.card_text_head {
|
.card_text_head {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
@ -28,5 +28,71 @@
|
|||||||
margin-left: 7%;
|
margin-left: 7%;
|
||||||
}
|
}
|
||||||
.sessions_list {
|
.sessions_list {
|
||||||
margin-top: 5%;
|
margin-bottom: 2vw;
|
||||||
}
|
}
|
||||||
|
.film_info_block {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
margin-top: 5vw;
|
||||||
|
}
|
||||||
|
.description_card::-webkit-scrollbar {
|
||||||
|
width: 7px;
|
||||||
|
}
|
||||||
|
.description_card::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #0d1d3a;
|
||||||
|
border-radius: 5vw;
|
||||||
|
border: 1px solid #eaeaea;
|
||||||
|
}
|
||||||
|
.session_title_block {
|
||||||
|
margin-top: 1vw;
|
||||||
|
}
|
||||||
|
.span_info_block {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
.countries_block {
|
||||||
|
max-width: 15vw;
|
||||||
|
overflow-x: auto;
|
||||||
|
margin-left: 0.8vw;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
flex-direction: row;
|
||||||
|
padding: 0.2vw;
|
||||||
|
border-radius: 0.5vw;
|
||||||
|
}
|
||||||
|
.countries {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 0.1vw;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
.countries span {
|
||||||
|
color: #aaaaaa;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 0.4vw;
|
||||||
|
}
|
||||||
|
.countries_block::-webkit-scrollbar {
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
.countries_block::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #0d1d3a;
|
||||||
|
border-radius: 5vw;
|
||||||
|
border: 2px solid #eaeaea;
|
||||||
|
}
|
||||||
|
.age_limit {
|
||||||
|
padding: 0.1vw;
|
||||||
|
padding-left: 0.25vw;
|
||||||
|
padding-right: 0.25vw;
|
||||||
|
border: 0.15vw solid #aaaaaa;
|
||||||
|
color: #aaaaaa;
|
||||||
|
font-weight: bold;
|
||||||
|
border-radius: 0.5vw;
|
||||||
|
font-size: 0.7vw;
|
||||||
|
}
|
||||||
@ -2,42 +2,56 @@
|
|||||||
{% block title %}{{ item.name }}{% endblock %}
|
{% block title %}{{ item.name }}{% endblock %}
|
||||||
{% load static %}
|
{% load static %}
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<link href="{% static 'css/style.css' %}" rel="stylesheet">
|
<link href="{% static 'css/style.css' %}" rel="stylesheet">
|
||||||
<link href="{% static 'css/films/film_details.css' %}" rel="stylesheet">
|
<link href="{% static 'css/films/film_details.css' %}" rel="stylesheet">
|
||||||
<div class="description_card">
|
<div class="film_info_block">
|
||||||
<div class="card_text_head">
|
<img src="{{ item.image.url }}" class="d-block w-100 film_preview_image"
|
||||||
<h2>{{ item.name }}</h2>
|
alt="Фотография фильма не найдена">
|
||||||
<hr>
|
<div class="description_card">
|
||||||
</div>
|
<div class="card_text_head">
|
||||||
<div class="card_text">
|
<h2>{{ item.name }}</h2>
|
||||||
<div class="film_card_footer">
|
<hr>
|
||||||
{% for genre in item.genres.all %}
|
<div class="span_info_block">
|
||||||
<div class="badge text-bg-secondary genre">{{genre.name}}</div>
|
<span class="age_limit">{{ item.age_limit }}</span>
|
||||||
{% endfor %}
|
<div class="countries_block">
|
||||||
</div>
|
{% for country in item.countries.all %}
|
||||||
<br>
|
<div class="countries">
|
||||||
<p><strong><em>Длительность: {{ item.duration }} минута</em></strong></p>
|
<span>{{ country }}</span>
|
||||||
<p><strong><em>Дата выхода: {{ item.release_date }}</em></strong></p>
|
</div>
|
||||||
{{ item.description }}
|
{% endfor %}
|
||||||
{% for date, sessions in film_sessions.items %}
|
</div>
|
||||||
<div class="row sessions_list">
|
</div>
|
||||||
{% for film, session in sessions.items %}
|
</div>
|
||||||
<div style="float: top; margin-bottom: 2%">{{ date|date:"j M" }}</div>
|
<div class="card_text">
|
||||||
<div class="row time_cards">
|
<div class="film_card_footer">
|
||||||
{% for sess in session %}
|
{% for genre in item.genres.all %}
|
||||||
<div class="film_card_row col-auto">
|
<div class="badge text-bg-secondary genre">{{genre.name}}</div>
|
||||||
<a class="film_session">
|
|
||||||
<div class="session_time">{{ sess.start_datetime|time:"H:i" }}</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
<div class="session_time">{{ session.start_datetime|time:"H:i" }}</div>
|
<br>
|
||||||
|
<p><strong><em>Длительность: {{ item.duration }} мин.</em></strong></p>
|
||||||
|
<p><strong><em>Дата выхода: {{ item.release_date }}</em></strong></p>
|
||||||
|
{{ item.description }}
|
||||||
|
<h2 class="session_title_block">Ближайшие сеансы</h2>
|
||||||
|
<hr>
|
||||||
|
{% for date, sessions in film_sessions.items %}
|
||||||
|
<div class="row sessions_list">
|
||||||
|
{% for film, session in sessions.items %}
|
||||||
|
<div>{{ date|date:"j M" }}</div>
|
||||||
|
<div class="row time_cards">
|
||||||
|
{% for sess in session %}
|
||||||
|
<div class="film_card_row col-auto">
|
||||||
|
<a class="film_session" href="{% url 'time_table:session' sess_id=sess.id %}">
|
||||||
|
<div class="session_time">{{ sess.start_datetime|time:"H:i" }}</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
<div class="session_time">{{ session.start_datetime|time:"H:i" }}</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<img src="{{ item.image.url }}" class="d-block w-100 film_preview_image"
|
</div>
|
||||||
alt="Фотография фильма не найдена">
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
Loading…
x
Reference in New Issue
Block a user