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

fix: fix visibility on mobile layout

Browse source 
* fix visibility on mobile layout
* change keyboard shortcut
* change css property
This commit is contained in:
Yeokyung Yoon 2022-07-21 22:40:53 +09:00
parent 95969ce276
commit 6cd5d87dcc
4 changed files with 37 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -17,7 +17,6 @@
"editor-upgrade": "yarn add -D @editorjs/{editorjs,header,code,delimiter,list,link,image,table,inline-code,marker,warning,checklist,raw}@latest"
},
"dependencies": {
"@codexteam/shortcuts": "^1.1.1",
"config": "^3.3.6",
"cookie-parser": "^1.4.5",
"csurf": "^1.11.0",

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

@ -1,5 +1,4 @@
import { Storage } from '../utils/storage';
import Shortcut from '@codexteam/shortcuts';
/**
* Local storage key
@ -64,7 +63,8 @@ export default class Sidebar {
this.sidebarVisibilityStorage = new Storage(SIDEBAR_VISIBILITY_KEY);
const storedVisibility = this.sidebarVisibilityStorage.get();
this.visibility = storedVisibility !== 'false';
this.isVisible = storedVisibility !== 'false';
this.keys = {};
}
/**
@ -189,22 +189,37 @@ export default class Sidebar {
* @returns {void}
*/
initSidebar() {
if (!this.visibility) {
this.nodes.slider.classList.add(Sidebar.CSS.sidebarSliderHidden);
if (!this.isVisible) {
this.nodes.sidebar.classList.add(Sidebar.CSS.sidebarCollapsed);
}
// prevent sidebar animation on page load
/**
* prevent sidebar animation on page load
* Since animated class contains transition, hiding will be animated with it
* To prevent awkward animation when visibility is set to false, we need to remove animated class
*/
setTimeout(() => {
this.nodes.sidebar.classList.add(Sidebar.CSS.sidebarAnimated);
}, 200);
// add shortcut to slide sidebar
const shortcutForSlider = new Shortcut({
name: 'CMD+SHIFT+S',
on: document.body,
callback: () => this.handleSliderClick(),
});
// add event listener to execute keyboard shortcut
document.body.addEventListener('keydown', (e) => this.executeSlide(e), false);
document.body.addEventListener('keyup', (e) => this.executeSlide(e), false);
}
/**
* @param {KeyboardEvent} event - keydown event
* @returns {void}
*/
executeSlide(event) {
this.keys[event.key.toLowerCase()] = event.type === 'keydown';
/**
* Execute slide when ctrl + . is pressed
*/
if (this.keys['control'] && this.keys['.']) {
this.handleSliderClick();
}
}
/**
@ -213,8 +228,8 @@ export default class Sidebar {
* @returns {void}
*/
handleSliderClick() {
this.visibility = !this.visibility;
this.sidebarVisibilityStorage.set(this.visibility);
this.isVisible = !this.isVisible;
this.sidebarVisibilityStorage.set(this.isVisible);
this.nodes.sidebar.classList.toggle(Sidebar.CSS.sidebarCollapsed);
}

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

@ -4,24 +4,24 @@
&--animated {
.docs-sidebar__content {
transition: transform 200ms ease-in-out;
will-change: transform;
}
.docs-sidebar__slider {
transition: left 200ms ease-in-out;
svg {
transition: transform 200ms ease-in-out;
}
will-change: transform;
}
}
&--collapsed {
@media (--desktop) {
.docs-sidebar__content {
transform: translateX(-100%);
}
}
.docs-sidebar__slider {
left: 20px;
transform: translateX(20px);
svg {
transform: rotate(180deg);
@ -219,7 +219,7 @@
&__slider {
display: none;
position: fixed;
left: calc(var(--layout-sidebar-width) + 20px);
transform: translateX(calc(var(--layout-sidebar-width) + 20px));
bottom: 20px;
width: 32px;
height: 32px;

5
yarn.lock
View file

@ -907,11 +907,6 @@
resolved "https://registry.yarnpkg.com/@codexteam/misprints/-/misprints-1.0.0.tgz#e5a7dec7389fe0f176cd51a040d6dc9bdc252086"
integrity sha512-R2IO1JmcaWCuWNPFVEAyar2HqQFuJwkeQUyVF0ovY4ip7z+VnVTYWxeYhCx7eZYEQCyXmcJooICQDihtn16lOA==
"@codexteam/shortcuts@^1.1.1":
version "1.1.1"
resolved "https://registry.yarnpkg.com/@codexteam/shortcuts/-/shortcuts-1.1.1.tgz#6aa19ed0476da78045847ddc6d5b311f2f015094"
integrity sha512-wtpYocFlFQSOiea3KAySn9ONno/yKL4JukokV0vJUq1BOUmVEx71sdTW7qgQhG1wcfIO2R/XJ/y4K9EZQyBzng==
"@cspotcode/source-map-consumer@0.8.0":
version "0.8.0"
resolved "https://registry.yarnpkg.com/@cspotcode/source-map-consumer/-/source-map-consumer-0.8.0.tgz#33bf4b7b39c178821606f669bbc447a6a629786b"