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

оптимизировал некоторые css

Browse Source
This commit is contained in:
Андрей Дувакин 2024-04-22 09:22:12 +05:00
parent 0fc5e8b52f
commit dbabe3d818
7 changed files with 109 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
CineSync/static/css/includes/film_timtable_card.css
View File

@ -101,5 +101,14 @@
.film_title { .film_title {
font-size: 1.5vw; font-size: 1.5vw;
max-width: 40vw; max-width: 40vw;
overflow-y: auto; text-wrap: nowrap;
overflow-x: auto;
}
.film_title::-webkit-scrollbar {
height: 7px;
}
.film_title::-webkit-scrollbar-thumb {
background-color: #0d1d3a;
border-radius: 5vw;
border: 1px solid #eaeaea;
} }

19
CineSync/static/css/style.css
View File

@ -2,11 +2,12 @@
background-color: rgba(13, 39, 58, 0.8); background-color: rgba(13, 39, 58, 0.8);
border-radius: 2vw; border-radius: 2vw;
width: 40%; width: 40%;
display: flex !important; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-left: 15%; margin-left: 15%;
} }
.header_title { .header_title {
width: 100%; width: 100%;
text-align: center; text-align: center;
@ -14,16 +15,20 @@
font-weight: bold; font-weight: bold;
margin-bottom: 2vw; margin-bottom: 2vw;
} }
.timetable_block { .timetable_block {
margin-top: 10vw; margin-top: 10vw;
height: 100vw; height: 100vw;
} }
.tab_btn { .tab_btn {
color: #eaeaea !important; color: #eaeaea !important;
} }
.tab_btn.active { .tab_btn.active {
color: #0d1d3a !important; color: #0d1d3a !important;
} }
.timetable_body.active { .timetable_body.active {
margin-top: 1vw; margin-top: 1vw;
margin-bottom: 10vw; margin-bottom: 10vw;
@ -31,20 +36,21 @@
padding-bottom: 2vw; padding-bottom: 2vw;
flex-direction: column; flex-direction: column;
} }
.session_time { .session_time {
font-size: 12px; font-size: 12px;
color: #eaeaea; color: #eaeaea;
} }
.genre { .genre {
margin-right: 0.5vw; margin-right: 0.5vw;
} }
.film_session { .film_session {
background-color: rgb(255, 64, 96); background-color: rgb(255, 64, 96);
color: #eaeaea; color: #eaeaea;
font-weight: bold; font-weight: bold;
padding: 0.5vw; padding: 1vw 0.8vw;
padding-top: 1vw;
padding-bottom: 1vw;
margin: 0.3vw; margin: 0.3vw;
border-radius: 0.5vw; border-radius: 0.5vw;
text-decoration: none; text-decoration: none;
@ -52,14 +58,17 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.film_session:hover { .film_session:hover {
background-color: rgb(196, 47, 72); background-color: rgb(196, 47, 72);
} }
body::-webkit-scrollbar { body::-webkit-scrollbar {
width: 8px; width: 8px;
} }
body::-webkit-scrollbar-thumb { body::-webkit-scrollbar-thumb {
background-color: #eaeaea; background-color: #eaeaea;
border-radius: 5vw; border-radius: 5vw;
border: 2px solid #0d1d3a; border: 2px solid #0d1d3a;
} }

3
CineSync/static/css/tickets/my_orders.css Normal file
View File

@ -0,0 +1,3 @@
.header_title {
margin-top: 5vw;
}

76
CineSync/static/css/timetable/session.css
View File

@ -1,61 +1,56 @@
.seats_card { .seats_card {
margin-left: 27%; margin: 2vw auto 5vw;
margin-right: 27%;
margin-top: 2vw;
margin-bottom: 5vw;
background-color: #eaeaea; background-color: #eaeaea;
border-radius: 3vw; border-radius: 3vw;
display: flex; display: flex;
width: 46%; width: 46%;
max-height: 50vw !important ; max-height: 50vw;
overflow-x: scroll; overflow: auto;
overflow-y: scroll;
flex-direction: column; flex-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
} }
.table_card { .table_card {
margin: 3vw; margin: 3vw;
margin-top: 1.5vw; margin-top: 1.5vw;
} }
.seat_checkbox { .seat_checkbox {
display: none; display: none;
} }
.seat_checkbox:checked + .seat_number { .seat_checkbox:checked + .seat_number {
color: #eaeaea; color: #eaeaea;
} }
.selected {
background-color: #0d1d3a; .selected, .selected:hover {
}
.selected:hover {
background-color: #0d1d3a; background-color: #0d1d3a;
} }
.seat_number { .seat_number {
width: 1vw; width: 1vw;
height: 1.1vw; height: 1.1vw;
text-align: center; text-align: center;
} }
.buy_btn { .buy_btn {
margin-top: 2vw; margin-top: 2vw;
margin-left: 2vw;
margin-right: 2vw;
} }
.ticket_film_image {
.ticket_film_image, .film_session_image {
object-fit: cover; object-fit: cover;
height: 20vw !important; height: 20vw;
width: 25% !important; width: 25%;
border-radius: 3vw; border-radius: 3vw;
} }
.film_session_image { .film_session_image {
margin-top: 4vw; margin-top: 4vw;
object-fit: cover; width: 12vw;
height: 20vw !important;
width: 12vw !important;
border-radius: 3vw;
} }
.film_info_block { .film_info_block {
margin-top: 5vw; margin: 5vw auto 0;
margin-right: 27%;
margin-left: 27%;
width: 46%; width: 46%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -64,6 +59,7 @@
height: 20vw; height: 20vw;
overflow-y: auto; overflow-y: auto;
} }
.film_info_text_block { .film_info_text_block {
height: 20vw; height: 20vw;
display: flex; display: flex;
@ -73,51 +69,61 @@
align-items: flex-start; align-items: flex-start;
margin-left: 1vw; margin-left: 1vw;
} }
.film_info_text, .film_info_description { .film_info_text, .film_info_description {
color: #eaeaea; color: #eaeaea;
} }
.film_info_description { .film_info_description {
max-height: 9.9vw; max-height: 9.9vw;
overflow-y: auto; overflow-y: auto;
} }
.cell { .cell {
background-color: transparent !important; background-color: transparent;
height: 4vw; height: 4vw;
min-width: 3.5vw; min-width: 3.5vw;
} }
.row_number_cell { .row_number_cell {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 3vw; width: 3vw;
} }
.seats_card::-webkit-scrollbar { .seats_card::-webkit-scrollbar {
height: 7px; display: none;
width: 7px;
}
.seats_card::-webkit-scrollbar-thumb {
background-color: #0d1d3a;
border-radius: 5vw;
border: 1px solid #eaeaea;
} }
.film_info_description::-webkit-scrollbar { .film_info_description::-webkit-scrollbar {
width: 5px; width: 5px;
} }
.film_info_description::-webkit-scrollbar-thumb { .film_info_description::-webkit-scrollbar-thumb {
background-color: #eaeaea; background-color: #eaeaea;
border-radius: 5vw; border-radius: 5vw;
} }
.horizontal_line { .horizontal_line {
margin-left: 2vw; margin: 1vw 3.5vw;
margin-right: 2vw;
border-top: 10px solid; border-top: 10px solid;
} }
.display_title { .display_title {
width: 100%; width: 100%;
text-align: center; text-align: center;
font-size: 1.2vw; font-size: 1.2vw;
} }
.disabled { .disabled {
background-color: #5a5a5a !important; background-color: #5a5a5a !important;
} }
.seats_form {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
}

2
CineSync/static/js/timetable/session.js
View File

@ -10,7 +10,7 @@ document.querySelectorAll('.seat_checkbox').forEach(function(checkbox) {
}); });
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
const form = document.querySelector('.seats_card'); const form = document.querySelector('.seats_form');
const checkboxes = form.querySelectorAll('.seat_checkbox'); const checkboxes = form.querySelectorAll('.seat_checkbox');
const buyButton = form.querySelector('.buy_btn'); const buyButton = form.querySelector('.buy_btn');

