diff --git a/CineSync/static/css/films/film_details.css b/CineSync/static/css/films/film_details.css index b95f0a2..c0ff304 100644 --- a/CineSync/static/css/films/film_details.css +++ b/CineSync/static/css/films/film_details.css @@ -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; +} \ No newline at end of file diff --git a/CineSync/templates/films/film_details.html b/CineSync/templates/films/film_details.html index 79d4f0a..58d990b 100644 --- a/CineSync/templates/films/film_details.html +++ b/CineSync/templates/films/film_details.html @@ -2,42 +2,56 @@ {% block title %}{{ item.name }}{% endblock %} {% load static %} {% block content %} - - -
-
-

{{ item.name }}

-
-
-
- -
-

Длительность: {{ item.duration }} минута

-

Дата выхода: {{ item.release_date }}

- {{ item.description }} - {% for date, sessions in film_sessions.items %} -
- {% for film, session in sessions.items %} -
{{ date|date:"j M" }}
-
- {% for sess in session %} - + + +
+ Фотография фильма не найдена +
+
+

{{ item.name }}

+
+
+ {{ item.age_limit }} +
+ {% for country in item.countries.all %} +
+ {{ country }} +
+ {% endfor %} +
+
+
+
+ -
{{ session.start_datetime|time:"H:i" }}
+
+
+

Длительность: {{ item.duration }} мин.

+

Дата выхода: {{ item.release_date }}

+ {{ item.description }} +

Ближайшие сеансы

+
+ {% for date, sessions in film_sessions.items %} +
+ {% for film, session in sessions.items %} +
{{ date|date:"j M" }}
+
+ {% for sess in session %} + + {% endfor %} +
+
{{ session.start_datetime|time:"H:i" }}
+ {% endfor %} +
{% endfor %} -
- {% endfor %} -
+
- Фотография фильма не найдена +
{% endblock %} \ No newline at end of file