Добавил MouseHelpPage

client/components/Reader/ClickMapPage/ClickMapPage.vue

@@ -1,6 +1,6 @@
 <template>
-    <div ref="page" class="page">
-        <div v-html="mapHtml"></div>
+    <div ref="page" class="map-page">
+        <div class="content" v-html="mapHtml"></div>
     </div>
 </template>
 
@@ -21,7 +21,7 @@ class ClickMapPage extends Vue {
     }
 
     get mapHtml() {
-        let result = '<div style="display: flex; width: 100%; height: 100%; position: absolute;">';
+        let result = '<div style="flex: 1; display: flex;">';
 
         let px = 0;
         for (const x in clickMap) {
@@ -34,7 +34,7 @@ class ClickMapPage extends Vue {
                 for (const t of text)
                     divText += `<span>${t}</span>`;
                 div += `<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; ` +
-                    `height: ${y - py}%; border: 1px solid white; font-size: ${this.fontSize}">${divText}</div>`;
+                    `height: ${y - py}%; border: 1px solid white; font-size: ${this.fontSize}; line-height: 100%;">${divText}</div>`;
                 py = y;
             }
 
@@ -57,20 +57,24 @@ class ClickMapPage extends Vue {
 </script>
 
 <style scoped>
-.page {
+.map-page {
     position: absolute;
     width: 100%;
     height: 100%;
-    z-index: 45;
+    z-index: 19;
     background-color: rgba(0, 0, 0, 0.9);
     color: white;
     display: flex;
 }
 
+.content {
+    flex: 1;
+    display: flex;
+}
 </style>
 <style>
 @keyframes click-map-disappear {
-  0%   { opacity: 0.9; }
-  100% { opacity: 0; }
+    0%   { opacity: 0.9; }
+    100% { opacity: 0; }
 }
 </style>

client/components/Reader/HelpPage/HelpPage.vue

@@ -14,6 +14,7 @@
                         <HotkeysHelpPage></HotkeysHelpPage>
                     </el-tab-pane>
                     <el-tab-pane label="Мышь/тачпад">
+                        <MouseHelpPage></MouseHelpPage>
                     </el-tab-pane>
                     <el-tab-pane label="Помочь проекту">
                     </el-tab-pane>
@@ -32,12 +33,14 @@ import Component from 'vue-class-component';
 import Window from '../../share/Window.vue';
 import CommonHelpPage from './CommonHelpPage/CommonHelpPage.vue';
 import HotkeysHelpPage from './HotkeysHelpPage/HotkeysHelpPage.vue';
+import MouseHelpPage from './MouseHelpPage/MouseHelpPage.vue';
 
 export default @Component({
     components: {
         Window,
         CommonHelpPage,
         HotkeysHelpPage,
+        MouseHelpPage,
     },
 })
 class HelpPage extends Vue {

client/components/Reader/HelpPage/MouseHelpPage/MouseHelpPage.vue

@@ -0,0 +1,54 @@
+<template>
+    <div class="page">
+        <h4>Управление с помощью мыши/тачпада:</h4>
+        <ul>
+            <li><b>ЛКМ/ТАЧ</b> - активация действия:</li>
+                <div class="click-map-page"><ClickMapPage ref="clickMapPage"></ClickMapPage></div>
+            <li><b>ПКМ</b> - показать/скрыть панель управления</li>
+            <li><b>СКМ</b> - вкл./выкл. плавный скроллинг текста</li>
+        </ul>
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+import ClickMapPage from '../../ClickMapPage/ClickMapPage.vue';
+
+export default @Component({
+    components: {
+        ClickMapPage,
+    },
+})
+class MouseHelpPage extends Vue {
+    created() {
+    }
+
+    mounted() {
+        this.$refs.clickMapPage.fontSize = '100%';
+    }
+}
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.page {
+    flex: 1;
+    padding: 15px;
+    overflow-y: auto;
+    font-size: 150%;
+    line-height: 130%;
+}
+
+h4 {
+    margin: 0;
+}
+
+.click-map-page {
+    position: relative;
+    width: 400px;
+    height: 400px;
+}
+</style>