fix documentation scroll

static/aerbimCSS.css

@@ -1635,6 +1635,7 @@ body.n_scroll{
     display: flex;
     width: 100%;
     align-items: center;
+    flex-wrap: wrap;
 }
 
 .breadcrumb_arrow_picture{
@@ -1919,4 +1920,56 @@ body.n_scroll{
 
 .documentation_block{
     margin-bottom: 100px;
-}
+}
+
+.container_top_txt_curtain_documentation{
+    display: flex;
+    height: 55px;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 15px;
+    border-bottom: 1px solid #CCCED1FF;
+}
+
+.top_txt_curtain_documentation{
+    font-size: 16px;
+    font-weight: 600;
+    color: #7A8185FF;
+}
+
+.top_picture_curtain_documentation{
+    width: 24px;
+    height: 24px;
+    display: block;
+}
+.top_img_curtain_documentation{
+    width: 24px;
+    height: 24px;
+    display: block;
+}
+
+.container_open_doc_curtain{
+    display: flex;
+    align-items: center;
+    justify-content: right;
+    width: 100%;
+}
+
+.container_open_doc_curtain_txt{
+    font-size: 14px;
+    font-weight: 400;
+    color: #0C54A0FF;
+    margin-right: 4px;
+    border-bottom: 1px solid #0C54A0FF;
+}
+
+.container_open_doc_curtain_picture{
+    width: 10px;
+    height: 10px;
+    display: block;
+}
+.container_open_doc_curtain_img{
+    width: 10px;
+    height: 10px;
+    display: block;
+}

static/aerbimCSSMOBILE.css

@@ -7,6 +7,48 @@
 }
 
 @media (max-width: 1024px) {
+    .left_curtain_documentation{
+        width: 320px;
+    }
+    .tree_documentation_container_first_level_txt{
+        margin-bottom: 0;
+    }
+    .tree_documentation_container_second_level_txt{
+        margin-left: 0;
+    }
+    .left_curtain_documentation{
+        position: fixed;
+        left: -320px;
+        /* opacity: 0; */
+        height: 100vh;
+        top: 0;
+        background: #fff;
+        z-index: 10000;
+        padding: 0 0 27px 0;
+    }
+    .documentation_version{
+        padding: 0 15px;
+        margin-top: 20px;
+    }
+    .block_overlay{
+        top: 0;
+    }
+    .flex_container_tree_and_content{
+        display: block;
+    }
+    .tree_documentation_container {
+         width: unset;
+        height: 100vh;
+        overflow-y: auto;
+        padding: 0 15px;
+    }
+    .content_part_tree_els{
+        width: 100%;
+        margin-left: 0;
+    }
+    .breadcrumbs_documentation_block{
+        margin-top: 90px;
+    }
     .container_img_card_contacts{
         height: 250px;
     }
@@ -297,6 +339,9 @@
 }
 
 @media (max-width: 800px) {
+    .name_article_tree{
+        font-size: 36px;
+    }
     .how_dev_container_widgets {
         width: 100%;
         display: flex;
@@ -589,5 +634,11 @@
     .descript_process_container{
         margin-bottom: 15px;
     }
+    .breadcrumbs_documentation_block{
+        display: none;
+    }
+    .name_article_tree{
+        font-size: 26px;
+    }
 }
 

static/aerbimJS.js

@@ -12,7 +12,108 @@ $(document).ready(function (){
             resize_iframe()
         }
     }
+    if (getInfoAboutUser()[0] === 'laptop' || getInfoAboutUser()[0] === 'mobile'){
+        setInfInCurtainDocumentationMobile()
+        setButtonOpenMobileDocCurtain()
+    }
 })
