Styles now in SASS

Styles now in SASS. Node packages updated.

README.md

@@ -30,7 +30,9 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
 
 ## Library configuration
 lib/authors.json - Authors info
+
 file format:
+```
 [
     {
         "author": "Author 1 name",
@@ -44,9 +46,12 @@ file format:
         "image": "lib/Author N name/photo.png"
     }
 ]
+```
 
 lib/Author name/books.json - Books info
+
 file format:
+```
 [
     {
         "title": "Book 1 title",
@@ -60,9 +65,12 @@ file format:
         "book": "lib/Author name/Book N title/book.json"
     }
 ]
+```
 
 lib/Author name/Book title/book.json - Book info
+
 file format:
+```
 [
     {
         "book": "lib/Author name/Book title/chapter1.mp3",
@@ -74,3 +82,4 @@ file format:
         "title": "Chapter N title"
     }
 ]
+```

package.json

@@ -13,6 +13,8 @@
     "core-js": "^2.6.5",
     "crypto-js": "^3.1.9-1",
     "register-service-worker": "^1.6.2",
+    "sass": "^1.49.11",
+    "sass-loader": "^10",
     "vue": "^2.6.10",
     "vue-axios": "^2.1.4",
     "vue-i18n": "^8.11.2",

src/App.vue

@@ -148,7 +148,7 @@
                             <v-icon>mdi-skip-forward</v-icon>
                         </v-btn>
                     </v-list-tile-action>
-                    <v-flex xs6 sm3 md2>
+                    <v-flex xs6 sm4 md3>
                         <v-slider
                             :class="{ 'mr-3 ml-5': $vuetify.breakpoint.mdAndUp, 'ml-3' : $vuetify.breakpoint.mdAndDown }"
                             :min="0"
@@ -496,14 +496,14 @@
                 let aboutText = "";
                 if (userLocale == "ru") {
                     aboutText = "<p><center>Аудиотека</center></p>" +
-                        "<p><center>&copy; Александр Чебыкин, 2019</center></p>" +
+                        "<p><center>&copy; Александр Чебыкин, 2019-2022</center></p>" +
                         "<p><center>Опубликовано под лицензией <a href=\"https://opensource.org/licenses/MIT\" target=\"_blank\">MIT license</a></center></p>" +
-                        "<p><center>Git: <a href=\"https://home.cainet.info:3000/cai/AudioLib\" target=\"_blank\">https://home.cainet.info:3000/cai/AudioLib</a></center></p>";
+                        "<p><center>Git: <a href=\"https://www.cainet.info/git/cai/AudioLib\" target=\"_blank\">https://home.cainet.info/git/cai/AudioLib</a></center></p>";
                 } else {
                     aboutText = "<p><center>Audiobooks library</center></p>" +
-                        "<p><center>&copy; Alexander I Chebykin, 2019</center></p>" +
+                        "<p><center>&copy; Alexander I Chebykin, 2019-2022</center></p>" +
                         "<p><center>Published under <a href=\"https://opensource.org/licenses/MIT\" target=\"_blank\">MIT license</a></center></p>" +
-                        "<p><center>Git: <a href=\"https://home.cainet.info:3000/cai/AudioLib\" target=\"_blank\">https://home.cainet.info:3000/cai/AudioLib</a></center></p>";
+                        "<p><center>Git: <a href=\"https://www.cainet.info/git/cai/AudioLib\" target=\"_blank\">https://www.cainet.info/git/cai/AudioLib</a></center></p>";
                 }
                 this.showMessage(this.$t("about"), aboutText);
             },
@@ -524,17 +524,18 @@
     }
 </script>
 
-<style>
+<style lang="sass">
-    .loading-progress { margin: auto 15px; }
+    .loading-progress
+        margin: auto 15px
 
-    .player-interface {
+    .player-interface
-        position: fixed;
+        position: fixed
-        bottom: 0;
+        bottom: 0
-        width: 100%;
+        width: 100%
-    }
+
-    .player-interface .time-slider {
+        .time-slider
-        width: 100%;
+            width: 100%
-        margin: 0 0 -25px 0;
+            margin: 0 0 -25px 0
-    }
+    .to-top-button
-    .to-top-button { margin-bottom: 80px; }
+        margin-bottom: 80px
 </style>

src/components/Authors.vue

@@ -60,12 +60,12 @@
     }
 </script>
 
-<style>
+<style lang="sass" scoped>
-    .author-image {
+    .author-image
-        border-radius: 125px;
+        border-radius: 125px
-        border: solid #fff 2px;
+        border: solid #fff 2px
-        box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
+        box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)
-    }
 
-    .authors-container { min-height: calc(100vh - 190px); }
+    .authors-container
+        min-height: calc(100vh - 190px)
 </style>

src/components/Book.vue

@@ -215,13 +215,14 @@
     }
 </script>
 
-<style>
+<style lang="sass" scoped>
-    .author-image {
+    .author-image
-        display: inline-block;
+        display: inline-block
-        border-radius: 55px;
+        border-radius: 55px
-    }
 
-    .book-layout { min-height: calc(100vh - 190px); }
+    .book-layout
+        min-height: calc(100vh - 190px)
 
-    .f-left { float: left; }
+    .f-left
+        float: left
 </style>

src/components/Books.vue

@@ -96,17 +96,16 @@
     }
 </script>
 
-<style>
+<style lang="sass" scoped>
-    .author-image {
+    .author-image
-        display: inline-block;
+        display: inline-block
-        border-radius: 55px;
+        border-radius: 55px
-    }
 
-    .author-name {
+    .author-name
-        display: inline-block;
+        display: inline-block
-        position: absolute;
+        position: absolute
-        margin: 15px;
+        margin: 15px
-    }
 
-    .books-layout { min-height: calc(100vh - 250px); }
+    .books-layout
+        min-height: calc(100vh - 250px)
 </style>

src/plugins/vuetify.js

@@ -1,7 +1,7 @@
-import Vue from "vue"
+import Vue from "vue";
-import Vuetify from "vuetify/lib"
+import Vuetify from "vuetify/lib";
-import "vuetify/src/stylus/app.styl"
+import "vuetify/src/stylus/app.styl";
 
 Vue.use(Vuetify, {
     iconfont: "md",
-})
+});