diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss index 7071af54..6ece42a9 100644 --- a/src/assets/css/style.scss +++ b/src/assets/css/style.scss @@ -70,6 +70,7 @@ html.dark { --toolbar-width: 40vw; --panel-width: 380rem; --toolbar-height: 48rem; + --panel-margin-left: calc(50% - var(--practice-wrapper-padding-right) / 2 + var(--toolbar-width) / 2 + 9vw); } .footer { .bottom { @@ -93,6 +94,7 @@ html.dark { --panel-width: 30vw; --toolbar-width: 50vw; --toolbar-height: 40rem; + --panel-margin-left: calc(50% - var(--practice-wrapper-padding-right) / 2 + var(--toolbar-width) / 2 + 9vw); } .footer { diff --git a/src/components/Practice/Practice.vue b/src/components/Practice/Practice.vue index ad9395d4..ff1f741c 100644 --- a/src/components/Practice/Practice.vue +++ b/src/components/Practice/Practice.vue @@ -108,6 +108,10 @@ function toggleConciseMode() { settingStore.showPanel = !settingStore.showPanel } +function togglePanel() { + settingStore.showPanel = !settingStore.showPanel +} + onMounted(() => { emitter.on(EventKey.next, next) emitter.on(EventKey.write, write) @@ -123,6 +127,7 @@ onMounted(() => { emitter.on(ShortcutKey.OpenDictDetail, openDictDetail) emitter.on(ShortcutKey.ToggleTheme, toggleTheme) emitter.on(ShortcutKey.ToggleConciseMode, toggleConciseMode) + emitter.on(ShortcutKey.TogglePanel, togglePanel) practiceRef.getCurrentPractice() }) @@ -141,7 +146,7 @@ onUnmounted(() => { emitter.off(ShortcutKey.OpenDictDetail, openDictDetail) emitter.off(ShortcutKey.ToggleTheme, toggleTheme) emitter.off(ShortcutKey.ToggleConciseMode, toggleConciseMode) - + emitter.off(ShortcutKey.TogglePanel, togglePanel) }) @@ -153,7 +158,7 @@ onUnmounted(() => {