This commit is contained in:
SBD
2024-07-11 19:17:29 +03:00
parent a36401af3e
commit e586293ae0
3 changed files with 42 additions and 15 deletions

View File

@@ -1695,6 +1695,7 @@ body.n_scroll{
border: 1px solid #CCCED1FF;
border-radius: 2px;
margin-left: 16px;
position: relative;
}
.first_line_documentation_version_switcher{
@@ -1706,6 +1707,11 @@ body.n_scroll{
.documentation_switcher_content_part{
width: 100%;
position: absolute;
bottom: -31px;
border: 1px solid #CCCED1FF;
border-top: 0;
left: -1px;
}
.documentation_switcher_content_part.hidden{
@@ -1713,12 +1719,15 @@ body.n_scroll{
}
.one_item_documentation_switcher_content_part{
background: none;
background: none;
font-size: 16px;
font-weight: 400;
color: #0C54A0FF;
padding: 6px 26px;
transition: 200ms;
padding: 6px 10px 6px 10px;
display: flex;
align-items: center;
justify-content: center;
}
.one_item_documentation_switcher_content_part:hover{

View File

@@ -511,13 +511,17 @@ 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")
$content_part.classList.toggle("hidden")
if ($arrow.style.rotate === '0deg' || $arrow.style.rotate === '') {
$($arrow).animate({rotate: '180deg'},200)
let height = $content_part.offsetHeight
$content_part.style.bottom = '-' + height + "px"
$parent.style.borderBottom = '1px solid #fff'
} else {
$($arrow).animate({rotate: '0deg'},200)
$parent.style.borderBottom = '1px solid #CCCED1FF'
}
$content_part.classList.toggle("hidden")
$("body")[0].setAttribute("onclick",'closeVersionSwitcherOnBody()')
}
@@ -526,7 +530,8 @@ function closeVersionSwitcherOnBody () {
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)
$(".documentation_version_switcher").css({borderBottom: '1px solid #CCCED1FF'})
$($arrow).animate({rotate: '180deg'},200)
}
}
@@ -598,4 +603,13 @@ $(window).scroll(function (){
}
}
}
})
})
function chooseVersionComplete (el) {
let url = el.dataset['url']
let title = el.dataset['title']
let $parent = el.closest(".documentation_version")
let $cur_selected = $parent.querySelector(".documentation_version_txt")
$cur_selected.innerHTML = title
window.location.href = window.location.origin + url
}

View File

@@ -45,9 +45,13 @@
</picture>
</div>
<div class="documentation_switcher_content_part hidden">
<div class="one_item_documentation_switcher_content_part">
2
</div>
{% for item in allow_versions %}
<div class="one_item_documentation_switcher_content_part" data-url="{% url 'docs_version_page' item.url %}" data-title="{{ item.name }}" onclick="chooseVersionComplete(this)">
{{ item.name }}
</div>
{% endfor %}
</div>
</div>
</div>
@@ -61,12 +65,12 @@
<img class="tree_documentation_arrow_img" src="{% static "images/arrow_for_documentation_switcher.svg" %}" alt="">
</picture>
{% endif %}
<div class="tree_documentation_container_first_level_txt {% if not obj.children %}margin{% endif %}" onclick="choseItemTreeDocumentation(this)" data-url="{% url 'docs_art_page' cur_version.url obj.url %}">
<div class="tree_documentation_container_first_level_txt {% if not obj.children %}margin {% endif %}{% if cur_article.url == obj.url %}chose{% endif %}" onclick="choseItemTreeDocumentation(this)" data-url="{% url 'docs_art_page' cur_version.url obj.url %}">
{{ name }}
</div>
</div>
{% if obj.children %}
<div class="content_part_tree_documentation_container hidden">
<div class="content_part_tree_documentation_container {% if not obj.active %}hidden{% endif %}">
{% for name, obj in obj.children.items %}
<div class="tree_documentation_container_second_level">
@@ -77,7 +81,7 @@
<img class="tree_documentation_arrow_img" src="{% static "images/arrow_for_documentation_switcher.svg" %}" alt="">
</picture>
{% endif %}
<div class="tree_documentation_container_second_level_txt {% if not obj.children %}margin{% endif %}" data-url="{% url 'docs_art_page' cur_version.url obj.url %}" onclick="choseItemTreeDocumentation(this)">
<div class="tree_documentation_container_second_level_txt {% if not obj.children %}margin {% endif %}{% if cur_article.url == obj.url %}chose{% endif %}" data-url="{% url 'docs_art_page' cur_version.url obj.url %}" onclick="choseItemTreeDocumentation(this)">
{{ name }}
</div>
</div>
@@ -85,16 +89,16 @@
{% for name,obj in obj.children.items %}
<div class="content_part_tree_documentation_container min_padding hidden">
<div class="elements_third_level_content_part_tree">
<div class="element_third_level_content_part_tree" onclick="choseItemTreeDocumentation(this)" data-url="{% url 'docs_art_page' cur_version.url obj.url %}">
<div class="element_third_level_content_part_tree {% if cur_article.url == obj.url %}chose{% endif %}" onclick="choseItemTreeDocumentation(this)" data-url="{% url 'docs_art_page' cur_version.url obj.url %}">
{{ name }}
</div>
<div class="element_third_level_content_part_tree" onclick="choseItemTreeDocumentation(this)" data-url="{% url 'docs_art_page' cur_version.url obj.url %}">
<div class="element_third_level_content_part_tree {% if cur_article.url == obj.url %}chose{% endif %}" onclick="choseItemTreeDocumentation(this)" data-url="{% url 'docs_art_page' cur_version.url obj.url %}">
{{ name }}
</div>
<div class="element_third_level_content_part_tree" onclick="choseItemTreeDocumentation(this)" data-url="{% url 'docs_art_page' cur_version.url obj.url %}">
<div class="element_third_level_content_part_tree {% if cur_article.url == obj.url %}chose{% endif %}" onclick="choseItemTreeDocumentation(this)" data-url="{% url 'docs_art_page' cur_version.url obj.url %}">
{{ name }}
</div>
<div class="element_third_level_content_part_tree chose" onclick="choseItemTreeDocumentation(this)" data-url="{% url 'docs_art_page' cur_version.url obj.url %}">
<div class="element_third_level_content_part_tree {% if cur_article.url == obj.url %}chose{% endif %}" onclick="choseItemTreeDocumentation(this)" data-url="{% url 'docs_art_page' cur_version.url obj.url %}">
{{ name }}
</div>
</div>