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

Browse source
This commit is contained in:
Umang G. Patel 2022-06-04 23:28:59 +05:30
parent 71344fe33b
commit b598e0679b
5 changed files with 50 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

0
src/backend/views/components/aside.twig → src/backend/views/components/leftAside.twig
View file

34
src/backend/views/components/rightAside.twig Normal file
View file

@ -0,0 +1,34 @@
<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>
<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>

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

@ -17,14 +17,17 @@
<body> <body>
{% include "components/header.twig" with res.locals.isAuthorized %} {% include "components/header.twig" with res.locals.isAuthorized %}
<div class="docs"> <div class="docs">
<aside class="docs__aside"> <aside class="docs__left-aside">
{% include "components/aside.twig" %} {% include "components/leftAside.twig" %}
</aside> </aside>
<div class="docs__content"> <div class="docs__content">
<div class="docs__content-inner"> <div class="docs__content-inner">
{% block body %}{% endblock %} {% block body %}{% endblock %}
</div> </div>
</div> </div>
<aside class="docs__right-aside">
{% include "components/rightAside.twig" %}
</aside>
</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 %}

1
src/frontend/styles/components/header.pcss
View file

@ -7,6 +7,7 @@
font-size: 18px; font-size: 18px;
flex-wrap: wrap; flex-wrap: wrap;
position: fixed; position: fixed;
top: 0;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
z-index: 2; z-index: 2;

15
src/frontend/styles/layout.pcss
View file

@ -1,10 +1,9 @@
.docs { .docs {
display: flex;
@media (--mobile) { @media (--mobile) {
flex-wrap: wrap; flex-wrap: wrap;
} }
&__aside { &__left-aside {
width: var(--layout-width-aside); width: var(--layout-width-aside);
padding: 0px 22px; padding: 0px 22px;
border-right: solid 1px var(--color-line-gray); border-right: solid 1px var(--color-line-gray);
@ -24,8 +23,6 @@
} }
&__content { &__content {
flex-grow: 2;
word-wrap: break-word;
margin-top: var(--layout-height-header); margin-top: var(--layout-height-header);
@media (--mobile) { @media (--mobile) {
@ -39,7 +36,15 @@
} }
} }
&__aside, &__right-aside {
padding: 0px 22px;
position: fixed;
top: var(--layout-height-header);
right: 0;
}
&__left-aside,
&__right-aside,
&__content { &__content {
padding-top: var(--layout-padding-vertical); padding-top: var(--layout-padding-vertical);