+
+function setButtonOpenMobileDocCurtain () {
+    let $content = $('.content_part_tree_els')
+
+    let $cont = document.createElement("div")
+
+    let $txt = document.createElement("div")
+
+    let $picture = document.createElement("picture")
+
+    let $source = document.createElement("source")
+
+    let $img = document.createElement("img")
+
+    $cont.classList.add("container_open_doc_curtain")
+
+    $txt.innerHTML = context_txt_translated
+
+    $txt.setAttribute("onclick",'openDocCurtainMobile()')
+
+    $txt.classList.add("container_open_doc_curtain_txt")
+
+    $picture.classList.add("container_open_doc_curtain_picture")
+
+    $source.srcset = '/static/images/arrow_open_documentation_curtain.svg'
+
+    $img.classList.add("container_open_doc_curtain_img")
+
+    $img.src = '/static/images/arrow_open_documentation_curtain.svg'
+
+    $cont.appendChild($txt)
+
+    $cont.appendChild($picture)
+
+    $picture.appendChild($source)
+
+    $picture.appendChild($img)
+
+    $($cont).insertBefore($content)
+}
+
+function setInfInCurtainDocumentationMobile () {
+    let $doc_vers = $(".documentation_version")
+
+    let $container = document.createElement("div")
+
+    let $txt = document.createElement("div")
+
+    let $picture = document.createElement("picture")
+
+    let $source = document.createElement("source")
+
+    let $img = document.createElement("img")
+
+    $container.classList.add("container_top_txt_curtain_documentation")
+
+    $picture.classList.add("top_picture_curtain_documentation")
+
+    $txt.innerHTML = context_txt_translated
+
+    $txt.classList.add("top_txt_curtain_documentation")
+
+    $source.srcset = '/static/images/cross.svg'
+
+    $img.src = '/static/images/cross.svg'
+
+    $container.appendChild($txt)
+
+    $container.appendChild($picture)
+
+    $picture.appendChild($source)
+
+    $picture.setAttribute("onclick","closeDocCurtainMobile()")
+
+    $picture.appendChild($img)
+
+    $($container).insertBefore($doc_vers)
+
+}
+
+function openDocCurtainMobile () {
+    let $curtain = $(".left_curtain_documentation")
+    let $block_overlay = $(".block_overlay")
+    $curtain.css({left:0})
+    $block_overlay.removeClass("hide")
+    $block_overlay.addClass("show")
+    $block_overlay.css({zIndex:10000})
+}
+
+function closeDocCurtainMobile () {
+    let $curtain = $(".left_curtain_documentation")
+    let $block_overlay = $(".block_overlay")
+    $curtain.css({left:'-320px'})
+    $block_overlay.addClass("hide")
+    $block_overlay.removeClass("show")
+    $block_overlay.css({zIndex:101})
+}
 autoplayInterval = null
 
 function resize_iframe () {
@@ -466,25 +567,27 @@ function showContentPartTree (el) {
 }
 let waitingTop = null
 $(window).scroll(function (){
-    if (window.location.href.includes("docs")){
-        let $curtain = $(".left_curtain_documentation")
-        let scroll = $(window)[0].scrollY
-        if (scroll === 0){
-            waitingTop = $(".left_curtain_documentation")[0].getBoundingClientRect().top - 172
-        }
-        let $new_curtain = $($curtain[1])
-        if (!$curtain[1] && waitingTop){
-            $new_curtain = $curtain.clone()
-            $new_curtain.insertAfter($curtain)
-        }
-        if (scroll >= waitingTop && waitingTop){
-            $new_curtain.css({position:'fixed',top: 166})
-            $($curtain[0]).css({opacity:0})
-        } else if (scroll < waitingTop && waitingTop) {
-            $new_curtain.remove()
-            $($curtain[0]).css({opacity:1})
-        } else if (!waitingTop){
-            waitingTop = $(".left_curtain_documentation")[0].getBoundingClientRect().top - 172
+    if (getInfoAboutUser()[0] !== 'laptop' && getInfoAboutUser()[0] !== 'mobile'){
+        if (window.location.href.includes("docs")){
+            let $curtain = $(".left_curtain_documentation")
+            let scroll = $(window)[0].scrollY
+            if (scroll === 0){
+                waitingTop = $(".left_curtain_documentation")[0].getBoundingClientRect().top - 172
+            }
+            let $new_curtain = $($curtain[1])
+            if (!$curtain[1] && waitingTop){
+                $new_curtain = $curtain.clone()
+                $new_curtain.insertAfter($curtain)
+            }
+            if (scroll >= waitingTop && waitingTop){
+                $new_curtain.css({position:'fixed',top: 166})
+                $($curtain[0]).css({opacity:0})
+            } else if (scroll < waitingTop && waitingTop) {
+                $new_curtain.remove()
+                $($curtain[0]).css({opacity:1})
+            } else if (!waitingTop){
+                waitingTop = $(".left_curtain_documentation")[0].getBoundingClientRect().top - 172
+            }
         }
     }
 })

static/images/arrow_open_documentation_curtain.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0036 6.98053L10.0036 1C10.0036 0.447716 9.55591 0 9.00363 0H3.02253L3.02253 1.5L7.44305 1.5L0 8.94236L1.06061 10.0031L8.50363 2.56074L8.50363 6.98053H10.0036Z" fill="#0C54A0"/>
+</svg>

static/images/cross.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 6L6 18" stroke="#10212B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 6L18 18" stroke="#10212B" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

templates/tb_base.html

@@ -1,5 +1,5 @@
 {% load static %}
-
+{% load i18n %}
 <!DOCTYPE html>
 <html lang="{{ request.LANGUAGE_CODE }}">
     <head>
@@ -12,6 +12,7 @@
         <script src="{% static "jquery_v3_6_4.js" %}"></script>
         <script src="{% static "aerbimJS.js" %}"></script>
         <script>
+            context_txt_translated = '{% trans "Содержание" %}'
             lang_f_check = ''
         </script>
         <meta name="viewport" content="width=100%,maximum-scale=5,minimum-scale=1,initial-scale=1">