Улучшение вида списков

client/components/Search/AuthorList/AuthorList.vue

@@ -60,9 +60,9 @@
                             <div v-if="book.showAllBooks" class="book-row column">
                                 <BookView
                                     v-for="seriesBook in book.allBooks" :key="seriesBook.id"
-                                    :book="seriesBook" :genre-map="genreMap"
-                                    show-author
-                                    :show-read-link="showReadLink"
+                                    :book="seriesBook"
+                                    mode="series"
+                                    :genre-map="genreMap" :show-read-link="showReadLink"
                                     :title-color="isFoundSeriesBook(book, seriesBook) ? 'text-blue-10' : 'text-red'"
                                     @book-event="bookEvent"
                                 />
@@ -70,7 +70,7 @@
                             <div v-else class="book-row column">
                                 <BookView 
                                     v-for="seriesBook in book.seriesBooks" :key="seriesBook.key"
-                                    :book="seriesBook" :genre-map="genreMap" :show-read-link="showReadLink" @book-event="bookEvent"
+                                    :book="seriesBook" mode="author" :genre-map="genreMap" :show-read-link="showReadLink" @book-event="bookEvent"
                                 />
                             </div>
 
@@ -101,7 +101,7 @@
                         </div>
                     </div>
                     <!-- книга без серии -->
-                    <BookView v-else :book="book" :genre-map="genreMap" :show-read-link="showReadLink" @book-event="bookEvent" />
+                    <BookView v-else :book="book" mode="author" :genre-map="genreMap" :show-read-link="showReadLink" @book-event="bookEvent" />
                 </div>
 
                 <!--div v-if="isExpandedAuthor(item) && item.books && !item.books.length" class="book-row row items-center">

client/components/Search/BookView/BookView.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="row items-center q-my-sm">
-        <div class="row items-center no-wrap">
+    <div class="row items-center q-my-sm no-wrap">
+        <div class="row items-center">
             <div v-if="showRates || showDeleted">
                 <div v-if="showRates && !book.del">
                     <div v-if="book.librate">
@@ -31,7 +31,7 @@
                 </div>
             </div>
 
-            <div v-if="!titleList" class="q-ml-sm row items-center">
+            <!--div v-if="!titleList" class="q-ml-sm row items-center">
                 {{ book.serno ? `${book.serno}. ` : '' }}
                 <div v-if="showAuthor && book.author">
                     <span class="clickable2 text-green-10" @click="selectAuthor">{{ bookAuthor }}</span>
@@ -53,31 +53,50 @@
                         <span class="clickable2" @click="selectSeries">{{ bookSeries }}</span>
                     </div>
                 </div>
-            </div>
+            </div-->
         </div>
 
-        <div class="q-ml-sm">
-            {{ bookSize }}, {{ book.ext }}
-        </div>
+        <div class="q-ml-sm column">
+            <div v-if="(mode == 'series' || mode == 'title') && bookAuthor" class="row items-center clickable2 text-green-10">
+                {{ bookAuthor }}
+            </div>
 
-        <div class="q-ml-sm clickable" @click="download">
-            (скачать)
-        </div>
+            <div class="row items-center">
+                <div v-if="book.serno" class="q-mr-xs">
+                    {{ book.serno }}.
+                </div>
+                <div class="clickable2" :class="titleColor" @click="selectTitle">
+                    {{ book.title }}
+                </div>
+                <div v-if="mode == 'title' && bookSeries" class="q-ml-xs clickable2" @click="selectSeries">
+                    {{ bookSeries }}
+                </div>
 
-        <div class="q-ml-sm clickable" @click="copyLink">
-            <q-icon name="la la-copy" size="20px" />
-        </div>
 
-        <div v-if="showReadLink" class="q-ml-sm clickable" @click="readBook">
-            (читать)
-        </div>
+                <div class="q-ml-sm">
+                    {{ bookSize }}, {{ book.ext }}
+                </div>
 
