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

CineSync/static/css/includes/film_timtable_card.css

@@ -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;
 }

CineSync/static/css/style.css

@@ -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: 1vw 0.8vw;
-    padding-top: 1vw;
-    padding-bottom: 1vw;
     margin: 0.3vw;
     border-radius: 0.5vw;
     text-decoration: none;
@@ -52,12 +58,15 @@
     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;

CineSync/static/css/tickets/my_orders.css

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

CineSync/static/css/timetable/session.css

@@ -1,61 +1,56 @@
 .seats_card {
-    margin-left: 27%;
+    margin: 2vw auto 5vw;
-    margin-right: 27%;
-    margin-top: 2vw;
-    margin-bottom: 5vw;
     background-color: #eaeaea;
     border-radius: 3vw;
     display: flex;
     width: 46%;
-    max-height: 50vw !important ;
+    max-height: 50vw;
-    overflow-x: scroll;
+    overflow: auto;
-    overflow-y: scroll;
     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, .selected:hover {
-}
-.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;
+    height: 20vw;
-    width: 25% !important;
+    width: 25%;
     border-radius: 3vw;
 }
+
 .film_session_image {
     margin-top: 4vw;
-    object-fit: cover;
+    width: 12vw;
-    height: 20vw !important;
-    width: 12vw !important;
-    border-radius: 3vw;
 }
+
 .film_info_block {
-    margin-top: 5vw;
+    margin: 5vw auto 0; 
-    margin-right: 27%;
-    margin-left: 27%;
     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;
+    display: none;
-    width: 7px;
-}
-.seats_card::-webkit-scrollbar-thumb {
-    background-color: #0d1d3a;
-    border-radius: 5vw;
-    border: 1px solid #eaeaea;
 }
+
 .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: 1vw 3.5vw;
-    margin-right: 2vw;
     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;
+}

CineSync/static/js/timetable/session.js

@@ -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');
 

CineSync/templates/tickets/my_orders.html

@@ -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 %}

CineSync/templates/timetable/session.html

@@ -22,8 +22,9 @@
         </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>
+    <div class="seats_card" style="height: {{ height }}vw;">
         {% csrf_token %}
         <hr class="horizontal_line">
         <p class="display_title">Экран</p>
@@ -56,6 +57,7 @@
             {% endfor %}
             </tbody>
         </table>
+    </div>
 </form>
 <script src="{% static 'js/timetable/session.js' %}"></script>
 {% endblock %}