5
CineSync/templates/tickets/my_orders.html
View File

@ -5,5 +5,10 @@
Мои заказы Мои заказы
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<link href="{% static 'css/style.css' %}" rel="stylesheet">
<link href="{% static 'css/tickets/my_orders.css' %}" rel="stylesheet">
<h1 class="header_title">Мои заказы</h1>
<div class="my_orders_block">
</div>
{% endblock %} {% endblock %}

68
CineSync/templates/timetable/session.html
View File

@ -22,40 +22,42 @@
</div> </div>
</div> </div>
</div> </div>
<form class="seats_card" method="post" style="height: {{ height }}vw;"> <form class="seats_form" method="post">
<button type="submit" class="btn btn-primary buy_btn">Купить билет</button> <button type="submit" class="btn btn-primary buy_btn">Оформить заказ</button>
{% csrf_token %} <div class="seats_card" style="height: {{ height }}vw;">
<hr class="horizontal_line"> {% csrf_token %}
<p class="display_title">Экран</p> <hr class="horizontal_line">
<table class="table_card"> <p class="display_title">Экран</p>
<tbody> <table class="table_card">
{% for row in session.auditorium.rows.all %} <tbody>
<tr> {% for row in session.auditorium.rows.all %}
<td class="row_number_cell cell">Ряд {{ forloop.counter }}</td> <tr>
{% for _ in row.column_count|get_range %} <td class="row_number_cell cell">Ряд {{ forloop.counter }}</td>
<td class="cell"> {% for _ in row.column_count|get_range %}
{% with column_seat_str=forloop.counter|stringformat:"i" row_seat_str=row.row_number|stringformat:"i" %} <td class="cell">
{% if column_seat_str|add:"-"|add:row_seat_str in occupied_seats %} {% with column_seat_str=forloop.counter|stringformat:"i" row_seat_str=row.row_number|stringformat:"i" %}
<label class="film_session disabled"> {% if column_seat_str|add:"-"|add:row_seat_str in occupied_seats %}
<input type="checkbox" name="selected_seats" <label class="film_session disabled">
value="[{{ forloop.counter }}, {{ row.row_number }}]" class="seat_checkbox" <input type="checkbox" name="selected_seats"
disabled> value="[{{ forloop.counter }}, {{ row.row_number }}]" class="seat_checkbox"
<span class="seat_number">{{ forloop.counter }}</span> disabled>
</label> <span class="seat_number">{{ forloop.counter }}</span>
{% else %} </label>
<label class="film_session"> {% else %}
<input type="checkbox" name="selected_seats" <label class="film_session">
value="[{{ forloop.counter }}, {{ row.row_number }}]" class="seat_checkbox"> <input type="checkbox" name="selected_seats"
<span class="seat_number">{{ forloop.counter }}</span> value="[{{ forloop.counter }}, {{ row.row_number }}]" class="seat_checkbox">
</label> <span class="seat_number">{{ forloop.counter }}</span>
{% endif %} </label>
{% endwith %} {% endif %}
</td> {% endwith %}
</td>
{% endfor %}
</tr>
{% endfor %} {% endfor %}
</tr> </tbody>
{% endfor %} </table>
</tbody> </div>
</table>
</form> </form>
<script src="{% static 'js/timetable/session.js' %}"></script> <script src="{% static 'js/timetable/session.js' %}"></script>
{% endblock %} {% endblock %}