Docker/codex.docs
Docker/codex.docs
1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-08-07 06:25:21 +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 data-module="sidebar" class="docs-sidebar">
<div class="docs-sidebar" data-module="sidebar">
<div class="docs-sidebar__toggler">
{{ svg('menu') }} Table of contents
</div>
@ -50,6 +48,5 @@
</p>
</a>
</div>
</aside>
</div>

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

@ -16,18 +16,21 @@
</script>
<body>
{% include "components/header.twig" with res.locals.isAuthorized %}
<div class="docs">
{% include "components/sidebar.twig" %}
<div class="docs__content">
<div class="docs__content-inner">
{% block body %}{% endblock %}
</div>
</div>
<aside class="docs__aside-right" id="layout-right-column"></aside>
{% include "components/sidebar-right.twig" %}
</div>
<script src="/dist/main.bundle.js"></script>
{% if config.yandexMetrikaId is not empty %}
<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)};

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

@ -48,7 +48,7 @@ export default class Page {
'h2.block-header--anchor,' +
'h3.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() {
const options = {
rootMargin: '-5% 0 -80%',
rootMargin: '-5% 0 -60%',
};
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 {
width: 100vw;
@media (--desktop) {
width: var(--layout-sidebar-width);
}
@ -14,7 +14,7 @@
display: flex;
flex-direction: column;
overflow: auto;
@media (--desktop) {
height: calc(100vh - var(--layout-height-header));
border-right: 1px solid var(--color-line-gray);
@ -153,7 +153,7 @@
height: 24px;
transition-property: background-color;
transition-duration: 0.1s;
@apply --squircle;
@media (--can-hover) {
@ -174,7 +174,7 @@
color: var(--color-text-second);
padding: 20px 15px;
border-bottom: 1px solid var(--color-line-gray);
@media (--desktop) {
display: none;
}
@ -213,4 +213,4 @@
}
}
}
}

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

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

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

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

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

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