documentation page

2024-07-10 18:03:18 +03:00
parent 4d78fa8e54
commit 36508a6605
7 changed files with 550 additions and 2 deletions
--- a/static/aerbimCSS.css
+++ b/static/aerbimCSS.css
@@ -1624,4 +1624,299 @@ body.n_scroll{
    width: 47.5%;
    margin-left: 2.5%;
    margin-top: 0;
+}
+
+.breadcrumbs_documentation_block{
+    width: 100%;
+    margin: 30px 0 50px 0;
+}
+
+.breadcrumbs_documentation{
+    display: flex;
+    width: 100%;
+    align-items: center;
+}
+
+.breadcrumb_arrow_picture{
+    margin: 0 8px;
+    height: 16px;
+    width: 16px;
+    display: block;
+}
+
+.breadcrumb_arrow_img{
+    width: 6px;
+    height: 10px;
+    padding: 2px 5px;
+    display: block;
+}
+
+.way_bread_crumb{
+    font-size: 14px;
+    color: #7A8185FF;
+}
+
+.way_bread_crumb.last{
+    color: #000000;
+}
+
+.documentation_switcher_arrow_picture{
+    width: 12px;
+    height: 7px;
+    display: block;
+}
+.documentation_switcher_arrow_img{
+    width: 12px;
+    height: 7px;
+    display: block;
+}
+
+.cur_documentation_version{
+    font-size: 16px;
+    font-weight: 500;
+    color: #0C54A0FF;
+}
+
+.documentation_version_txt{
+    font-size: 20px;
+    font-weight: 700;
+    color: #10212BFF;
+}
+
+.documentation_version{
+    display: flex;
+    align-items: center;
+    margin-bottom: 40px;
+}
+
+.documentation_version_switcher{
+    width: 60px;
+    border: 1px solid #CCCED1FF;
+    border-radius: 2px;
+    margin-left: 16px;
+}
+
+.first_line_documentation_version_switcher{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px 10px 6px 17px;
+}
+
+.documentation_switcher_content_part{
+    width: 100%;
+}
+
+.documentation_switcher_content_part.hidden{
+    display: none;
+}
+
+.one_item_documentation_switcher_content_part{
+   background: none;
+    font-size: 16px;
+    font-weight: 400;
+    color: #0C54A0FF;
+    padding: 6px 26px;
+    transition: 200ms;
+}
+
+.one_item_documentation_switcher_content_part:hover{
+    background: #0C54A0FF;
+    color: #FFFFFF;
+}
+
+.left_curtain_documentation{
+    width: 373px;
+}
+
+.tree_documentation_container{
+    width: 100%;
+    height: calc(100vh - 295px);
+    overflow-y: auto;
+}
+.tree_documentation_container.hide_scroll::-webkit-scrollbar{
+    display: none;
+}
+
+.tree_documentation_container.hide_scroll{
+    overflow-y: hidden;
+}
+
+.tree_documentation_container.hidden_scrollbar::-webkit-scrollbar {
+    opacity: 0;
+    display: none;
+}
+
+.tree_documentation_container::-webkit-scrollbar-thumb {
+    background-color: #CCCED1FF;
+    border-radius: 5px;
+    width: 6px;
+    display: block;
+    border: 1px solid #EDEDEDFF;
+    transition: 200ms all;
+}
+
+.tree_documentation_container::-webkit-scrollbar {
+    background-color: #EDEDEDFF;
+    width: 8px;
+    display: block;
+    padding-left: 15px;
+    transition: 500ms all;
+    opacity: 100%;
+    border-radius: 5px;
+}
+
+/*.tree_documentation_container::-webkit-scrollbar:hover .tree_documentation_container::-webkit-scrollbar-thumb {*/
+/*    background-color: #0C54A0FF;*/
+/*}*/
+
+.tree_documentation_container:hover::-webkit-scrollbar-thumb:hover {
+    background-color: #0C54A0FF;
+}
+
+.tree_documentation_container_first_level{
+    width: 100%;
+}
+
+.tree_documentation_container_first_line{
+    display: flex;
+    width: 100%;
+    cursor: pointer;
+}
+
+
+.tree_documentation_arrow_picture{
+    width: 24px;
+    height: 24px;
+    display: block;
+    background: none;
+    transition: 200ms all;
+    border-radius: 2px;
+}
+.tree_documentation_arrow_picture:hover{
+    background: #E0E8EFFF;
+}
+
+.tree_documentation_arrow_img{
+    width: 12px;
+    height: 7px;
+    padding: 9px 6px;
+}
+
+.tree_documentation_container_first_level_txt{
+    font-size: 16px;
+    font-weight: 700;
+    color: #000000;
+    margin-left: 3px;
+}
+.tree_documentation_container_second_level_txt{
+    font-size: 16px;
+    font-weight: 400;
+    color: #000000;
+    margin-left: 3px;
+}
+
+.content_part_tree_documentation_container{
+    width: 100%;
+    margin-top: 10px;
+}
+
+.content_part_tree_documentation_container.hidden{
+    display: none;
+}
+
+.tree_documentation_container_second_level{
+    margin-left: 20px;
+}
+
+.elements_third_level_content_part_tree{
+    margin-left: 50px;
+}
+
+.element_third_level_content_part_tree{
+    width: 100%;
+    color: #7A8185FF;
+    font-size: 14px;
+    font-weight: 400;
+    margin: 5px 0;
+    cursor: pointer;
+}
+
+.element_third_level_content_part_tree.chose{
+    color: #0C54A0FF;
+}
+
+.content_part_tree_documentation_container.min_padding{
+    margin-top: 5px;
+}
+
+.flex_container_tree_and_content{
+    display: flex;
+    width: 100%;
+}
+
+.content_part_tree_els{
+    width: calc(100% - 453px);
+    margin-left: 80px;
+}
+
+.name_article_tree{
+    font-size: 40px;
+    font-weight: 700;
+    margin-bottom: 30px;
+}
+
+.description_article_tree{
+    font-size: 16px;
+    font-weight: 400;
+    margin-bottom: 40px;
+}
+
+.controls_content_part_tree_els{
+    display: flex;
+    justify-content: space-between;
+}
+
+.control_content_part_tree_el{
+    display: flex;
+    align-items: center;
+    width: fit-content;
+    cursor: pointer;
+}
+
+.arrow_control_content_part_tree_el_img{
+    width: 11px;
+    height: 9px;
+    display: block;
+}
+.arrow_control_content_part_tree_el_picture{
+    width: 11px;
+    height: 9px;
+    display: block;
+}
+
+.control_content_part_tree_el.right .arrow_control_content_part_tree_el_img{
+    rotate: 180deg;
+}
+.control_content_part_tree_el.left .arrow_control_content_part_tree_el_img{
+    rotate: 0;
+}
+
+
+.txt_control_content_part_tree_el{
+    font-size: 14px;
+    font-weight: 400;
+    color: #7A8185FF;
+    border-bottom: 1px solid #7A8185FF;
+}
+.control_content_part_tree_el.right .txt_control_content_part_tree_el{
+    margin-right: 7px;
+}
+.control_content_part_tree_el.left .txt_control_content_part_tree_el{
+    margin-left: 7px;
+}
+
+
+.documentation_block{
+    margin-bottom: 100px;
 }
