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

update layout

Browse source
This commit is contained in:
Taly 2022-06-21 13:38:28 +03:00
parent 0d70f70075
commit 88c83142d0
10 changed files with 35 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/backend/views/components/sidebar-right.twig Normal file
View file

@ -0,0 +1 @@
<aside class="docs-sidebar--right" id="layout-sidebar-right"></aside>

5
src/backend/views/components/sidebar.twig
View file

@ -1,6 +1,4 @@
<div class="docs-sidebar" data-module="sidebar">
<div data-module="sidebar" class="docs-sidebar">
<div class="docs-sidebar__toggler"> <div class="docs-sidebar__toggler">
{{ svg('menu') }} Table of contents {{ svg('menu') }} Table of contents
</div> </div>
@ -50,6 +48,5 @@
</p> </p>
</a> </a>
</div> </div>
</aside> </aside>
</div> </div>

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

@ -16,18 +16,21 @@
</script> </script>
<body> <body>
{% include "components/header.twig" with res.locals.isAuthorized %} {% include "components/header.twig" with res.locals.isAuthorized %}
<div class="docs"> <div class="docs">
{% include "components/sidebar.twig" %} {% include "components/sidebar.twig" %}
<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__aside-right" id="layout-right-column"></aside>
{% include "components/sidebar-right.twig" %}
</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 %}
<script type="text/javascript" > <script type="text/javascript" >
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};

2
src/frontend/js/modules/page.js
View file

@ -48,7 +48,7 @@ export default class Page {
'h2.block-header--anchor,' + 'h2.block-header--anchor,' +
'h3.block-header--anchor,' + 'h3.block-header--anchor,' +
'h4.block-header--anchor', 'h4.block-header--anchor',
tocWrapperSelector: '#layout-right-column', tocWrapperSelector: '#layout-sidebar-right',
}); });
} }
} }

2
src/frontend/js/modules/table-of-content.js
View file

@ -100,7 +100,7 @@ export default class TableOfContent {
*/ */
initIntersectionObserver() { initIntersectionObserver() {
const options = { const options = {
rootMargin: '-5% 0 -80%', rootMargin: '-5% 0 -60%',
}; };
const callback = (entries) => { const callback = (entries) => {

16
src/frontend/styles/components/sidebar-right.pcss Normal file
View file

@ -0,0 +1,16 @@
.docs-sidebar--right {
@media (--mobile) {
display: none;
}
height: calc(100vh - var(--layout-height-header));
width: var(--layout-sidebar-width);
padding: var(--layout-padding-vertical) var(--layout-padding-horizontal);
box-sizing: border-box;
position: sticky;
top: var(--layout-height-header);
display: flex;
flex-direction: column;
overflow: auto;
}

10
src/frontend/styles/components/sidebar.pcss
View file

@ -1,6 +1,6 @@
.docs-sidebar { .docs-sidebar {
width: 100vw; width: 100vw;
@media (--desktop) { @media (--desktop) {
width: var(--layout-sidebar-width); width: var(--layout-sidebar-width);
} }
@ -14,7 +14,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: auto; overflow: auto;
@media (--desktop) { @media (--desktop) {
height: calc(100vh - var(--layout-height-header)); height: calc(100vh - var(--layout-height-header));
border-right: 1px solid var(--color-line-gray); border-right: 1px solid var(--color-line-gray);
@ -153,7 +153,7 @@
height: 24px; height: 24px;
transition-property: background-color; transition-property: background-color;
transition-duration: 0.1s; transition-duration: 0.1s;
@apply --squircle; @apply --squircle;
@media (--can-hover) { @media (--can-hover) {
@ -174,7 +174,7 @@
color: var(--color-text-second); color: var(--color-text-second);
padding: 20px 15px; padding: 20px 15px;
border-bottom: 1px solid var(--color-line-gray); border-bottom: 1px solid var(--color-line-gray);
@media (--desktop) { @media (--desktop) {
display: none; display: none;
} }
@ -213,4 +213,4 @@
} }
} }
} }

9
src/frontend/styles/components/table-of-content.pcss
View file

@ -1,12 +1,5 @@
.table-of-content { .table-of-content {
position: sticky; border-left: 1px solid var(--color-line-gray);
max-height: 100vh;
overflow-y: auto;
margin-top: 30px;
top: 30px;
width: 300px;
border-left: 1px solid #E8E8EB;
padding-left: 22px; padding-left: 22px;
&__header { &__header {

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

@ -21,13 +21,7 @@
} }
@media not (--mobile) { @media not (--mobile) {
margin-bottom: 80vh; margin-bottom: 50vh;
}
}
&__aside-right {
@media (--mobile) {
display: none;
} }
} }

2
src/frontend/styles/main.pcss
View file

@ -1,4 +1,5 @@
@import 'normalize.css'; @import 'normalize.css';
@import './vars.pcss'; @import './vars.pcss';
@import './layout.pcss'; @import './layout.pcss';
@import './carbon.pcss'; @import './carbon.pcss';
@ -9,6 +10,7 @@
@import './components/auth.pcss'; @import './components/auth.pcss';
@import './components/button.pcss'; @import './components/button.pcss';
@import './components/sidebar.pcss'; @import './components/sidebar.pcss';
@import './components/sidebar-right.pcss';
@import './components/table-of-content.pcss'; @import './components/table-of-content.pcss';
body { body {