diff --git a/static/css/mobile_styles.css b/static/css/mobile_styles.css index 1e72ae1..3bf1e22 100644 --- a/static/css/mobile_styles.css +++ b/static/css/mobile_styles.css @@ -420,42 +420,88 @@ .menu_buttons{ background: #FFFFFF; height: 100vh; - z-index: 18; - top: 46px; + z-index: 99; + top: 47px; overflow: auto; } - .menu_buttons.close{ + .menu_buttons.right.close{ + right: -320px; + transition: 200ms; + position: absolute; + width: 320px; + } + + .menu_buttons.left.close{ left: -320px; transition: 200ms; position: absolute; width: 320px; } - .menu_buttons.open{ - left: 0; + .menu_buttons.right.open{ + right: 0; transition: 200ms; - position: absolute; + position: fixed; padding-top: 10px; } - .handler_menu.close{ + + .menu_buttons.left.open{ + left: 0; + transition: 200ms; + position: fixed; + + padding-top: 10px; + } + .handler_menu.left.close{ background: #FF613A; color: #FFFFFF; left: -49px; } - .menu_buttons.open .handler_menu{ + .handler_menu.right.close{ + background: #FF613A; + color: #FFFFFF; + left: -49px; + } + .menu_buttons.left.open .handler_menu{ background: #FFFFFF; color: #000000; left: 272px; } + .menu_buttons.right.open .handler_menu{ + background: #FFFFFF; + color: #000000; + left: -39px; + } .menu_buttons.close .handler_menu{ background: #FF613A; color: #FFFFFF; } - - .handler_menu{ - transform: rotate(90deg); + .menu_buttons.right .handler_menu{ + transform: rotate(270deg); + left: 312px; + width: 91px; + height: 18px; + display: block; + position: fixed; + text-align: center; + top: 39%; + border-radius: 10px 10px 0 0; + padding: 7px 18px 7px 18px; } + .menu_buttons.left .handler_menu{ + transform: rotate(90deg); + width: 91px; + height: 18px; + display: block; + position: fixed; + left: -48px; + text-align: center; + top: 39%; + border-radius: 10px 10px 0 0; + padding: 7px 18px 7px 18px; + } + .btns_f_curtain{ width: 7px; transition: 200ms; @@ -484,17 +530,6 @@ .text_f_curtain{ display: inline-block; } - .handler_menu{ - width: 91px; - height: 18px; - display: block; - position: fixed; - right: -79px; - text-align: center; - top: 39%; - border-radius: 10px 10px 0 0; - padding: 7px 18px 7px 18px; - } .menu_profile{ width: 320px; diff --git a/static/css/styles(boris).css b/static/css/styles(boris).css index 2120a11..d893b31 100644 --- a/static/css/styles(boris).css +++ b/static/css/styles(boris).css @@ -31,7 +31,7 @@ width: 100vw; background: rgba(39, 53, 62, 0.7); backdrop-filter: blur(15px); - z-index: 15; + z-index: 100; position: fixed; top: 46px; } diff --git a/static/js/user_profile.js b/static/js/user_profile.js index 0663c30..76f4314 100644 --- a/static/js/user_profile.js +++ b/static/js/user_profile.js @@ -719,7 +719,7 @@ function editRoute(id) { function showMenu(el, event) { let menu = document.querySelector('.dropdown-content') menu.classList.add('show') - + closeCurtain() } function hideMenu(event) { diff --git a/static/js/user_profile_2.js b/static/js/user_profile_2.js index 6cf9241..deee34d 100644 --- a/static/js/user_profile_2.js +++ b/static/js/user_profile_2.js @@ -54,6 +54,7 @@ function select_tab_profile (el,url,owner_type=null) { middleWareJS() + closeCurtain() }, error: function (data){ @@ -631,45 +632,100 @@ function show_header_list () { let el = document.querySelector(".menu_profile_btn") if (el) { el.classList.toggle("show") + closeCurtain() + } +} + +function closeCurtain () { + let curtain = getOpenCurtain() + if (curtain){ + open_curtain(null,null,null,'close') } } -function open_curtain (left=null,right=null,overlay=null){ - let body = document.querySelector('body') +function open_curtain (left=null,right=null,overlay=null,close=null){ + let curtain_name = '' let curtain = '' - if (overlay){ - overlay.classList.toggle("hidden") - } else { - let overlay = document.querySelector(".block_overlay") - if (overlay){ - overlay.classList.toggle("hidden") - } - } if (left || right){ if (left){ - curtain = document.querySelector(".menu_buttons") + curtain = document.querySelector(".menu_buttons.left") + curtain.style.zIndex = '101' + document.querySelector(".menu_buttons.right").style.zIndex = '99' + curtain_name = curtain.dataset['name'] } else if (right) { - curtain = '' + curtain = document.querySelector(".menu_buttons.right") + curtain.style.zIndex = '101' + document.querySelector(".menu_buttons.left").style.zIndex = '99' + curtain_name = curtain.dataset['name'] } } else { - let curtains = document.querySelectorAll(".curtain") - let i = 0 - curtains.forEach(function (){ - let el = curtains[i] - if (el.classList.contains('open')){ - curtain = el - } - i++ - }) + curtain = getOpenCurtain() + curtain_name = getNameCurtain() } - curtain.classList.toggle("close") - curtain.classList.toggle("open") - if (body.style.overflow === 'hidden'){ - body.style.overflow = '' + let body = document.querySelector('body') + if (close){ + // curtain = getOpenCurtain() + let handler_text = curtain.querySelector('.text_f_curtain') + handler_text.innerHTML = curtain_name + curtain.classList.remove("open") + curtain.classList.add("close") + let overlay = document.querySelector(".block_overlay") + overlay.classList.add('hidden') } else { - body.style.overflow = 'hidden' + if (overlay){ + overlay.classList.toggle("hidden") + } else { + let overlay = document.querySelector(".block_overlay") + if (overlay){ + overlay.classList.toggle("hidden") + } + } + + curtain.classList.toggle("close") + curtain.classList.toggle("open") + let handler_text = curtain.querySelector('.text_f_curtain') + if (curtain.classList.contains('open')){ + handler_text.innerHTML = 'Закрыть' + handler_text.style.fontSize = '13px' + } else { + handler_text.innerHTML = curtain_name + handler_text.style.fontSize = '16px' + } + if (body.style.overflow === 'hidden'){ + body.style.overflow = '' + } else { + body.style.overflow = 'hidden' + } } + } +function getNameCurtain () { + let curtain = getOpenCurtain() + let dataset = curtain.dataset + let name = '' + if (dataset){ + name = dataset['name'] + return name + } +} + +function getOpenCurtain () { + let curtains = document.querySelectorAll(".curtain") + let i = 0 + let curtain = '' + curtains.forEach(function (){ + let el = curtains[i] + if (el.classList.contains('open')){ + curtain = el + } + i++ + }) + if (!curtain){ + curtain = document.querySelector('.curtain') + console.log(`not finded open curtain choice first curtain named=${curtain.dataset['name']}`) + } + return curtain +} \ No newline at end of file diff --git a/templates/blocks/b_header.html b/templates/blocks/b_header.html index 1e2a342..ef16021 100644 --- a/templates/blocks/b_header.html +++ b/templates/blocks/b_header.html @@ -71,10 +71,18 @@ -
{# end #} diff --git a/templates/blocks/b_user_profile.html b/templates/blocks/b_user_profile.html index 3b8ca04..8875d74 100644 --- a/templates/blocks/b_user_profile.html +++ b/templates/blocks/b_user_profile.html @@ -2,7 +2,7 @@ {% load static %}