1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-07-27 09:09:44 +02:00

Table of content (#199)

* Create nodemon.json

* Add table of content

* update view

* remove logs

* update tags var

* update layout

* Revert "update layout"

This reverts commit 18aad62257.

* update layout

* Update layout.pcss

* update from master

* Update sidebar.twig

* remove non valued changes

* Update table-of-content.js

* Update table-of-content.pcss

* Update table-of-content.pcss

* Update layout.pcss

* Update table-of-content.js

* remove unused styles

* not module

* rename var

* remove log

* update structure

* Update table-of-content.js

* Update table-of-content.js

* Update layout.pcss

* Update table-of-content.js

* try not to use intersection observer

* Update table-of-content.js

* fix scroll padding

* fix header component layout

* update logic

* fix click area

* Update table-of-content.js

* Update table-of-content.js

* small fixes

* remove unused

* Update table-of-content.js

* Update decorators.js

* Update table-of-content.js

* Update table-of-content.js

* Update table-of-content.js

* Update table-of-content.js

* Update table-of-content.js

* fix scroll issues, resolve eslit ts/js conflicts

* add some todos

* handle up-direction scroll as well

* optimization

* update offsets

* Update header.pcss

Co-authored-by: Peter Savchenko <specc.dev@gmail.com>
This commit is contained in:
Taly 2022-07-26 18:49:30 +03:00 committed by GitHub
parent 13cc53e4ae
commit 213f9d89a3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 630 additions and 999 deletions

View file

@ -1,3 +1,7 @@
html {
scroll-padding-top: calc(var(--layout-height-header) + 50px);
}
.docs-header {
display: flex;
justify-content: space-between;
@ -6,7 +10,6 @@
border-bottom: 1px solid var(--color-line-gray);
font-size: 18px;
flex-wrap: wrap;
position: relative;
height: var(--layout-height-header);
box-sizing: border-box;
position: sticky;

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);
@ -157,7 +157,7 @@
height: 24px;
transition-property: background-color;
transition-duration: 0.1s;
@apply --squircle;
@media (--can-hover) {
@ -178,7 +178,7 @@
color: var(--color-text-second);
padding: 20px 15px;
border-bottom: 1px solid var(--color-line-gray);
@media (--desktop) {
display: none;
}
@ -217,4 +217,4 @@
}
}
}
}

View file

@ -0,0 +1,58 @@
.table-of-content {
border-left: 1px solid var(--color-line-gray);
padding-left: var(--layout-padding-horizontal);
height: 100%;
overflow: auto;
padding: var(--layout-padding-vertical) var(--layout-padding-horizontal);
box-sizing: border-box;
&__header {
font-size: 16px;
font-weight: 600;
line-height: 21px;
letter-spacing: -0.01em;
margin-bottom: 12px;
padding: 0 6px;
}
&__list {
margin: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0;
list-style: none;
gap: 6px;
&-item {
@apply --squircle;
&:hover {
background-color: var(--color-link-hover);
cursor: pointer;
}
&--active {
background-color: var(--color-link-hover);
}
&--indent-1x { margin-left: 6px; }
&--indent-2x { margin-left: 12px; }
&--indent-3x { margin-left: 18px; }
&--indent-4x { margin-left: 24px; }
& > a {
padding: 4px 8px;
display: block;
font-size: 14px;
letter-spacing: -0.01em;
line-height: 150%;
}
}
}
}