0.0.318

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;
+        width: 91px;
-        height: 32px;
+        height: 18px;
         display: block;
-        position: absolute;
+        position: fixed;
-        right: -47px;
+        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{

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;

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) {
+function open_curtain (left=null,right=null,overlay=null){
-        curtain = ''
+    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")
+    if (body.style.overflow === 'hidden'){
+        body.style.overflow = ''
+    } else {
+        body.style.overflow = 'hidden'
+    }
+
 }
+

templates/blocks/b_header.html

@@ -75,15 +75,7 @@
                         <img src="/static/img/svg/userMobile.svg" alt="">
                     </div>
 
-                        <div class="menu_profile_btn">
+
-                            {% if user_subscribe %}<div class="subscribe_type_txt"><span class="f-l">Подписка:</span> <span class="f-r">{{ user_subscribe.subscribe.name }}</span><div class="clear_both"></div></div>{% endif %}
-                            <a class="btn_menu_profile" href="{% url "user_profile" %}" >Перейти в профиль</a>
-                            <a class="btn_menu_profile" href="{% url 'profile_page' 'create_route_for_mover' %}">Перевезти посылку</a>
-                            <a class="btn_menu_profile" href="{% url 'profile_page' 'create_route_for_customer' %}">Отправить посылку</a>
-                            <a class="btn_menu_profile" href="{% url 'profile_page' 'my_routes' %}" >Мои объявления</a>
-                            <div class="separator_menu_profile"></div>
-                            <a href="/profile/logout" class="btn_menu_profile">Выйти из профиля</a>
-                        </div>
                     </div>
                 {# end #}
             {% endif %}

templates/blocks/b_user_profile.html

@@ -2,7 +2,7 @@
 {% load static %}
 
 <section class="profile" >
-    <div class="menu_buttons close">
+    <div class="menu_buttons curtain close">
         {% include "blocks/profile/b_buttons_menu_profile.html" %}
         <div class="handler_menu close" onclick="open_curtain('left')">
             <img class="btns_f_curtain close left" src="{% static 'img/svg/arrow_f_curtain.svg' %}">

templates/tb_base.html

@@ -52,6 +52,16 @@
     {% endblock %}
 </head>
 <body>
+<div class="menu_profile_btn">
+    {% if user_subscribe %}<div class="subscribe_type_txt"><span class="f-l">Подписка:</span> <span class="f-r">{{ user_subscribe.subscribe.name }}</span><div class="clear_both"></div></div>{% endif %}
+    <a class="btn_menu_profile" href="{% url "user_profile" %}" >Перейти в профиль</a>
+    <a class="btn_menu_profile" href="{% url 'profile_page' 'create_route_for_mover' %}">Перевезти посылку</a>
+    <a class="btn_menu_profile" href="{% url 'profile_page' 'create_route_for_customer' %}">Отправить посылку</a>
+    <a class="btn_menu_profile" href="{% url 'profile_page' 'my_routes' %}" >Мои объявления</a>
+    <div class="separator_menu_profile"></div>
+    <a href="/profile/logout" class="btn_menu_profile">Выйти из профиля</a>
+</div>
+<div class="block_overlay hidden" onclick="open_curtain()"></div>
 <div class="wrapper_main">
     {% include 'blocks/b_header.html' %}
     <div class="wrapper_content">