Docker/codex.docs
Docker/codex.docs
1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-07-19 05:09:41 +02:00
Code Issues Releases Activity

Multiple fixes (#211)

Browse source 
* Fix horizontal scroll

* Attempt 2

* Fix merge issue

* Do not display right column if it's empty

* Fix editor width on empty page

* A fix

* Consider padding when calculating main column margin left

* Mobile layout fix

* Fix main column width in edit mode

* Edit mode content width fix

* Add comments

Co-authored-by: Peter Savchenko <specc.dev@gmail.com>
This commit is contained in:
Tanya 2022-09-09 16:27:23 +03:00 • committed by GitHub
parent caea20203b
commit c3125adf4b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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

@ -91,6 +91,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 {