--- a/static/aerbimJS.js
+++ b/static/aerbimJS.js
@@ -400,4 +400,86 @@ function redirectToDownloadPlugin () {
    // } else {
    window.location.href = `${window.location.origin}/${lang}/section/3d-security-designer/#feedback_form`
    // }
-}
+}
+
+function transitToDocumentation() {
+    window.location.href = window.location.origin + '/' + getLang() + '/docs/3dsd/'
+}
+
+function openVersionSwitcher(el){
+    let $parent = el.closest(".documentation_version_switcher")
+    let $content_part = $parent.querySelector(".documentation_switcher_content_part")
+    let $arrow = $parent.querySelector(".documentation_switcher_arrow_picture")
+    if ($arrow.style.rotate === '0deg' || $arrow.style.rotate === '') {
+        $($arrow).animate({rotate: '180deg'},200)
+    } else {
+        $($arrow).animate({rotate: '0deg'},200)
+    }
+
+    $content_part.classList.toggle("hidden")
+    $("body")[0].setAttribute("onclick",'closeVersionSwitcherOnBody()')
+}
+
+function closeVersionSwitcherOnBody () {
+    if (!event.srcElement.closest(".documentation_version_switcher")){
+        let $version_switcher_container_content = $(".documentation_switcher_content_part")
+        let $arrow = document.querySelector(".documentation_switcher_arrow_picture")
+        $version_switcher_container_content.addClass("hidden")
+        $($arrow).animate({rotate: '0deg'},200)
+    }
+}
+
+function choseItemTreeDocumentation (el){
+    let $tree = el.closest(".tree_documentation_container")
+    let $allChosingElementsTreeThirdLevel = $($tree).find(".element_third_level_content_part_tree")
+    let $allChosingElementsTreeSecondLevel = $($tree).find(".element_third_level_content_part_tree")
+    let $allChosingElementsTreeFirstLevel = $($tree).find(".element_third_level_content_part_tree")
+    $allChosingElementsTreeThirdLevel.each(function (){
+        if (el !== this){
+            this.classList.remove("chose")
+        }
+    })
+    $allChosingElementsTreeSecondLevel.each(function (){
+        if (el !== this){
+            this.classList.remove("chose")
+        }
+    })
+    $allChosingElementsTreeFirstLevel.each(function (){
+        if (el !== this){
+            this.classList.remove("chose")
+        }
+    })
+    
+    el.classList.add("chose")
+}
+
+function showContentPartTree (el) {
+    let $parent = el.parentNode
+    let $content_part = $parent.querySelector(".content_part_tree_documentation_container")
+    let $arrow = $parent.querySelector(".tree_documentation_arrow_img")
+    $content_part.classList.toggle("hidden")
+    if ($arrow.style.rotate === '0deg' || $arrow.style.rotate === ''){
+        $($arrow).animate({rotate: '180deg'})
+    } else {
+        $($arrow).animate({rotate: '0deg'})
+    }
+}
+
+$(window).scroll(function (){
+    if (window.location.href.includes("docs")){
+        let $curtain = $(".left_curtain_documentation")
+        let scroll = $(window)[0].scrollY
+        let $new_curtain = $($curtain[1])
+        if (!$curtain[1]){
+            $new_curtain = $curtain.clone()
+            $new_curtain.insertAfter($curtain)
+        }
+        if (scroll >= 100){
+            $new_curtain.css({position:'fixed',top: 122})
+            $($curtain[0]).css({opacity:0})
+        } else {
+            $new_curtain.remove()
+            $($curtain[0]).css({opacity:1})
+        }
+    }
+})
--- a/static/images/arrow_control_part_tree_el.svg
+++ b/static/images/arrow_control_part_tree_el.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.27778 10L1 5.5M1 5.5L5.27778 1M1 5.5L12 5.5" stroke="#7A8185" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/static/images/arrow_for_documentation_switcher.svg
+++ b/static/images/arrow_for_documentation_switcher.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.46906 6.53399L-0.00292987 1.06092L1.05783 0.000366396L5.99944 4.94295L10.9411 0.000368242L12.0018 1.06092L6.52983 6.53399C6.38917 6.67468 6.19838 6.75371 5.99944 6.75371C5.8005 6.75371 5.60972 6.67468 5.46906 6.53399Z" fill="#0C54A0"/>
+</svg>
--- a/static/images/breadcrumb_arrow.svg
+++ b/static/images/breadcrumb_arrow.svg
@@ -0,0 +1,3 @@
+<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.93627 5.00041L0.469727 1.53048L1.53091 0.470337L5.527 4.47034C5.81955 4.76317 5.81955 5.23765 5.527 5.53048L1.5309 9.53048L0.469727 8.47034L3.93627 5.00041Z" fill="#7A8185"/>
+</svg>