оптимизировал некоторые css
This commit is contained in:
parent
0fc5e8b52f
commit
dbabe3d818
@ -101,5 +101,14 @@
|
||||
.film_title {
|
||||
font-size: 1.5vw;
|
||||
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;
|
||||
}
|
||||
@ -2,11 +2,12 @@
|
||||
background-color: rgba(13, 39, 58, 0.8);
|
||||
border-radius: 2vw;
|
||||
width: 40%;
|
||||
display: flex !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-left: 15%;
|
||||
}
|
||||
|
||||
.header_title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
@ -14,16 +15,20 @@
|
||||
font-weight: bold;
|
||||
margin-bottom: 2vw;
|
||||
}
|
||||
|
||||
.timetable_block {
|
||||
margin-top: 10vw;
|
||||
height: 100vw;
|
||||
}
|
||||
|
||||
.tab_btn {
|
||||
color: #eaeaea !important;
|
||||
}
|
||||
|
||||
.tab_btn.active {
|
||||
color: #0d1d3a !important;
|
||||
}
|
||||
|
||||
.timetable_body.active {
|
||||
margin-top: 1vw;
|
||||
margin-bottom: 10vw;
|
||||
@ -31,20 +36,21 @@
|
||||
padding-bottom: 2vw;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.session_time {
|
||||
font-size: 12px;
|
||||
color: #eaeaea;
|
||||
}
|
||||
|
||||
.genre {
|
||||
margin-right: 0.5vw;
|
||||
}
|
||||
|
||||
.film_session {
|
||||
background-color: rgb(255, 64, 96);
|
||||
color: #eaeaea;
|
||||
font-weight: bold;
|
||||
padding: 0.5vw;
|
||||
padding-top: 1vw;
|
||||
padding-bottom: 1vw;
|
||||
padding: 1vw 0.8vw;
|
||||
margin: 0.3vw;
|
||||
border-radius: 0.5vw;
|
||||
text-decoration: none;
|
||||
@ -52,14 +58,17 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.film_session:hover {
|
||||
background-color: rgb(196, 47, 72);
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-thumb {
|
||||
background-color: #eaeaea;
|
||||
border-radius: 5vw;
|
||||
border: 2px solid #0d1d3a;
|
||||
}
|
||||
}
|
||||
|
||||
3
CineSync/static/css/tickets/my_orders.css
Normal file
3
CineSync/static/css/tickets/my_orders.css
Normal file
@ -0,0 +1,3 @@
|
||||
.header_title {
|
||||
margin-top: 5vw;
|
||||
}
|
||||
@ -1,61 +1,56 @@
|
||||
.seats_card {
|
||||
margin-left: 27%;
|
||||
margin-right: 27%;
|
||||
margin-top: 2vw;
|
||||
margin-bottom: 5vw;
|
||||
margin: 2vw auto 5vw;
|
||||
background-color: #eaeaea;
|
||||
border-radius: 3vw;
|
||||
display: flex;
|
||||
width: 46%;
|
||||
max-height: 50vw !important ;
|
||||
overflow-x: scroll;
|
||||
overflow-y: scroll;
|
||||
max-height: 50vw;
|
||||
overflow: auto;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.table_card {
|
||||
margin: 3vw;
|
||||
margin-top: 1.5vw;
|
||||
}
|
||||
|
||||
.seat_checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.seat_checkbox:checked + .seat_number {
|
||||
color: #eaeaea;
|
||||
}
|
||||
.selected {
|
||||
background-color: #0d1d3a;
|
||||
}
|
||||
.selected:hover {
|
||||
|
||||
.selected, .selected:hover {
|
||||
background-color: #0d1d3a;
|
||||
}
|
||||
|
||||
.seat_number {
|
||||
width: 1vw;
|
||||
height: 1.1vw;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.buy_btn {
|
||||
margin-top: 2vw;
|
||||
margin-left: 2vw;
|
||||
margin-right: 2vw;
|
||||
}
|
||||
.ticket_film_image {
|
||||
|
||||
.ticket_film_image, .film_session_image {
|
||||
object-fit: cover;
|
||||
height: 20vw !important;
|
||||
width: 25% !important;
|
||||
height: 20vw;
|
||||
width: 25%;
|
||||
border-radius: 3vw;
|
||||
}
|
||||
|
||||
.film_session_image {
|
||||
margin-top: 4vw;
|
||||
object-fit: cover;
|
||||
height: 20vw !important;
|
||||
width: 12vw !important;
|
||||
border-radius: 3vw;
|
||||
width: 12vw;
|
||||
}
|
||||
|
||||
.film_info_block {
|
||||
margin-top: 5vw;
|
||||
margin-right: 27%;
|
||||
margin-left: 27%;
|
||||
margin: 5vw auto 0;
|
||||
width: 46%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -64,6 +59,7 @@
|
||||
height: 20vw;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.film_info_text_block {
|
||||
height: 20vw;
|
||||
display: flex;
|
||||
@ -73,51 +69,61 @@
|
||||
align-items: flex-start;
|
||||
margin-left: 1vw;
|
||||
}
|
||||
|
||||
.film_info_text, .film_info_description {
|
||||
color: #eaeaea;
|
||||
}
|
||||
|
||||
.film_info_description {
|
||||
max-height: 9.9vw;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.cell {
|
||||
background-color: transparent !important;
|
||||
background-color: transparent;
|
||||
height: 4vw;
|
||||
min-width: 3.5vw;
|
||||
|
||||
}
|
||||
|
||||
.row_number_cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 3vw;
|
||||
}
|
||||
|
||||
.seats_card::-webkit-scrollbar {
|
||||
height: 7px;
|
||||
width: 7px;
|
||||
}
|
||||
.seats_card::-webkit-scrollbar-thumb {
|
||||
background-color: #0d1d3a;
|
||||
border-radius: 5vw;
|
||||
border: 1px solid #eaeaea;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.film_info_description::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.film_info_description::-webkit-scrollbar-thumb {
|
||||
background-color: #eaeaea;
|
||||
border-radius: 5vw;
|
||||
}
|
||||
|
||||
.horizontal_line {
|
||||
margin-left: 2vw;
|
||||
margin-right: 2vw;
|
||||
margin: 1vw 3.5vw;
|
||||
border-top: 10px solid;
|
||||
}
|
||||
|
||||
.display_title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 1.2vw;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
background-color: #5a5a5a !important;
|
||||
}
|
||||
}
|
||||
|
||||
.seats_form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@ document.querySelectorAll('.seat_checkbox').forEach(function(checkbox) {
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const form = document.querySelector('.seats_card');
|
||||
const form = document.querySelector('.seats_form');
|
||||
const checkboxes = form.querySelectorAll('.seat_checkbox');
|
||||
const buyButton = form.querySelector('.buy_btn');
|
||||
|
||||
|
||||
@ -5,5 +5,10 @@
|
||||
Мои заказы
|
||||
{% endblock %}
|
||||
{% 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 %}
|
||||
@ -22,40 +22,42 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form class="seats_card" method="post" style="height: {{ height }}vw;">
|
||||
<button type="submit" class="btn btn-primary buy_btn">Купить билет</button>
|
||||
{% csrf_token %}
|
||||
<hr class="horizontal_line">
|
||||
<p class="display_title">Экран</p>
|
||||
<table class="table_card">
|
||||
<tbody>
|
||||
{% for row in session.auditorium.rows.all %}
|
||||
<tr>
|
||||
<td class="row_number_cell cell">Ряд {{ forloop.counter }}</td>
|
||||
{% for _ in row.column_count|get_range %}
|
||||
<td class="cell">
|
||||
{% with column_seat_str=forloop.counter|stringformat:"i" row_seat_str=row.row_number|stringformat:"i" %}
|
||||
{% if column_seat_str|add:"-"|add:row_seat_str in occupied_seats %}
|
||||
<label class="film_session disabled">
|
||||
<input type="checkbox" name="selected_seats"
|
||||
value="[{{ forloop.counter }}, {{ row.row_number }}]" class="seat_checkbox"
|
||||
disabled>
|
||||
<span class="seat_number">{{ forloop.counter }}</span>
|
||||
</label>
|
||||
{% else %}
|
||||
<label class="film_session">
|
||||
<input type="checkbox" name="selected_seats"
|
||||
value="[{{ forloop.counter }}, {{ row.row_number }}]" class="seat_checkbox">
|
||||
<span class="seat_number">{{ forloop.counter }}</span>
|
||||
</label>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
</td>
|
||||
<form class="seats_form" method="post">
|
||||
<button type="submit" class="btn btn-primary buy_btn">Оформить заказ</button>
|
||||
<div class="seats_card" style="height: {{ height }}vw;">
|
||||
{% csrf_token %}
|
||||
<hr class="horizontal_line">
|
||||
<p class="display_title">Экран</p>
|
||||
<table class="table_card">
|
||||
<tbody>
|
||||
{% for row in session.auditorium.rows.all %}
|
||||
<tr>
|
||||
<td class="row_number_cell cell">Ряд {{ forloop.counter }}</td>
|
||||
{% for _ in row.column_count|get_range %}
|
||||
<td class="cell">
|
||||
{% with column_seat_str=forloop.counter|stringformat:"i" row_seat_str=row.row_number|stringformat:"i" %}
|
||||
{% if column_seat_str|add:"-"|add:row_seat_str in occupied_seats %}
|
||||
<label class="film_session disabled">
|
||||
<input type="checkbox" name="selected_seats"
|
||||
value="[{{ forloop.counter }}, {{ row.row_number }}]" class="seat_checkbox"
|
||||
disabled>
|
||||
<span class="seat_number">{{ forloop.counter }}</span>
|
||||
</label>
|
||||
{% else %}
|
||||
<label class="film_session">
|
||||
<input type="checkbox" name="selected_seats"
|
||||
value="[{{ forloop.counter }}, {{ row.row_number }}]" class="seat_checkbox">
|
||||
<span class="seat_number">{{ forloop.counter }}</span>
|
||||
</label>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
</td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</form>
|
||||
<script src="{% static 'js/timetable/session.js' %}"></script>
|
||||
{% endblock %}
|
||||
Loading…
x
Reference in New Issue
Block a user