andrei/CineSync
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

поправил страницу отображения фильма

Browse Source
This commit is contained in:
Андрей Дувакин 2024-04-21 23:09:26 +05:00
parent c517ee49aa
commit 0fc5e8b52f
2 changed files with 126 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
CineSync/static/css/films/film_details.css
View File

@ -1,23 +1,23 @@
.film_preview_image {
height: 35vw !important;
width: 20vw !important;
margin-top: 3%;
margin-left: 22%;
width: 10%;
width: 25vw !important;
object-fit: cover;
border-radius: 2vw;
margin-right: 1vw;
}
.description_card {
width: 32%;
height: 35vw !important;
background-color: #eaeaea;
border-radius: 3vw;
float: right;
margin-top: 0;
margin-bottom: 1vw;
margin-right: 22%;
flex-direction: row;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
align-items: start;
justify-content: flex-start;
margin-left: 1vw;
overflow-y: auto;
overflow-x: hidden;
}
.card_text_head {
width: 50%;
@ -28,5 +28,71 @@
margin-left: 7%;
}
.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;
}

84
CineSync/templates/films/film_details.html
View File

@ -2,42 +2,56 @@
{% block title %}{{ item.name }}{% endblock %}
{% load static %}
{% block content %}
<link href="{% static 'css/style.css' %}" rel="stylesheet">
<link href="{% static 'css/films/film_details.css' %}" rel="stylesheet">
<div class="description_card">
<div class="card_text_head">
<h2>{{ item.name }}</h2>
<hr>
</div>
<div class="card_text">
<div class="film_card_footer">
{% for genre in item.genres.all %}
<div class="badge text-bg-secondary genre">{{genre.name}}</div>
{% endfor %}
</div>
<br>
<p><strong><em>Длительность: {{ item.duration }} минута</em></strong></p>
<p><strong><em>Дата выхода: {{ item.release_date }}</em></strong></p>
{{ item.description }}
{% for date, sessions in film_sessions.items %}
<div class="row sessions_list">
{% for film, session in sessions.items %}
<div style="float: top; margin-bottom: 2%">{{ 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">
<div class="session_time">{{ sess.start_datetime|time:"H:i" }}</div>
</a>
</div>
<link href="{% static 'css/style.css' %}" rel="stylesheet">
<link href="{% static 'css/films/film_details.css' %}" rel="stylesheet">
<div class="film_info_block">
<img src="{{ item.image.url }}" class="d-block w-100 film_preview_image"
alt="Фотография фильма не найдена">
<div class="description_card">
<div class="card_text_head">
<h2>{{ item.name }}</h2>
<hr>
<div class="span_info_block">
<span class="age_limit">{{ item.age_limit }}</span>
<div class="countries_block">
{% for country in item.countries.all %}
<div class="countries">
<span>{{ country }}</span>
</div>
{% endfor %}
</div>
</div>
</div>
<div class="card_text">
<div class="film_card_footer">
{% for genre in item.genres.all %}
<div class="badge text-bg-secondary genre">{{genre.name}}</div>
{% endfor %}
</div>
<div class="session_time">{{ session.start_datetime|time:"H:i" }}</div>
</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 %}
</div>
{% endfor %}
</div>
</div>
</div>
<img src="{{ item.image.url }}" class="d-block w-100 film_preview_image"
alt="Фотография фильма не найдена">
</div>
{% endblock %}