correct work curtain

This commit is contained in:
SBD
2024-01-06 14:37:34 +03:00
parent ca44deb077
commit fbcbe93042
8 changed files with 178 additions and 23 deletions

View File

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

View File

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

View File

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

View File

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

View File

@@ -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) {