documentation page

This commit is contained in:
SBD
2024-07-12 17:41:43 +03:00
parent e586293ae0
commit b5086cbd40
4 changed files with 73 additions and 27 deletions

View File

@@ -1655,6 +1655,7 @@ body.n_scroll{
.way_bread_crumb{
font-size: 14px;
color: #7A8185FF;
cursor: pointer;
}
.way_bread_crumb.last{
@@ -1691,7 +1692,7 @@ body.n_scroll{
}
.documentation_version_switcher{
width: 60px;
width: 70px;
border: 1px solid #CCCED1FF;
border-radius: 2px;
margin-left: 16px;
@@ -1882,6 +1883,16 @@ body.n_scroll{
.content_part_tree_els{
width: calc(100% - 453px);
margin-left: 80px;
font-size: 16px;
}
.content_part_tree_els img{
max-width: 100%;
object-fit: contain;
}
.content_part_tree_els h1{
font-size: 40px;
}
.name_article_tree{

View File

@@ -347,6 +347,9 @@
}
@media (max-width: 800px) {
.content_part_tree_els h1{
font-size: 36px;
}
.name_article_tree{
font-size: 36px;
}
@@ -639,6 +642,9 @@
}
@media (max-width: 380px) {
.content_part_tree_els h1{
font-size: 26px;
}
.descript_process_container{
margin-bottom: 15px;
}

View File

@@ -531,7 +531,12 @@ function closeVersionSwitcherOnBody () {
let $arrow = document.querySelector(".documentation_switcher_arrow_picture")
$version_switcher_container_content.addClass("hidden")
$(".documentation_version_switcher").css({borderBottom: '1px solid #CCCED1FF'})
$($arrow).animate({rotate: '180deg'},200)
if ($arrow.style.rotate !== '180deg'){
$($arrow).animate({rotate: '180deg'},200)
} else {
$($arrow).animate({rotate: '0deg'},200)
}
}
}
@@ -609,7 +614,19 @@ 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")
let $cur_selected = $parent.querySelector(".cur_documentation_version")
let $cont = el.closest(".documentation_switcher_content_part")
let $cont_parent = $cont.closest(".documentation_version_switcher")
$cont_parent.style.borderBottom = '1px solid #CCCED1FF'
$cont.classList.add("hidden")
$cur_selected.innerHTML = title
window.location.href = window.location.origin + url
}
function breadCrumbGo (el){
if (el.dataset){
let url = el.dataset['url']
window.location.href = window.location.origin + url
}
}

View File

@@ -7,23 +7,35 @@
<div class="breadcrumbs_documentation_block">
<div class="cut-width">
<div class="breadcrumbs_documentation">
<div class="way_bread_crumb">
Документация и техническая поддержка
</div>
<picture class="breadcrumb_arrow_picture">
<source srcset="{% static "images/breadcrumb_arrow.svg" %}">
<img class="breadcrumb_arrow_img" src="{% static "images/breadcrumb_arrow.svg" %}" alt="">
</picture>
<div class="way_bread_crumb">
Документация для версии 1
</div>
<picture class="breadcrumb_arrow_picture">
<source srcset="{% static "images/breadcrumb_arrow.svg" %}">
<img class="breadcrumb_arrow_img" src="{% static "images/breadcrumb_arrow.svg" %}" alt="">
</picture>
<div class="way_bread_crumb last">
Документация для версии 1
</div>
{# <div class="way_bread_crumb">#}
{# Документация и техническая поддержка#}
{# </div>#}
{# <picture class="breadcrumb_arrow_picture">#}
{# <source srcset="{% static "images/breadcrumb_arrow.svg" %}">#}
{# <img class="breadcrumb_arrow_img" src="{% static "images/breadcrumb_arrow.svg" %}" alt="">#}
{# </picture>#}
{# <div class="way_bread_crumb">#}
{# Документация для версии 1#}
{# </div>#}
{# <picture class="breadcrumb_arrow_picture">#}
{# <source srcset="{% static "images/breadcrumb_arrow.svg" %}">#}
{# <img class="breadcrumb_arrow_img" src="{% static "images/breadcrumb_arrow.svg" %}" alt="">#}
{# </picture>#}
{# <div class="way_bread_crumb last">#}
{# Документация для версии 1#}
{# </div>#}
{% for name,url in breadcrumbs.items %}
<div class="way_bread_crumb{% if forloop.last %} last{% endif %}" {% if not forloop.last %}data-url="{{ url }}"{% endif %} onclick="breadCrumbGo(this)">
{{ name }}
</div>
{% if not forloop.last %}
<picture class="breadcrumb_arrow_picture">
<source srcset="{% static "images/breadcrumb_arrow.svg" %}">
<img class="breadcrumb_arrow_img" src="{% static "images/breadcrumb_arrow.svg" %}" alt="">
</picture>
{% endif %}
{% endfor %}
</div>
</div>
</div>
@@ -37,7 +49,7 @@
<div class="documentation_version_switcher">
<div class="first_line_documentation_version_switcher" onclick="openVersionSwitcher(this)">
<div class="cur_documentation_version">
1
{{ cur_version.name }}
</div>
<picture class="documentation_switcher_arrow_picture">
<source srcset="{% static "images/arrow_for_documentation_switcher.svg" %}">
@@ -46,11 +58,11 @@
</div>
<div class="documentation_switcher_content_part hidden">
{% 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>
@@ -72,7 +84,7 @@
{% if obj.children %}
<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">
<div class="tree_documentation_container_first_line">
{% if obj.children %}
@@ -80,7 +92,7 @@
<source srcset="{% static "images/arrow_for_documentation_switcher.svg" %}">
<img class="tree_documentation_arrow_img" src="{% static "images/arrow_for_documentation_switcher.svg" %}" alt="">
</picture>
{% endif %}
{% endif %}
<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>
@@ -104,9 +116,9 @@
</div>
</div>
{% endfor %}
{% endif %}
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}