diff --git a/static/aerbimCSS.css b/static/aerbimCSS.css index b10d8fe..1d81062 100644 --- a/static/aerbimCSS.css +++ b/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; -} \ No newline at end of file +} + +.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; +} diff --git a/static/aerbimCSSMOBILE.css b/static/aerbimCSSMOBILE.css index 25ae09b..2bb6525 100644 --- a/static/aerbimCSSMOBILE.css +++ b/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; + } } diff --git a/static/aerbimJS.js b/static/aerbimJS.js index 7346d75..ff9a8c6 100644 --- a/static/aerbimJS.js +++ b/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 + } } } }) \ No newline at end of file diff --git a/static/images/arrow_open_documentation_curtain.svg b/static/images/arrow_open_documentation_curtain.svg new file mode 100644 index 0000000..e2b8f3a --- /dev/null +++ b/static/images/arrow_open_documentation_curtain.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/images/cross.svg b/static/images/cross.svg new file mode 100644 index 0000000..90a7a03 --- /dev/null +++ b/static/images/cross.svg @@ -0,0 +1,4 @@ + + + + diff --git a/templates/tb_base.html b/templates/tb_base.html index cb62540..b1b543f 100644 --- a/templates/tb_base.html +++ b/templates/tb_base.html @@ -1,5 +1,5 @@ {% load static %} - +{% load i18n %} @@ -12,6 +12,7 @@