-        <div v-if="showGenres && book.genre" class="q-ml-sm">
-            {{ bookGenre }}
-        </div>
+                <div class="q-ml-sm clickable" @click="download">
+                    (скачать)
+                </div>
+
+                <div class="q-ml-sm clickable" @click="copyLink">
+                    <q-icon name="la la-copy" size="20px" />
+                </div>
+
+                <div v-if="showReadLink" class="q-ml-sm clickable" @click="readBook">
+                    (читать)
+                </div>
+
+                <div v-if="showGenres && book.genre" class="q-ml-sm">
+                    {{ bookGenre }}
+                </div>
 
-        <div v-if="showDates && book.date" class="q-ml-sm">
-            {{ bookDate }}
+                <div v-if="showDates && book.date" class="q-ml-sm">
+                    {{ bookDate }}
+                </div>
+            </div>
         </div>
 
         <div v-show="false">
@@ -105,10 +124,9 @@ class BookView {
     _options = componentOptions;
     _props = {
         book: Object,
+        mode: String,
         genreMap: Object,
-        showAuthor: Boolean,
         showReadLink: Boolean,
-        titleList: Boolean,
         titleColor: { type: String, default: 'text-blue-10'},
     };
 
@@ -135,9 +153,9 @@ class BookView {
     }
 
     get bookAuthor() {
-        if ((this.showAuthor || this.titleList) && this.book.author) {
+        if (this.book.author) {
             let a = this.book.author.split(',');
-            return a.slice(0, 2).join(', ') + (a.length > 2 ? ' и др.' : '');
+            return a.slice(0, 3).join(', ') + (a.length > 3 ? ' и др.' : '');
         }
 
         return '';
@@ -145,7 +163,7 @@ class BookView {
 
     get bookSeries() {
         if (this.book.series) {
-            return `(${this.book.series})`;
+            return `(Серия: ${this.book.series})`;
         }
 
         return '';

client/components/Search/SeriesList/SeriesList.vue

@@ -39,18 +39,17 @@
                 <div v-if="item.showAllBooks" class="book-row column">
                     <BookView
                         v-for="seriesBook in item.allBooks" :key="seriesBook.id"
-                        :book="seriesBook" :genre-map="genreMap"
-                        show-author
-                        :show-read-link="showReadLink"
+                        :book="seriesBook" 
+                        mode="series"
+                        :genre-map="genreMap" :show-read-link="showReadLink"
                         :title-color="isFoundSeriesBook(item, seriesBook) ? 'text-blue-10' : 'text-red'"
                         @book-event="bookEvent"
                     />
                 </div>
                 <div v-else class="book-row column">
                     <BookView 
-                        v-for="seriesBook in item.books" :key="seriesBook.key"
-                        show-author
-                        :book="seriesBook" :genre-map="genreMap" :show-read-link="showReadLink" @book-event="bookEvent"
+                        v-for="seriesBook in item.books" :key="seriesBook.key"                        
+                        :book="seriesBook" mode="series" :genre-map="genreMap" :show-read-link="showReadLink" @book-event="bookEvent"
                     />
                 </div>
 

client/components/Search/TitleList/TitleList.vue

@@ -9,15 +9,14 @@
         <div v-for="item in tableData" :key="item.key" class="column" :class="{'odd-item': item.num % 2}" style="font-size: 120%">
             <BookView
                 class="q-ml-md"
-                title-list
-                :book="item.book" :genre-map="genreMap" :show-read-link="showReadLink" @book-event="bookEvent"
+                :book="item.book" mode="title" :genre-map="genreMap" :show-read-link="showReadLink" @book-event="bookEvent"
             />
             <BookView
                 v-for="book in item.books" :key="book.id"
-                :book="book" :genre-map="genreMap"
                 class="q-ml-md"
-                title-list
-                :show-read-link="showReadLink"
+                :book="book"
+                mode="title"
+                :genre-map="genreMap" :show-read-link="showReadLink"
                 @book-event="bookEvent"
             />
         </div>