correct work curtain

static/css/mobile_styles.css

@@ -116,8 +116,76 @@
 }
 @media (max-width: 1180px){
 
+    .handler_curtain_left{
+        display: block;
+    }
+    .handler_curtain_left.close{
+        left: 0;
+        top: 293px;
+        position: fixed;
+        height: 127px;
+        width: 32px;
+        background: #FF613A;
+        border-radius: 0 10px 10px 0;
+        z-index: 101;
+        transition: 200ms;
+    }
 
+    .container_content_handler_curtain_left{
+        display: flex;
+        rotate: 90deg;
+        justify-content: space-between;
+        height: 32px;
+        width: 87px;
+        position: relative;
+        left: -49px;
+        top: 47px;
+        padding: 0 20px;
+    }
 
+    .handler_curtain_left.open{
+        left: 320px;
+        top: 293px;
+        position: fixed;
+        height: 127px;
+        width: 32px;
+        background: #FFFFFF;
+        border-radius: 0 10px 10px 0;
+        z-index: 101;
+        transition: 200ms;
+    }
+
+    .handler_curtain_left.open .container_content_handler_curtain_left{
+        rotate: 270deg;
+    }
+
+    .filter_img{
+        width: 15px;
+        display: block;
+        position: relative;
+        bottom: 0;
+        transform: rotate(270deg) translate(0, 0);
+        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(296deg) brightness(106%) contrast(101%);
+        /*transition: 200ms;*/
+    }
+
+    .handler_curtain_left.open .filter_img{
+        transform: translate(0, 0);
+        filter: brightness(0) saturate(100%) invert(53%) sepia(48%) saturate(4340%) hue-rotate(337deg) brightness(102%) contrast(102%);
+        /*transition: 200ms;*/
+    }
+
+    .arrows_handler_curtain_left{
+        width: 7px;
+        rotate: -90deg;
+        filter: unset;
+        /*transition: 200ms;*/
+    }
+
+    .handler_curtain_left.open .arrows_handler_curtain_left{
+        filter: brightness(0) saturate(100%) invert(53%) sepia(48%) saturate(4340%) hue-rotate(337deg) brightness(102%) contrast(102%);
+        transition: 200ms;
+    }
     .wrapper_name_art{
         font-size: 29px;
         line-height: 33px;
@@ -656,7 +724,7 @@
         top: 0;
     }
     .cut_width_f_curtain.n_profile.left{
-        position: fixed;
+        position: sticky;
         /*min-width: 1280px;*/
     }
 

static/css/styles(boris).css

@@ -58,6 +58,8 @@
     width: 100%;
     /*background: rgba(39, 53, 62, 0.7);*/
     backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
+    -moz-backdrop-filter: blur(6px);
     z-index: 100;
     position: fixed;
     top: 0;
@@ -2668,7 +2670,7 @@
 
 .menu_buttons.left.open.first.filters .text_f_curtain > img{
     transition: 200ms;
-    transform: rotate(270deg);
+    transform: rotate(270deg) translate(0, 0);
     filter: brightness(0) saturate(100%) invert(100%) sepia(2%) saturate(0%) hue-rotate(162deg) brightness(104%) contrast(103%);
     position: relative;
 }
@@ -2903,3 +2905,9 @@
 .title_b_first_page{
     margin-top: 70px;
 }
+
+/* handler_curtain changed*/
+
+.handler_curtain_left{
+    display: none;
+}

static/css/styles.css

@@ -223,6 +223,7 @@ body {
     margin: 0;
     padding: 0;
     background:  #F8F8F8;
+    mix-blend-mode: multiply;
 }
 
 header {

static/js/global_js.js

@@ -73,6 +73,7 @@ function openOverlayOrClose () {
         if (screen.width < 700){
             if (!overlay.classList.contains("show")){
                 overlay.classList.add("show")
+                overlay.classList.remove("hidden")
             }
         }
     }

static/js/user_profile_2.js

@@ -534,9 +534,13 @@ function selectedUserMessenger (ticket_id=null,user_id=null,el){
             document.querySelector(".enter-message-inp").focus()
 
             // document.querySelector(".tab_user_messanger.select").scrollIntoView({behavior: "smooth",block:'center',inline: 'start'});
-            let top = document.querySelector(".tab_user_messanger.select").offsetTop
-            document.querySelector(".menu_buttons.curtain.left.open").scrollTo({top:top})
 
+            if (document.querySelector(".menu_buttons.curtain.left.open")){
+                let top = document.querySelector(".tab_user_messanger.select").offsetTop
+                document.querySelector(".menu_buttons.curtain.left.open").scrollTo({top:top})
+            }
+            // document.querySelector(".handler_curtain_left").classList.toggle("open")
+            // document.querySelector(".handler_curtain_left").classList.toggle("close")
             // if (getInfoAboutUser() === 'mobile' || getInfoAboutUser() === 'laptop'){
             //     window.scrollTo({
             //       top: 0,
@@ -738,6 +742,7 @@ function open_curtain_w_btn_profile () {
         last_open_curtain = curtain
         set_curtain_z_index(curtain)
         close_first_curt(curtain)
+        checkStateCurtain(curtain)
         // delete_margin_in_mobile()
     } else if (!window.location.href.includes("profile")){
         curtain.classList.toggle("open")
@@ -749,15 +754,38 @@ function open_curtain_w_btn_profile () {
         last_open_curtain = curtain
         set_curtain_z_index(curtain)
         close_first_curt(curtain)
+
         // delete_margin_in_mobile()
     }
 }
 
+function checkStateCurtain (curtain) {
+    if (curtain.classList.contains("open")){
+        if (!document.querySelector(".block_overlay.show")){
+            document.querySelector(".block_overlay").classList.add("show")
+            document.querySelector(".block_overlay").classList.remove("hidden")
+        }
+        if (!curtain.parentNode.classList.contains("open")) {
+            curtain.parentNode.classList.add("open")
+            curtain.parentNode.classList.remove("close")
+        }
+    }
+}
+
 function open_curtain_w_contacts () {
     let curtain = document.querySelector('.menu_buttons.left')
+    let btn_handler_left_curtain = document.querySelector(".handler_curtain_left")
     let user_type = getInfoAboutUser()
-    if (user_type === 'mobile' || user_type === 'laptop' && window.location.href.includes("profile")) {
+    if (user_type === 'mobile' && window.location.href.includes("profile") || user_type === 'laptop' && window.location.href.includes("profile")) {
         open_overlay(curtain)
+        if (!curtain.parentNode.classList.contains('open') && !curtain.parentNode.classList.contains('close')){
+            curtain.parentNode.classList.add("open")
+        } else if (curtain.parentNode.classList.contains('open') || curtain.parentNode.classList.contains('close')) {
+            curtain.parentNode.classList.toggle("open")
+            curtain.parentNode.classList.toggle("close")
+        }
+        btn_handler_left_curtain.classList.toggle("open")
+        btn_handler_left_curtain.classList.toggle("close")
         curtain.classList.toggle('open')
         curtain.classList.toggle('close')
         if (curtain.classList.contains('first')) {
@@ -771,6 +799,14 @@ function open_curtain_w_contacts () {
         close_first_curt(curtain)
         // delete_margin_in_mobile()
     } else if (!window.location.href.includes("profile")){
+        if (!curtain.parentNode.classList.contains('open') && !curtain.parentNode.classList.contains('close')){
+            curtain.parentNode.classList.add("open")
+        } else if (curtain.parentNode.classList.contains('open') || curtain.parentNode.classList.contains('close')) {
+            curtain.parentNode.classList.toggle("open")
+            curtain.parentNode.classList.toggle("close")
+        }
+        btn_handler_left_curtain.classList.toggle("open")
+        btn_handler_left_curtain.classList.toggle("close")
         open_overlay(curtain)
         curtain.classList.toggle('open')
         curtain.classList.toggle('close')
@@ -783,6 +819,7 @@ function open_curtain_w_contacts () {
         set_curtain_z_index(curtain)
         last_open_curtain = curtain
         close_first_curt(curtain)
+        checkStateCurtain(curtain)
         // delete_margin_in_mobile()
     }
 }
@@ -837,6 +874,10 @@ function close_first_curt (curtain) {
                 if (cur_el !== curtain){
                     cur_el.classList.toggle('open')
                     cur_el.classList.toggle('close')
+                    if (cur_el.classList.contains('left')){
+                        document.querySelector(".handler_curtain_left").classList.toggle("open")
+                        document.querySelector(".handler_curtain_left").classList.toggle("close")
+                    }
                     if (window.location.href.includes("route_search_results")){
                         scroll_ev(event,window)
                     }
@@ -854,9 +895,17 @@ function set_curtain_z_index (curtain) {
     curtains.forEach(function (){
         let cur_el = curtains[i]
         if (cur_el === curtain){
+            if (!cur_el.querySelector(".handler_menu") && cur_el.classList.contains("left")){
+                let switcher = document.querySelector(".handler_curtain_left")
+                switcher.style.zIndex = 101
+            }
             cur_el.style.zIndex = 101
             cur_el.parentNode.style.zIndex = 101
         } else {
+            if (!cur_el.querySelector(".handler_menu") && cur_el.classList.contains("left")){
+                let switcher = document.querySelector(".handler_curtain_left")
+                switcher.style.zIndex = 99
+            }
             cur_el.style.zIndex = 99
             cur_el.parentNode.style.zIndex = 99
         }
@@ -867,6 +916,13 @@ function set_curtain_z_index (curtain) {
 
 function close_open_curtain () {
     if (getInfoAboutUser() === 'mobile' || getInfoAboutUser() === 'laptop' || !window.location.href.includes("profile")){
+        let btn_handler_left_curtain = document.querySelector(".handler_curtain_left")
+        if (last_open_curtain){
+            if (last_open_curtain.classList.contains("left")) {
+                btn_handler_left_curtain.classList.toggle("open")
+                btn_handler_left_curtain.classList.toggle("close")
+            }
+        }
         let curtains = document.querySelectorAll('.curtain.open')
         if (curtains.length >= 2) {
             if (last_open_curtain) {

templates/blocks/profile/b_chats.html

@@ -7,11 +7,18 @@
     <div class="container_block_list_of_users">
         {% include 'blocks/profile/b_list_of_users_messenger.html' %}
     </div>
-    <div class="handler_menu close" onclick="open_curtain_w_contacts()">
+{#    <div class="handler_menu close" onclick="open_curtain_w_contacts()">#}
-        <img class="btns_f_curtain close left" src="{% static 'img/svg/arrow_f_curtain.svg' %}">
+{#        <img class="btns_f_curtain close left" src="{% static 'img/svg/arrow_f_curtain.svg' %}">#}
-        <div class="text_f_curtain left"><img style='width: 25px;display: block;position: relative;bottom: 0;transform: rotate(270deg);' src='{% static "/img/svg/users-solid.svg" %}'></div>
+{#        <div class="text_f_curtain left"><img style='width: 25px;display: block;position: relative;bottom: 0;transform: rotate(270deg);' src='{% static "/img/svg/users-solid.svg" %}'></div>#}
-        <img class="btns_f_curtain close right"  src="{% static 'img/svg/arrow_f_curtain.svg' %}">
+{#        <img class="btns_f_curtain close right"  src="{% static 'img/svg/arrow_f_curtain.svg' %}">#}
-        <div class="clear_both"></div>
+{#        <div class="clear_both"></div>#}
+{#    </div>#}
+</div>
+<div class="handler_curtain_left {% if not cur_receiver %}open{% else %}close{% endif %}" onclick="open_curtain_w_contacts()">
+    <div class="container_content_handler_curtain_left">
+        <img class="arrows_handler_curtain_left" src="{% static 'img/svg/arrow_f_curtain.svg' %}">
+        <img class="filter_img" src='{% static "/img/svg/users-solid.svg" %}'>
+        <img class="arrows_handler_curtain_left" src="{% static 'img/svg/arrow_f_curtain.svg' %}">
     </div>
 </div>
 {#<div class="title-profile-cont">#}

templates/blocks/profile/b_support_chat.html

@@ -17,11 +17,18 @@
             <div class="container_block_list_of_users">
                 {% include 'blocks/profile/b_list_of_tickets_support_chat.html' %}
             </div>
-            <div class="handler_menu close" onclick="open_curtain_w_contacts()">
+{#            <div class="handler_menu close" onclick="open_curtain_w_contacts()">#}
-                <img class="btns_f_curtain close left" src="{% static 'img/svg/arrow_f_curtain.svg' %}">
+{#                <img class="btns_f_curtain close left" src="{% static 'img/svg/arrow_f_curtain.svg' %}">#}
-                <div class="text_f_curtain left"><img style='width: 25px;display: block;position: relative;bottom: 0;transform: rotate(270deg);' src='{% static "/img/svg/users-solid.svg" %}'></div>
+{#                <div class="text_f_curtain left"><img style='width: 25px;display: block;position: relative;bottom: 0;transform: rotate(270deg);' src='{% static "/img/svg/users-solid.svg" %}'></div>#}
-                <img class="btns_f_curtain close right"  src="{% static 'img/svg/arrow_f_curtain.svg' %}">
+{#                <img class="btns_f_curtain close right"  src="{% static 'img/svg/arrow_f_curtain.svg' %}">#}
-                <div class="clear_both"></div>
+{#                <div class="clear_both"></div>#}
+{#            </div>#}
+        </div>
+        <div class="handler_curtain_left {% if mobile %}{% if not ticket %}open{% else %}close{% endif %}{% else %}open{% endif %}{% if name.ticket %}margin{% endif %}" onclick="open_curtain_w_contacts()">
+            <div class="container_content_handler_curtain_left">
+                <img class="arrows_handler_curtain_left" src="{% static 'img/svg/arrow_f_curtain.svg' %}">
+                <img class="filter_img" src='{% static "/img/svg/users-solid.svg" %}'>
+                <img class="arrows_handler_curtain_left" src="{% static 'img/svg/arrow_f_curtain.svg' %}">
             </div>
         </div>
     {% endif %}

templates/tb_base.html

@@ -6,7 +6,7 @@
 <head>
     <meta charset="UTF-8">
 {#    <meta name="viewport" content="width=100%,maximum-scale=5,minimum-scale=1,initial-scale=1">#}
-    <meta name="viewport" content="width=100%,maximum-scale=1,minimum-scale=1,initial-scale=1">
+    <meta name="viewport" content="width=device-width,maximum-scale=1,minimum-scale=1,initial-scale=1">
 
     {% include "inter/meta_names.html" %}
 {#    <script src='{% static "js/jquery_v3_6_4.js" %}'> </script>#}
@@ -83,16 +83,23 @@
                     </div>
                 </div>
             {% if page_type == 'routes' %}
-                <div class="cut_width_f_curtain{% if page_type == 'profile' %}{% else %} n_profile{% endif %} left ">
+                <div class="cut_width_f_curtain{% if page_type == 'profile' %}{% else %} n_profile{% endif %} left">
                     <div class="menu_buttons curtain left open first filters" data-name="<img style='width: 15px;display: block;position: relative;bottom: 0;transform: rotate(270deg);' src='{% static "/img/svg/filter.svg" %}'>">
 
                         {% include "forms/f_find_route_filters_form.html" %}
-                        <div class="handler_menu close" onclick="open_curtain_w_contacts()">
+{#                        <div class="handler_menu close" onclick="open_curtain_w_contacts()">#}
-                            <img class="btns_f_curtain close left" src="{% static 'img/svg/arrow_f_curtain.svg' %}">
+{#                            <img class="btns_f_curtain close left" src="{% static 'img/svg/arrow_f_curtain.svg' %}">#}
-                            <div class="text_f_curtain left"><img style='width: 15px;display: block;position: relative;bottom: 0;transform: rotate(270deg);' src='{% static "/img/svg/filter.svg" %}'></div>
+{#                            <div class="text_f_curtain left"><img style='width: 15px;display: block;position: relative;bottom: 0;transform: rotate(270deg);' src='{% static "/img/svg/filter.svg" %}'></div>#}
-                            <img class="btns_f_curtain close right"  src="{% static 'img/svg/arrow_f_curtain.svg' %}">
+{#                            <img class="btns_f_curtain close right"  src="{% static 'img/svg/arrow_f_curtain.svg' %}">#}
-                            <div class="clear_both"></div>
+{#                            <div class="clear_both"></div>#}
-                        </div>
+{#                        </div>#}
+                    </div>
+                </div>
+                <div class="handler_curtain_left close" onclick="open_curtain_w_contacts()">
+                    <div class="container_content_handler_curtain_left">
+                        <img class="arrows_handler_curtain_left" src="{% static 'img/svg/arrow_f_curtain.svg' %}">
+                        <img class="filter_img" src='{% static "/img/svg/filter.svg" %}'>
+                        <img class="arrows_handler_curtain_left" src="{% static 'img/svg/arrow_f_curtain.svg' %}">
                     </div>
                 </div>
             {% endif %}