Docker/codex.docs
Docker/codex.docs
1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-08-09 07:25:21 +02:00
Code Issues Releases Activity

right aside added with style

Browse source
This commit is contained in:
Umang G. Patel 2022-06-05 00:39:05 +05:30
parent b598e0679b
commit 43d94ae6ff
4 changed files with 88 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/backend/views/components/leftAside.twig
View file

@ -1,19 +1,19 @@
<div class="docs-aside-toggler" onclick="document.querySelector('.docs-aside').classList.toggle('docs-aside--toggled')"> <div class="docs-aside-toggler" onclick="document.querySelector('.docs-left-aside').classList.toggle('docs-left-aside--toggled')">
{{ svg('menu') }} {{ svg('menu') }}
Table of contents Table of contents
</div> </div>
<div class="docs-aside"> <div class="docs-left-aside">
<div class="docs-aside__section-wrapper"> <div class="docs-left-aside__section-wrapper">
{% for firstLevelPage in menu %} {% for firstLevelPage in menu %}
<section class="docs-aside__section"> <section class="docs-left-aside__section">
<a {% if page is defined and page._id == firstLevelPage._id%} class="docs-aside__section-title docs-aside__current" {% else %} class="docs-aside__section-title" {% endif %} {% if firstLevelPage.uri %} href="/{{ firstLevelPage.uri }}" {% else %} href="/page/{{ firstLevelPage._id }}" {% endif %}> <a {% if page is defined and page._id == firstLevelPage._id%} class="docs-left-aside__section-title docs-left-aside__current" {% else %} class="docs-left-aside__section-title" {% endif %} {% if firstLevelPage.uri %} href="/{{ firstLevelPage.uri }}" {% else %} href="/page/{{ firstLevelPage._id }}" {% endif %}>
{{ firstLevelPage.title | striptags }} {{ firstLevelPage.title | striptags }}
</a> </a>
{% if firstLevelPage.children is not empty %} {% if firstLevelPage.children is not empty %}
<ul class="docs-aside__section-list"> <ul class="docs-left-aside__section-list">
{% for child in firstLevelPage.children %} {% for child in firstLevelPage.children %}
<li> <li>
<a {% if page is defined and page._id == child._id %} class="docs-aside__current" {% endif %} {% if child.uri %} href="/{{ child.uri }}" {% else %} href="/page/{{ child._id }}" {% endif %}> <a {% if page is defined and page._id == child._id %} class="docs-left-aside__current" {% endif %} {% if child.uri %} href="/{{ child.uri }}" {% else %} href="/page/{{ child._id }}" {% endif %}>
{{ child.title | striptags }} {{ child.title | striptags }}
</a> </a>
</li> </li>
@ -23,7 +23,7 @@
</section> </section>
{% endfor %} {% endfor %}
</div> </div>
<a class="docs-aside__logo-wrapper" href="https://github.com/codex-team/codex.docs"> <a class="docs-left-aside__logo-wrapper" href="https://github.com/codex-team/codex.docs">
<div class="logo"> <div class="logo">
{{ svg('aside-logo') }} {{ svg('aside-logo') }}
</div> </div>

52
src/backend/views/components/rightAside.twig
View file

@ -1,34 +1,22 @@
<div class="docs-aside-toggler" onclick="document.querySelector('.docs-aside').classList.toggle('docs-aside--toggled')"> <div class="docs-right-aside">
{{ svg('menu') }} <div class="docs-right-aside__title">
Table of contents On this page
</div> </div>
<div class="docs-aside"> <div class="docs-right-aside__section-wrapper">
<div class="docs-aside__section-wrapper"> <section class="docs-right-aside__section">
{% for firstLevelPage in menu %} <a class="docs-right-aside__section-title">
<section class="docs-aside__section"> Fast access link
<a {% if page is defined and page._id == firstLevelPage._id%} class="docs-aside__section-title docs-aside__current" {% else %} class="docs-aside__section-title" {% endif %} {% if firstLevelPage.uri %} href="/{{ firstLevelPage.uri }}" {% else %} href="/page/{{ firstLevelPage._id }}" {% endif %}> </a>
{{ firstLevelPage.title | striptags }} </section>
</a> <section class="docs-right-aside__section">
{% if firstLevelPage.children is not empty %} <a class="docs-right-aside__section-title docs-right-aside__current">
<ul class="docs-aside__section-list"> Hawk roadmap
{% for child in firstLevelPage.children %} </a>
<li> </section>
<a {% if page is defined and page._id == child._id %} class="docs-aside__current" {% endif %} {% if child.uri %} href="/{{ child.uri }}" {% else %} href="/page/{{ child._id }}" {% endif %}> <section class="docs-right-aside__section">
{{ child.title | striptags }} <a class="docs-right-aside__section-title">
</a> The third section with long title for several lines of text
</li> </a>
{% endfor %} </section>
</ul>
{% endif %}
</section>
{% endfor %}
</div> </div>
<a class="docs-aside__logo-wrapper" href="https://github.com/codex-team/codex.docs">
<div class="logo">
{{ svg('aside-logo') }}
</div>
<div class="caption">
<span>Powered by CodeX Docs</span>
</div>
</a>
</div> </div>

6
src/backend/views/layout.twig
View file

@ -24,10 +24,10 @@
<div class="docs__content-inner"> <div class="docs__content-inner">
{% block body %}{% endblock %} {% block body %}{% endblock %}
</div> </div>
</div> <aside class="docs__right-aside">
<aside class="docs__right-aside">
{% include "components/rightAside.twig" %} {% include "components/rightAside.twig" %}
</aside> </aside>
</div>
</div> </div>
<script src="/dist/main.bundle.js"></script> <script src="/dist/main.bundle.js"></script>
{% if config.yandexMetrikaId is not empty %} {% if config.yandexMetrikaId is not empty %}

58
src/frontend/styles/components/aside.pcss
View file

@ -1,4 +1,4 @@
.docs-aside { .docs-left-aside {
font-size: 14px; font-size: 14px;
letter-spacing: 0.01em; letter-spacing: 0.01em;
display: flex; display: flex;
@ -104,3 +104,59 @@
margin-right: 10px; margin-right: 10px;
} }
} }
.docs-right-aside {
padding-left: 22px;
border-left: solid 1px var(--color-line-gray);
font-size: 14px;
letter-spacing: 0.01em;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
&__title {
padding: 0px 6px;
font-size: 16px;
line-height: 21px;
font-weight: 600;
margin-bottom: 16px;
}
a {
color: inherit;
text-decoration: none;
border-radius: 8px;
&:hover {
background-color: var(--color-link-hover);
}
}
&__section-wrapper {
flex-grow: 1;
overflow: auto;
padding-left: 8px;
}
&__section {
margin-bottom: 6px;
&:last-of-type {
margin-bottom: 0;
}
&-title {
display: inline-block;
font-size: 14px;
line-height: 21px;
font-weight: 400;
max-width: var(--layout-width-aside);
white-space: wrap;
padding: 4px 8px;
}
}
&__current {
background-color: var(--color-link-hover) !important;
}
}