Docker/codex.docs
Docker/codex.docs
1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-08-08 06:55:26 +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') }}
Table of contents
</div>
<div class="docs-aside">
<div class="docs-aside__section-wrapper">
<div class="docs-left-aside">
<div class="docs-left-aside__section-wrapper">
{% for firstLevelPage in menu %}
<section class="docs-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 %}>
<section class="docs-left-aside__section">
<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 }}
</a>
{% if firstLevelPage.children is not empty %}
<ul class="docs-aside__section-list">
<ul class="docs-left-aside__section-list">
{% for child in firstLevelPage.children %}
<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 }}
</a>
</li>
@ -23,7 +23,7 @@
</section>
{% endfor %}
</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">
{{ svg('aside-logo') }}
</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')">
{{ svg('menu') }}
Table of contents
</div>
<div class="docs-aside">
<div class="docs-aside__section-wrapper">
{% for firstLevelPage in menu %}
<section class="docs-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 %}>
{{ firstLevelPage.title | striptags }}
</a>
{% if firstLevelPage.children is not empty %}
<ul class="docs-aside__section-list">
{% for child in firstLevelPage.children %}
<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 %}>
{{ child.title | striptags }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</section>
{% endfor %}
<div class="docs-right-aside">
<div class="docs-right-aside__title">
On this page
</div>
<div class="docs-right-aside__section-wrapper">
<section class="docs-right-aside__section">
<a class="docs-right-aside__section-title">
Fast access link
</a>
</section>
<section class="docs-right-aside__section">
<a class="docs-right-aside__section-title docs-right-aside__current">
Hawk roadmap
</a>
</section>
<section class="docs-right-aside__section">
<a class="docs-right-aside__section-title">
The third section with long title for several lines of text
</a>
</section>
</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>

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

@ -24,10 +24,10 @@
<div class="docs__content-inner">
{% block body %}{% endblock %}
</div>
</div>
<aside class="docs__right-aside">
<aside class="docs__right-aside">
{% include "components/rightAside.twig" %}
</aside>
</aside>
</div>
</div>
<script src="/dist/main.bundle.js"></script>
{% 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;
letter-spacing: 0.01em;
display: flex;
@ -104,3 +104,59 @@
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;
}
}