diff --git a/static/css/mobile_styles.css b/static/css/mobile_styles.css index 58f6f64..5351bc3 100644 --- a/static/css/mobile_styles.css +++ b/static/css/mobile_styles.css @@ -398,26 +398,34 @@ } .menu_buttons{ background: #FFFFFF; + height: 100vh; + z-index: 18; + top: 46px; + overflow: auto; } .menu_buttons.close{ left: -320px; transition: 200ms; position: absolute; - width: 352px; + width: 320px; } .menu_buttons.open{ left: 0; transition: 200ms; position: absolute; + + padding-top: 10px; } .handler_menu.close{ background: #FF613A; color: #FFFFFF; + left: -49px; } .menu_buttons.open .handler_menu{ background: #FFFFFF; color: #000000; + left: 272px; } .menu_buttons.close .handler_menu{ background: #FF613A; @@ -428,9 +436,10 @@ transform: rotate(90deg); } .btns_f_curtain{ - width: 11px; + width: 7px; transition: 200ms; display: block; + } .btns_f_curtain.left{ float: left; @@ -440,31 +449,35 @@ } .menu_buttons.close .btns_f_curtain{ transition: 200ms; - transform: rotate(90deg); + transform: rotate(270deg); filter: brightness(0) saturate(100%) invert(100%) sepia(2%) saturate(0%) hue-rotate(162deg) brightness(104%) contrast(103%); + padding-right: 10px; } .menu_buttons.open .btns_f_curtain{ transition: 200ms; - transform: rotate(270deg); + transform: rotate(90deg); filter: brightness(0) saturate(100%) invert(0%) sepia(100%) saturate(21%) hue-rotate(344deg) brightness(105%) contrast(106%); + padding-left: 10px; } .text_f_curtain{ display: inline-block; } .handler_menu{ - width: 127px; - height: 32px; + width: 91px; + height: 18px; display: block; - position: absolute; - right: -47px; + position: fixed; + right: -79px; text-align: center; - top: 50%; + top: 39%; border-radius: 10px 10px 0 0; + padding: 7px 18px 7px 18px; } .menu_profile{ width: 320px; + text-align: -webkit-center; } .menu_profile>div{ diff --git a/static/css/styles(boris).css b/static/css/styles(boris).css index 94c56eb..2120a11 100644 --- a/static/css/styles(boris).css +++ b/static/css/styles(boris).css @@ -26,6 +26,20 @@ } +.block_overlay{ + height: 100vh; + width: 100vw; + background: rgba(39, 53, 62, 0.7); + backdrop-filter: blur(15px); + z-index: 15; + position: fixed; + top: 46px; +} + +.block_overlay.hidden{ + display: none; +} + .w-68{ width: 68%; } @@ -1913,6 +1927,7 @@ position: absolute; right: 100px; z-index: 220; + box-shadow: -1px 4px 10px 0 rgba(198, 199, 203, 0.20), 0 -1px 10px 0 rgba(198, 199, 203, 0.20); } .menu_profile_btn.show{ @@ -1921,7 +1936,8 @@ padding: 10px; width: 230px; position: absolute; - right: 0; + right: 10px; + top: 60px; border-radius: 10px; font-size: 14px; diff --git a/static/js/user_profile_2.js b/static/js/user_profile_2.js index 97c1ab0..6cf9241 100644 --- a/static/js/user_profile_2.js +++ b/static/js/user_profile_2.js @@ -634,14 +634,42 @@ function show_header_list () { } } -function open_curtain (left,right){ - let curtain = '' - if (left){ - curtain = document.querySelector(".menu_buttons") - } else if (right) { - curtain = '' +function open_curtain (left=null,right=null,overlay=null){ + let body = document.querySelector('body') + 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") + } else if (right) { + curtain = '' + } + } 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.classList.toggle("close") curtain.classList.toggle("open") -} \ No newline at end of file + if (body.style.overflow === 'hidden'){ + body.style.overflow = '' + } else { + body.style.overflow = 'hidden' + } + +} + diff --git a/templates/blocks/b_header.html b/templates/blocks/b_header.html index 600bc71..1e2a342 100644 --- a/templates/blocks/b_header.html +++ b/templates/blocks/b_header.html @@ -75,15 +75,7 @@ - + {# end #} {% endif %} diff --git a/templates/blocks/b_user_profile.html b/templates/blocks/b_user_profile.html index dbaee27..3b8ca04 100644 --- a/templates/blocks/b_user_profile.html +++ b/templates/blocks/b_user_profile.html @@ -2,7 +2,7 @@ {% load static %}
-