From ceccd234cdce2a5fded6a45a07522cfd7bed1bd4 Mon Sep 17 00:00:00 2001 From: Peter Savchenko Date: Tue, 13 Sep 2022 17:08:07 +0300 Subject: [PATCH 1/3] Increase content paddings (#257) * Increase content paddings * add margin to the page title --- src/frontend/styles/components/page.pcss | 1 + src/frontend/styles/components/sidebar.pcss | 22 +++++++++---- src/frontend/styles/layout.pcss | 36 +++++++++------------ src/frontend/styles/vars.pcss | 8 ++++- 4 files changed, 40 insertions(+), 27 deletions(-) diff --git a/src/frontend/styles/components/page.pcss b/src/frontend/styles/components/page.pcss index d100dae..f37596e 100644 --- a/src/frontend/styles/components/page.pcss +++ b/src/frontend/styles/components/page.pcss @@ -53,6 +53,7 @@ &__title { @apply --text-content-title; + margin-bottom: 10px; } .cdx-marker { diff --git a/src/frontend/styles/components/sidebar.pcss b/src/frontend/styles/components/sidebar.pcss index 94ecf9a..68efdc3 100644 --- a/src/frontend/styles/components/sidebar.pcss +++ b/src/frontend/styles/components/sidebar.pcss @@ -1,6 +1,15 @@ .docs-sidebar { width: 100vw; + /* Bottom and Left coord of the "Hide Sidebar" toggler */ + --hide-sidebar-toggler-offset: 11px; + --hide-sidebar-toggler-size: 28px; + + @media (--widest-desktop) { + --hide-sidebar-toggler-offset: var(--layout-padding-horizontal); + --hide-sidebar-toggler-size: 32px; + } + &--animated { .docs-sidebar__content { transition: transform 200ms ease-in-out; @@ -21,7 +30,7 @@ } .docs-sidebar__slider { - transform: translateX(20px); + transform: translateX(var(--hide-sidebar-toggler-offset)); svg { transform: rotate(180deg); @@ -228,15 +237,16 @@ &__slider { display: none; position: fixed; - transform: translateX(calc(var(--layout-sidebar-width) + 20px)); - bottom: 20px; - width: 32px; - height: 32px; - border-radius: 8px; + transform: translateX(calc(var(--layout-sidebar-width) + var(--hide-sidebar-toggler-offset))); + bottom: var(--hide-sidebar-toggler-offset); + width: var(--hide-sidebar-toggler-size); + height: var(--hide-sidebar-toggler-size); cursor: pointer; background-color: var(--color-link-hover); z-index: 10; + @apply --squircle; + @media (--desktop) { display: flex; justify-content: center; diff --git a/src/frontend/styles/layout.pcss b/src/frontend/styles/layout.pcss index e007950..8f6e899 100644 --- a/src/frontend/styles/layout.pcss +++ b/src/frontend/styles/layout.pcss @@ -14,15 +14,29 @@ } &__content { + --max-space-between-cols: 160px; + box-sizing: border-box; + display: flex; + justify-content: space-between; + padding: var(--layout-padding-vertical) var(--layout-padding-horizontal); flex-grow: 2; word-wrap: break-word; - @media (--mobile) { width: 100%; flex-basis: 100%; } + @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; + } + &-inner { max-width: var(--layout-width-main-col); margin: 0 auto; @@ -31,29 +45,11 @@ @media (--desktop) { margin-left: 0; - padding: var(--layout-padding-vertical) var(--layout-padding-horizontal); + padding: var(--layout-padding-vertical) var(--layout-padding-content-horizontal); } } } - &__content { - --max-space-between-cols: 160px; - box-sizing: border-box; - display: flex; - justify-content: space-between; - padding: var(--layout-padding-vertical) 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; - } - } - &__aside-right { width: var(--layout-sidebar-width); min-width: 160px; diff --git a/src/frontend/styles/vars.pcss b/src/frontend/styles/vars.pcss index a74e081..ac39fb5 100644 --- a/src/frontend/styles/vars.pcss +++ b/src/frontend/styles/vars.pcss @@ -40,7 +40,8 @@ */ --layout-padding-horizontal: 22px; --layout-padding-vertical: 30px; - --layout-sidebar-width: 290px; + --layout-padding-content-horizontal: 50px; + --layout-sidebar-width: 280px; --layout-width-main-col: 700px; --layout-height-header: 56px; @@ -48,6 +49,7 @@ --layout-padding-horizontal: 15px; --layout-padding-vertical: 15px; --layout-height-header: 88px; + --layout-padding-content-horizontal: var(--layout-padding-horizontal); } @media (--wide-desktop) { @@ -264,3 +266,7 @@ @custom-media --not-mobile all and (min-width: 981px); @custom-media --retina all and (-webkit-min-device-pixel-ratio: 1.5); @custom-media --can-hover all and (hover:hover); +/** + * Big screens that have additional space around the center column + */ +@custom-media --widest-desktop all and (min-width: 1470px); From 1cd078317e3276098aca4deda1fd9c2da92c556b Mon Sep 17 00:00:00 2001 From: Peter Savchenko Date: Tue, 13 Sep 2022 18:57:50 +0300 Subject: [PATCH 2/3] chore(styles): list and image blocks style improved (#260) * update image margings * upd list style --- src/frontend/styles/components/page.pcss | 14 +++++++++----- src/frontend/styles/components/writing.pcss | 4 ++++ 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/frontend/styles/components/page.pcss b/src/frontend/styles/components/page.pcss index f37596e..dd6d9f2 100644 --- a/src/frontend/styles/components/page.pcss +++ b/src/frontend/styles/components/page.pcss @@ -258,7 +258,11 @@ .block-list { margin: 0; list-style: outside; - padding-left: 26px; + padding-left: 40px; + + &--ordered { + list-style-type: decimal + } li:not(:last-of-type) { margin-bottom: 8px; @@ -270,8 +274,7 @@ * ================== */ .block-image { - margin: 40px auto; - text-align: center; + margin: 0 auto; &__content { img, video { @@ -298,8 +301,9 @@ } &__caption { - margin: 1em auto; - color: var(--color-text-second); + margin-top: 10px; + color: var(--color-text-second); + font-size: 0.9em; } } diff --git a/src/frontend/styles/components/writing.pcss b/src/frontend/styles/components/writing.pcss index c8b77e3..945c694 100644 --- a/src/frontend/styles/components/writing.pcss +++ b/src/frontend/styles/components/writing.pcss @@ -91,6 +91,10 @@ padding: 6px 8px; } + .cdx-list { + padding-left: 40px; + } + @media (--desktop) { .ce-block__content, .ce-toolbar__content { From 51fb6655e2c869a7004a2a84d9e2824b2c2bd72f Mon Sep 17 00:00:00 2001 From: Taly Date: Wed, 14 Sep 2022 13:27:31 +0300 Subject: [PATCH 3/3] Beautify terminal output (#261) * beautify terminal output - draw welcome banner on server starting - use minimal logs for webpack - disable verbose mode for nodemon resolves #240 * Update server.ts --- nodemon.json | 1 - src/bin/server.ts | 39 +++++++++++++++++++++++++++++++++++++++ webpack.config.js | 6 ++++++ 3 files changed, 45 insertions(+), 1 deletion(-) diff --git a/nodemon.json b/nodemon.json index 063c303..70b8ccc 100644 --- a/nodemon.json +++ b/nodemon.json @@ -1,5 +1,4 @@ { - "verbose": true, "ignore": [ ".git", "node_modules", diff --git a/src/bin/server.ts b/src/bin/server.ts index 3b67135..9f6c225 100644 --- a/src/bin/server.ts +++ b/src/bin/server.ts @@ -91,6 +91,45 @@ function onListening(): void { : 'port ' + addr.port; debug('Listening on ' + bind); + + drawBanner([ + `CodeX Docs server is running`, + ``, + `Main page: http://localhost:${port}` + ]); +} + +/** + * Draw banner in console with given text lines + * @param {string[]} lines + */ +function drawBanner(lines: string[]) { + /** Define banner parts */ + const PARTS = { + TOP_LEFT: '┌', + TOP_RIGHT: '┐', + BOTTOM_LEFT: '└', + BOTTOM_RIGHT: '┘', + HORIZONTAL: '─', + VERTICAL: '│', + SPACE: ' ', + } + + /** Calculate max line length */ + const maxLength = lines.reduce((max, line) => Math.max(max, line.length), 0); + + /** Prepare top line */ + const top = PARTS.TOP_LEFT + PARTS.HORIZONTAL.repeat(maxLength + 2) + PARTS.TOP_RIGHT; + + /** Compose middle lines */ + const middle = lines.map(line => PARTS.VERTICAL + ' ' + line + PARTS.SPACE.repeat(maxLength - line.length) + ' ' + PARTS.VERTICAL); + + /** Prepare bottom line */ + const bottom = PARTS.BOTTOM_LEFT + PARTS.HORIZONTAL.repeat(maxLength + 2) + PARTS.BOTTOM_RIGHT; + + console.log(top); + console.log(middle.join('\n')); + console.log(bottom); } export default { diff --git a/webpack.config.js b/webpack.config.js index 811aa0f..23cf2da 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -87,5 +87,11 @@ export default () => { optimization: { splitChunks: false, }, + + /** + * Show less logs while building + * https://webpack.js.org/configuration/stats/ + */ + stats: 'minimal' }; };