diff --git a/static/css/mobile_styles.css b/static/css/mobile_styles.css index 3ef416c..272a04d 100644 --- a/static/css/mobile_styles.css +++ b/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;*/ } diff --git a/static/css/styles(boris).css b/static/css/styles(boris).css index d69acb9..69f3aab 100644 --- a/static/css/styles(boris).css +++ b/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; } @@ -2902,4 +2904,10 @@ .title_b_first_page{ margin-top: 70px; +} + +/* handler_curtain changed*/ + +.handler_curtain_left{ + display: none; } \ No newline at end of file diff --git a/static/css/styles.css b/static/css/styles.css index 51371d1..9ae570b 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -223,6 +223,7 @@ body { margin: 0; padding: 0; background: #F8F8F8; + mix-blend-mode: multiply; } header { diff --git a/static/js/global_js.js b/static/js/global_js.js index 680a784..e295c4c 100644 --- a/static/js/global_js.js +++ b/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") } } } diff --git a/static/js/user_profile_2.js b/static/js/user_profile_2.js index fd38372..f56cf87 100644 --- a/static/js/user_profile_2.js +++ b/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) { diff --git a/templates/blocks/profile/b_chats.html b/templates/blocks/profile/b_chats.html index c06f517..3410f36 100644 --- a/templates/blocks/profile/b_chats.html +++ b/templates/blocks/profile/b_chats.html @@ -7,11 +7,18 @@