From 36508a6605136fc9279d7dd48c4f7dc6b76e7b9f Mon Sep 17 00:00:00 2001 From: SBD Date: Wed, 10 Jul 2024 18:03:18 +0300 Subject: [PATCH] documentation page --- static/aerbimCSS.css | 295 ++++++++++++++++++ static/aerbimJS.js | 84 ++++- static/images/arrow_control_part_tree_el.svg | 3 + .../arrow_for_documentation_switcher.svg | 3 + static/images/breadcrumb_arrow.svg | 3 + templates/blocks/b_3d_s_d.html | 2 +- templates/pages/p_documentation.html | 162 ++++++++++ 7 files changed, 550 insertions(+), 2 deletions(-) create mode 100644 static/images/arrow_control_part_tree_el.svg create mode 100644 static/images/arrow_for_documentation_switcher.svg create mode 100644 static/images/breadcrumb_arrow.svg diff --git a/static/aerbimCSS.css b/static/aerbimCSS.css index 0116b04..b10d8fe 100644 --- 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; } \ No newline at end of file diff --git a/static/aerbimJS.js b/static/aerbimJS.js index b050c97..b592a19 100644 --- 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` // } -} \ No newline at end of file +} + +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}) + } + } +}) \ No newline at end of file diff --git a/static/images/arrow_control_part_tree_el.svg b/static/images/arrow_control_part_tree_el.svg new file mode 100644 index 0000000..6f8d502 --- /dev/null +++ b/static/images/arrow_control_part_tree_el.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/images/arrow_for_documentation_switcher.svg b/static/images/arrow_for_documentation_switcher.svg new file mode 100644 index 0000000..570f56c --- /dev/null +++ b/static/images/arrow_for_documentation_switcher.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/images/breadcrumb_arrow.svg b/static/images/breadcrumb_arrow.svg new file mode 100644 index 0000000..993820c --- /dev/null +++ b/static/images/breadcrumb_arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/templates/blocks/b_3d_s_d.html b/templates/blocks/b_3d_s_d.html index de449be..4b4c39f 100644 --- a/templates/blocks/b_3d_s_d.html +++ b/templates/blocks/b_3d_s_d.html @@ -40,7 +40,7 @@ {% endif %} {% if block.but2_title or block.but2_icon %} -