From 4ca248c02d25be4a918a2ffb64c8517a7822c329 Mon Sep 17 00:00:00 2001 From: Ivan Kaziev Date: Sat, 20 Apr 2024 16:38:32 +0300 Subject: [PATCH 1/2] Create film page --- CineSync/films/views.py | 24 +++++++++++- CineSync/static/css/films/film_details.css | 32 ++++++++++++++++ CineSync/templates/films/film_details.html | 44 +++++++++++++++++++++- CineSync/timetable/models.py | 2 +- 4 files changed, 99 insertions(+), 3 deletions(-) create mode 100644 CineSync/static/css/films/film_details.css diff --git a/CineSync/films/views.py b/CineSync/films/views.py index c3346af..6ea51e2 100644 --- a/CineSync/films/views.py +++ b/CineSync/films/views.py @@ -2,6 +2,7 @@ from django.http import HttpResponse from django.shortcuts import render, get_object_or_404 from films.models import Film +from timetable.models import FilmSession def films_list(request: HttpResponse) -> HttpResponse: @@ -18,9 +19,30 @@ def film_details(request: HttpResponse, film_id: int) -> HttpResponse: Film.objects.released(), id=film_id, ) + film_sessions = FilmSession.objects.nearest_timetable().filter(film_id=film_id) + sessions_by_date_and_film = {} + + for session in film_sessions: + session_date = session.start_datetime.date() + if session_date not in sessions_by_date_and_film: + sessions_by_date_and_film[session_date] = {} + film_sessions_for_date = sessions_by_date_and_film[session_date] + if session.film not in film_sessions_for_date: + film_sessions_for_date[session.film] = [] + film_sessions_for_date[session.film].append(session) + + for session_date, session_films in sessions_by_date_and_film.items(): + for session_film in session_films: + sessions_by_date_and_film[session_date][session_film].sort( + key=lambda sorted_session: sorted_session.start_datetime, + ) + context = { + 'film_sessions': sessions_by_date_and_film, + 'item': item, + } return render( request, 'films/film_details.html', - {'item': item}, + context, ) diff --git a/CineSync/static/css/films/film_details.css b/CineSync/static/css/films/film_details.css new file mode 100644 index 0000000..b95f0a2 --- /dev/null +++ b/CineSync/static/css/films/film_details.css @@ -0,0 +1,32 @@ +.film_preview_image { + height: 35vw !important; + width: 20vw !important; + margin-top: 3%; + margin-left: 22%; + width: 10%; +} +.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; + flex-wrap: nowrap; + align-items: center; + justify-content: flex-start; +} +.card_text_head { + width: 50%; + margin-left: 7%; + margin-top: 7%; +} +.card_text { + margin-left: 7%; +} +.sessions_list { + margin-top: 5%; +} diff --git a/CineSync/templates/films/film_details.html b/CineSync/templates/films/film_details.html index 63913c1..79d4f0a 100644 --- a/CineSync/templates/films/film_details.html +++ b/CineSync/templates/films/film_details.html @@ -1 +1,43 @@ -{% extends "base.html" %} \ No newline at end of file +{% extends "base.html" %} +{% 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 %} + + {% endfor %} +
+
{{ session.start_datetime|time:"H:i" }}
+ {% endfor %} +
+ {% endfor %} +
+
+ Фотография фильма не найдена +{% endblock %} \ No newline at end of file diff --git a/CineSync/timetable/models.py b/CineSync/timetable/models.py index 6e76995..dacd4bd 100644 --- a/CineSync/timetable/models.py +++ b/CineSync/timetable/models.py @@ -92,7 +92,7 @@ class FilmSession(Model): ) end_datetime = DateTimeField( - verbose_name='Дата и время начала сеанса', + verbose_name='Дата и время окончания сеанса', blank=True, null=True, ) From 4dfd1d2b0589858612586f809af37cfebe7fc16b Mon Sep 17 00:00:00 2001 From: Ivan Kaziev Date: Sat, 20 Apr 2024 16:50:38 +0300 Subject: [PATCH 2/2] Create film page --- CineSync/static/css/home/homepage.css | 6 --- CineSync/static/css/style.css | 66 +++++++++++++++++++++++++++ 2 files changed, 66 insertions(+), 6 deletions(-) diff --git a/CineSync/static/css/home/homepage.css b/CineSync/static/css/home/homepage.css index 38e3870..ec9db28 100644 --- a/CineSync/static/css/home/homepage.css +++ b/CineSync/static/css/home/homepage.css @@ -11,10 +11,4 @@ } .carousel_title { margin-top: 3vw; -} -.film_preview_image { - object-fit: cover; - height: 35vw !important; - width: 25vw !important; - border-radius: 3vw; } \ No newline at end of file diff --git a/CineSync/static/css/style.css b/CineSync/static/css/style.css index 2d4d91d..4102d8b 100644 --- a/CineSync/static/css/style.css +++ b/CineSync/static/css/style.css @@ -1,3 +1,45 @@ +.film_preview_image { + object-fit: cover; + height: 35vw !important; + width: 25vw !important; + border-radius: 3vw; +} +.film_session_image { + margin-top: 40px; + object-fit: cover; + height: 20vw !important; + width: 50% !important; + border-radius: 3vw; +} +.line { + width: 30%; + height: 5px; + background-color: black; + position: absolute; + top: 70%; + border-radius: 3vw; + margin-left: 5%; + margin-top: 150px; +} +h6 { + text-align: center; + margin-top: 4px; +} +.seat_number { + width: 20px; + height: 18px; + text-align: center; +} +.buy_btn { + float: bottom; + margin-top: 40px; +} +.ticket_film_image { + object-fit: cover; + height: 20vw !important; + width: 25% !important; + border-radius: 3vw; +} .caption_block { background-color: rgba(13, 39, 58, 0.8); border-radius: 2vw; @@ -31,6 +73,30 @@ padding-bottom: 2vw; flex-direction: column; } +.seats_card { + width: 100%; + background-color: #eaeaea; + margin-top: 1vw; + margin-bottom: 1vw; + border-radius: 3vw; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + justify-content: flex-start; + + width: 50%; + margin: 0 auto; + margin-top: 20px; +} +.card_body { + width: 80%; + margin-top: 180px; + margin: 0 auto; +} +.rows { + margin-top: 30%; +} .film_card { width: 100%; background-color: #eaeaea;