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

Merge branch 'fix-horizontal-scroll' into stage

Browse source
This commit is contained in:
Tanya Fomina 2022-09-09 15:53:08 +03:00
commit 692b5d1b17
3 changed files with 36 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/frontend/js/modules/writing.js
View file

@ -82,6 +82,11 @@ export default class Writing {
this.nodes.parentIdSelector = moduleEl.querySelector('[name="parent"]');
this.nodes.putAboveIdSelector = moduleEl.querySelector('[name="above"]');
this.nodes.uriInput = moduleEl.querySelector('[name="uri-input"]');
/**
* Set minimum margin left for main column to prevent editor controls from overlapping sidebar
*/
document.documentElement.style.setProperty('--main-col-min-margin-left', '50px');
};
/**

7
src/frontend/styles/components/writing.pcss
View file

@ -90,6 +90,13 @@
.tc-cell {
padding: 6px 8px;
}
@media (--desktop) {
.ce-block__content,
.ce-toolbar__content {
max-width: var(--layout-width-main-col);
}
}
}
.codex-editor__redactor .ce-block:first-of-type .ce-header {

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

@ -1,3 +1,11 @@
:root {
/**
* Allows to dynamically set main column minimun margin left.
* Is used for adding extra space for editor controls in page edit mode (otherwise controls overlap sidebar)
*/
--main-col-min-margin-left: 0px;
}
.docs {
min-height: calc(100vh - var(--layout-height-header));
@ -18,6 +26,8 @@
&-inner {
max-width: var(--layout-width-main-col);
margin: 0 auto;
min-width: 0;
width: 100%;
@media (--desktop) {
margin-left: 0;
@ -28,15 +38,19 @@
&__content {
--max-space-between-cols: 160px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
max-width: calc(var(--layout-width-main-col) + var(--max-space-between-cols) + var(--layout-sidebar-width));
margin-left: max(0px, calc(50vw - var(--layout-sidebar-width) - var(--layout-width-main-col) / 2));
margin-right: auto;
padding: 20px var(--layout-padding-horizontal);
@media (--mobile) {
padding: 20px var(--layout-padding-horizontal);
@media (--desktop) {
max-width: min(
calc(var(--layout-width-main-col) + var(--max-space-between-cols) + var(--layout-sidebar-width)),
calc(100vw - var(--layout-sidebar-width))
);
margin-left: max(var(--main-col-min-margin-left), calc(50vw - var(--layout-sidebar-width) - var(--layout-width-main-col) / 2) - var(--layout-padding-horizontal));
margin-right: auto;
padding: 0;
}
}
@ -55,6 +69,10 @@
@media (--desktop) {
display: block;
}
&:empty {
display: none;
}
}
&-sidebar {