Поправки порядка загрузки компонентов и сопутствующих багов

client/components/App.vue

@@ -47,14 +47,12 @@
 //-----------------------------------------------------------------------------
 import Vue from 'vue';
 import Component from 'vue-class-component';
+import * as utils from '../share/utils';
 
 export default @Component({
     watch: {
-        rootRoute: function() {
-            this.setAppTitle();
-            this.redirectIfNeeded();
-        },
         mode: function() {
+            this.setAppTitle();
             this.redirectIfNeeded();
         }
     },
@@ -123,6 +121,9 @@ class App extends Vue {
                 });
             }
         });
+
+        this.setAppTitle();
+        this.redirectIfNeeded();
     }
 
     toggleCollapse() {
@@ -201,15 +202,18 @@ class App extends Vue {
     }
 
     redirectIfNeeded() {
-        if ((this.mode == 'reader' || this.mode == 'omnireader') && (this.rootRoute != '/reader')) {
+        if ((this.mode == 'reader' || this.mode == 'omnireader') && (!this.isReaderActive)) {
             //старый url
             const search = window.location.search.substr(1);
-            const url = search.split('url=')[1] || '';
+            const s = search.split('url=');
+            const url = s[1] || '';
+            const q = utils.parseQuery(s[0] || '');
             if (url) {
-                window.location = `/#/reader?url=${url}`;
-            } else {
-                this.$router.replace('/reader');
+                q.url = decodeURIComponent(url);
             }
+
+            window.history.replaceState({}, '', '/');
+            this.$router.replace({ path: '/reader', query: q });
         }
 
         //yandex-метрика для omnireader

client/components/Reader/ProgressPage/ProgressPage.vue

@@ -94,6 +94,6 @@ class ProgressPage extends Vue {
 </style>
 <style>
 .el-progress__text {
-    color: lightgreen;
+    color: lightgreen !important;
 }
 </style>

client/components/Reader/Reader.vue

@@ -1036,7 +1036,7 @@ class Reader extends Vue {
     overflow-x: auto;
     overflow-y: hidden;
 }
-  
+
 .header {
     display: flex;
     justify-content: space-between;
@@ -1064,6 +1064,10 @@ class Reader extends Vue {
     box-shadow: 3px 3px 5px black;
 }
 
+.tool-button + .tool-button {
+    margin: 0 2px 0 2px;
+}
+
 .tool-button:hover {
     background-color: white;
 }

client/components/Reader/SettingsPage/SettingsPage.vue

@@ -871,9 +871,9 @@ class SettingsPage extends Vue {
 }
 
 .el-form-item {
-    padding: 0;
-    margin: 0;
-    margin-bottom: 5px;
+    padding: 0 !important;
+    margin: 0 !important;
+    margin-bottom: 5px !important;
 }
 
 .color-picked {

client/main.js

@@ -1,10 +1,10 @@
 import Vue from 'vue';
-import App from './components/App.vue';
 
 import router from './router';
 import store from './store';
 import './element';
 
+import App from './components/App.vue';
 //Vue.config.productionTip = false;
 
 new Vue({

client/router.js

@@ -2,21 +2,25 @@ import Vue from 'vue';
 import VueRouter from 'vue-router';
 import _ from 'lodash';
 
-import App from './components/App.vue';
+//немедленная загрузка
+import CardIndex from './components/CardIndex/CardIndex.vue';
+//const CardIndex = () => import('./components/CardIndex/CardIndex.vue');
 
-const CardIndex = () => import('./components/CardIndex/CardIndex.vue');
 const Search = () => import('./components/CardIndex/Search/Search.vue');
 const Card = () => import('./components/CardIndex/Card/Card.vue');
 const Book = () => import('./components/CardIndex/Book/Book.vue');
 const History = () => import('./components/CardIndex/History/History.vue');
 
-const Reader = () => import('./components/Reader/Reader.vue');
+//немедленная загрузка
+//const Reader = () => import('./components/Reader/Reader.vue');
+import Reader from './components/Reader/Reader.vue';
+
 //const Forum = () => import('./components/Forum/Forum.vue');
 const Income = () => import('./components/Income/Income.vue');
 const Sources = () => import('./components/Sources/Sources.vue');
 const Settings = () => import('./components/Settings/Settings.vue');
 const Help = () => import('./components/Help/Help.vue');
-const NotFound404 = () => import('./components/NotFound404/NotFound404.vue');
+//const NotFound404 = () => import('./components/NotFound404/NotFound404.vue');
 
 const myRoutes = [
     ['/', null, null, '/cardindex'],

client/share/utils.js

@@ -166,3 +166,27 @@ export function applyObjDiff(obj, diff, isAddChanged) {
 
     return result;
 }
+
+export function parseQuery(str) {
+    if (typeof str != 'string' || str.length == 0)
+        return {};
+    let s = str.split('&');
+    let s_length = s.length;
+    let bit, query = {}, first, second;
+
+    for (let i = 0; i < s_length; i++) {
+        bit = s[i].split('=');
+        first = decodeURIComponent(bit[0]);
+        if (first.length == 0)
+            continue;
+        second = decodeURIComponent(bit[1]);
+        if (typeof query[first] == 'undefined')
+            query[first] = second;
+        else
+            if (query[first] instanceof Array)
+                query[first].push(second);
+            else
+                query[first] = [query[first], second]; 
+    }
+    return query;
+}