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

Cleanup classnames

Browse source
This commit is contained in:
Tanya Fomina 2022-06-10 15:17:12 +08:00
parent 9436e339cb
commit 14297ed852
3 changed files with 29 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/backend/views/components/sidebar.twig
View file

@ -1,13 +1,11 @@
{% set mainClass = 'docs-sidebar' %}
<div data-module="sidebar" class="{{mainClass}}__wrapper">
<div data-module="sidebar" class="docs-sidebar">
<div class="docs-sidebar__toggler">
{{ svg('menu') }} Table of contents
</div>
<aside class="{{mainClass}} docs-sidebar--hidden">
<aside class="docs-sidebar__content docs-sidebar__content--hidden">
{% for firstLevelPage in menu %}
<section class="docs-sidebar__section" data-id="{{firstLevelPage._id}}">
<a

10
src/frontend/js/modules/sidebar.js
View file

@ -24,8 +24,8 @@ export default class Sidebar {
sectionListCollapsed: 'docs-sidebar__section-list--collapsed',
sectionListItemActive: 'docs-sidebar__section-list-item--active',
sidebarToggler: 'docs-sidebar__toggler',
sidebar: 'docs-sidebar',
sidebarHidden: 'docs-sidebar--hidden',
sidebarContent: 'docs-sidebar__content',
sidebarContentHidden: 'docs-sidebar__content--hidden',
};
}
@ -64,7 +64,7 @@ export default class Sidebar {
this.setSectionCollapsed(section, togglerEl, true, false);
}
});
this.nodes.sidebar = moduleEl.querySelector('.' + Sidebar.CSS.sidebar);
this.nodes.sidebarContent = moduleEl.querySelector('.' + Sidebar.CSS.sidebarContent);
this.nodes.toggler = moduleEl.querySelector('.' + Sidebar.CSS.sidebarToggler);
this.nodes.toggler.addEventListener('click', () => this.toggleSidebar());
this.ready();
@ -128,7 +128,7 @@ export default class Sidebar {
* @returns {void}
*/
toggleSidebar() {
this.nodes.sidebar.classList.toggle(Sidebar.CSS.sidebarHidden);
this.nodes.sidebarContent.classList.toggle(Sidebar.CSS.sidebarContentHidden);
}
/**
@ -137,6 +137,6 @@ export default class Sidebar {
* @returns {void}
*/
ready() {
this.nodes.sidebar.classList.remove(Sidebar.CSS.sidebarHidden);
this.nodes.sidebarContent.classList.remove(Sidebar.CSS.sidebarContentHidden);
}
}

42
src/frontend/styles/components/sidebar.pcss
View file

@ -1,28 +1,33 @@
.docs-sidebar {
border-bottom: 1px solid var(--color-line-gray);
box-sizing: border-box;
padding: 30px 22px;
position: sticky;
top: var(--layout-height-header);
display: flex;
flex-direction: column;
overflow: auto;
width: 100vw;
@media (--desktop) {
height: calc(100vh - var(--layout-height-header));
border-right: 1px solid var(--color-line-gray);
border-bottom: 0;
padding-bottom: 0;
width: 344px;
}
&__wrapper {
width: 100vw;
&__content {
border-bottom: 1px solid var(--color-line-gray);
box-sizing: border-box;
padding: 30px 22px;
position: sticky;
top: var(--layout-height-header);
display: flex;
flex-direction: column;
overflow: auto;
@media (--desktop) {
width: 344px;
height: calc(100vh - var(--layout-height-header));
border-right: 1px solid var(--color-line-gray);
border-bottom: 0;
padding-bottom: 0;
}
&--hidden {
display: none;
}
}
&__section {
overflow: hidden;
flex-shrink: 0;
@ -147,9 +152,6 @@
}
}
&--hidden {
display: none;
}
&__toggler {
font-size: 13px;