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

Simplify css

Browse source
This commit is contained in:
Tanya Fomina 2022-06-10 15:37:09 +08:00
parent 14297ed852
commit 92e62158b1
2 changed files with 18 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -15,13 +15,12 @@ export default class Sidebar {
static get CSS() { static get CSS() {
return { return {
toggler: 'docs-sidebar__section-toggler', toggler: 'docs-sidebar__section-toggler',
togglerCollapsed: 'docs-sidebar__section-toggler--collapsed',
section: 'docs-sidebar__section', section: 'docs-sidebar__section',
sectionCollapsed: 'docs-sidebar__section--collapsed',
sectionAnimated: 'docs-sidebar__section--animated', sectionAnimated: 'docs-sidebar__section--animated',
sectionTitle: 'docs-sidebar__section-title', sectionTitle: 'docs-sidebar__section-title',
sectionTitleActive: 'docs-sidebar__section-title--active', sectionTitleActive: 'docs-sidebar__section-title--active',
sectionList: 'docs-sidebar__section-list', sectionList: 'docs-sidebar__section-list',
sectionListCollapsed: 'docs-sidebar__section-list--collapsed',
sectionListItemActive: 'docs-sidebar__section-list-item--active', sectionListItemActive: 'docs-sidebar__section-list-item--active',
sidebarToggler: 'docs-sidebar__toggler', sidebarToggler: 'docs-sidebar__toggler',
sidebarContent: 'docs-sidebar__content', sidebarContent: 'docs-sidebar__content',
@ -61,7 +60,7 @@ export default class Sidebar {
this.collapsed[id] = false; this.collapsed[id] = false;
} }
if (this.collapsed[id]) { if (this.collapsed[id]) {
this.setSectionCollapsed(section, togglerEl, true, false); this.setSectionCollapsed(section, true, false);
} }
}); });
this.nodes.sidebarContent = moduleEl.querySelector('.' + Sidebar.CSS.sidebarContent); this.nodes.sidebarContent = moduleEl.querySelector('.' + Sidebar.CSS.sidebarContent);
@ -83,7 +82,7 @@ export default class Sidebar {
event.preventDefault(); event.preventDefault();
this.collapsed[sectionId] = !this.collapsed[sectionId]; this.collapsed[sectionId] = !this.collapsed[sectionId];
window.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(this.collapsed)); window.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(this.collapsed));
this.setSectionCollapsed(sectionEl, togglerEl, this.collapsed[sectionId]); this.setSectionCollapsed(sectionEl, this.collapsed[sectionId]);
} }
/** /**
@ -92,17 +91,16 @@ export default class Sidebar {
* @param {HTMLElement} sectionEl - element of the section to toggle * @param {HTMLElement} sectionEl - element of the section to toggle
* @param {HTMLElement} togglerEl - section's toggler button element * @param {HTMLElement} togglerEl - section's toggler button element
* @param {boolean} collapsed - new collapsed state * @param {boolean} collapsed - new collapsed state
* @param {boolean} animated - true if state should change with animation * @param {boolean} [animated] - true if state should change with animation
*/ */
setSectionCollapsed(sectionEl, togglerEl, collapsed, animated = true) { setSectionCollapsed(sectionEl, collapsed, animated = true) {
togglerEl.classList.toggle(Sidebar.CSS.togglerCollapsed, collapsed);
const sectionList = sectionEl.querySelector('.' + Sidebar.CSS.sectionList); const sectionList = sectionEl.querySelector('.' + Sidebar.CSS.sectionList);
if (!sectionList) { if (!sectionList) {
return; return;
} }
sectionEl.classList.toggle(Sidebar.CSS.sectionAnimated, animated); sectionEl.classList.toggle(Sidebar.CSS.sectionAnimated, animated);
sectionList.classList.toggle(Sidebar.CSS.sectionListCollapsed, collapsed); sectionEl.classList.toggle(Sidebar.CSS.sectionCollapsed, collapsed);
/** /**
* Highlight section item as active if active child item is collapsed. * Highlight section item as active if active child item is collapsed.

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

@ -43,6 +43,18 @@
} }
} }
} }
&--collapsed {
.docs-sidebar__section-list {
max-height: 0;
}
.docs-sidebar__section-toggler {
svg {
transform: rotate(180deg);
}
}
}
} }
&__section:not(:first-child) { &__section:not(:first-child) {
@ -116,10 +128,6 @@
z-index: 1; z-index: 1;
position: relative; position: relative;
max-height: 1000px; max-height: 1000px;
&--collapsed {
max-height: 0;
}
} }
&__section-toggler { &__section-toggler {
@ -144,12 +152,6 @@
svg { svg {
display: block; display: block;
} }
&--collapsed {
svg {
transform: rotate(180deg);
}
}
} }