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