Docker/codex.docs
Docker/codex.docs
1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-08-10 16:05:32 +02:00
Code Issues Releases Activity

removed the old changes

Browse source
This commit is contained in:
Umang G. Patel 2022-06-18 00:31:04 +05:30
parent 7dd2eefa42
commit 65c6ca1c44
6 changed files with 22 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,19 +1,19 @@
<div class="docs-aside-toggler" onclick="document.querySelector('.docs-left-aside').classList.toggle('docs-left-aside--toggled')"> <div class="docs-aside-toggler" onclick="document.querySelector('.docs-aside').classList.toggle('docs-aside--toggled')">
{{ svg('menu') }} {{ svg('menu') }}
Table of contents Table of contents
</div> </div>
<div class="docs-left-aside"> <div class="docs-aside">
<div class="docs-left-aside__section-wrapper"> <div class="docs-aside__section-wrapper">
{% for firstLevelPage in menu %} {% for firstLevelPage in menu %}
<section class="docs-left-aside__section"> <section class="docs-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 %}> <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 }} {{ firstLevelPage.title | striptags }}
</a> </a>
{% if firstLevelPage.children is not empty %} {% if firstLevelPage.children is not empty %}
<ul class="docs-left-aside__section-list"> <ul class="docs-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-left-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-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-left-aside__logo-wrapper" href="https://github.com/codex-team/codex.docs"> <a class="docs-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>

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

@ -1,22 +0,0 @@
<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>
</div>

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

@ -17,16 +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__left-aside"> <aside class="docs__aside">
{% include "components/leftAside.twig" %} {% include "components/aside.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"> <aside class="docs__aside-right">
{% include "components/rightAside.twig" %} <div class="table-of-content">
</div>
</aside> </aside>
</div> </div>
<script src="/dist/main.bundle.js"></script> <script src="/dist/main.bundle.js"></script>

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

@ -1,4 +1,4 @@
.docs-left-aside { .docs-aside {
font-size: 14px; font-size: 14px;
letter-spacing: 0.01em; letter-spacing: 0.01em;
display: flex; display: flex;
@ -105,7 +105,7 @@
} }
} }
.docs-right-aside { .table-of-content {
padding-left: 22px; padding-left: 22px;
border-left: solid 1px var(--color-line-gray); border-left: solid 1px var(--color-line-gray);
font-size: 14px; font-size: 14px;
@ -113,49 +113,6 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
background: red;
&__title { width: 100%;
padding: 0px 6px;
font-size: 16px;
line-height: 21px;
font-weight: 600;
margin-bottom: 12px;
}
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-right-title);
white-space: wrap;
padding: 4px 8px;
}
}
&__current {
background-color: var(--color-link-hover) !important;
}
} }

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

@ -2,10 +2,10 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-shrink: 0; flex-shrink: 0;
flex-wrap: wrap;
padding: 12px var(--layout-padding-horizontal); padding: 12px var(--layout-padding-horizontal);
border-bottom: 1px solid var(--color-line-gray); border-bottom: 1px solid var(--color-line-gray);
font-size: 18px; font-size: 18px;
flex-wrap: wrap;
position: fixed; position: fixed;
top: 0; top: 0;
box-sizing: border-box; box-sizing: border-box;

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

@ -3,7 +3,7 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
&__left-aside { &__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);
@ -36,7 +36,7 @@
} }
} }
&__right-aside { &__aside-right {
padding-left: var(--layout-right-aside-padding-left); padding-left: var(--layout-right-aside-padding-left);
padding-bottom: 30px; padding-bottom: 30px;
position: fixed; position: fixed;
@ -50,8 +50,8 @@
); );
} }
&__left-aside, &__aside,
&__right-aside, &__aside-right,
&__content { &__content {
padding-top: var(--layout-padding-vertical); padding-top: var(--layout-padding-vertical);