0.0.319

2023-11-05 17:20:40 +03:00
parent da3774527f
commit 052f236206
7 changed files with 163 additions and 63 deletions
--- 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;
--- 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;
 }
--- 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) {
--- 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
+}
--- a/templates/blocks/b_header.html
+++ b/templates/blocks/b_header.html
@@ -71,10 +71,18 @@
                              </div>
                            </div>
                        </div>
-                    <div class="button_profile_header_mobile" onclick="show_header_list()">
+                    <div class="button_profile_header_mobile" onclick="open_curtain(null,'right')">
                        <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 #}
--- a/templates/blocks/b_user_profile.html
+++ b/templates/blocks/b_user_profile.html
@@ -2,7 +2,7 @@
 {% load static %}

 <section class="profile" >
-    <div class="menu_buttons curtain close">
+    <div class="menu_buttons curtain left close" data-name="Меню">
        {% 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' %}">
@@ -22,5 +22,14 @@
 {#            {% include "blocks/profile/b_chats.html" %}#}
        {% endif %}
    </div>
-<div class="clear_both"></div>
+    <div class="clear_both"></div>
+    <div class="menu_buttons curtain right close" data-name="Пользователи">
+        {% include "blocks/profile/b_buttons_menu_profile.html" %}
+        <div class="handler_menu close" onclick="open_curtain(null,'right')">
+            <img class="btns_f_curtain close left" src="{% static 'img/svg/arrow_f_curtain.svg' %}">
+            <div class="text_f_curtain left">Пользователи</div>
+            <img class="btns_f_curtain close right"  src="{% static 'img/svg/arrow_f_curtain.svg' %}">
+            <div class="clear_both"></div>
+        </div>
+    </div>
  </section>
--- a/templates/tb_base.html
+++ b/templates/tb_base.html
@@ -52,15 +52,7 @@
    {% 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' %}