From 04a326c0e416dd571941328f39c0c98f9fe4e1ae Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Tue, 12 Jul 2022 15:51:43 +0700
Subject: [PATCH] =?UTF-8?q?=D0=A0=D0=B0=D0=B1=D0=BE=D1=82=D0=B0=20=D0=BD?=
 =?UTF-8?q?=D0=B0=D0=B4=20=D0=B3=D1=80=D1=83=D0=BF=D0=BF=D0=B8=D1=80=D0=BE?=
 =?UTF-8?q?=D0=B2=D0=BA=D0=BE=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RecentBooksPage/RecentBooksPage.vue       | 39 ++++++++++++++-----
 1 file changed, 29 insertions(+), 10 deletions(-)

diff --git a/client/components/Reader/RecentBooksPage/RecentBooksPage.vue b/client/components/Reader/RecentBooksPage/RecentBooksPage.vue
index be7d5129..d45453b8 100644
--- a/client/components/Reader/RecentBooksPage/RecentBooksPage.vue
+++ b/client/components/Reader/RecentBooksPage/RecentBooksPage.vue
@@ -50,28 +50,39 @@
                         </div>
                     </div>
 
-                    <div class="row-part column items-stretch clickable" :style="{ 'width': (350 - 40*(+item.inGroup)) + 'px' }" style="font-size: 75%" @click="loadBook(item)">
+                    <div class="row-part column items-stretch clickable break-word" :style="{ 'width': (350 - 40*(+item.inGroup)) + 'px' }" style="font-size: 75%" @click="loadBook(item)">
                         <div class="row" style="font-size: 80%">
-                            <div class="row justify-center row-info-panel" style="width: 30px">
+                            <div class="row justify-center row-info-top" style="width: 30px">
                                 {{ item.num }}
                             </div>
-                            <div class="row justify-center row-info-panel" style="width: 130px">
+                            <div class="row justify-center row-info-top" style="width: 130px">
                                 Читался: {{ item.touchTime }}
                             </div>
-                            <div class="row justify-center row-info-panel" style="width: 138px">
+                            <div class="row justify-center row-info-top" style="width: 138px">
                                 Загружен: {{ item.loadTime }}
                             </div>
-                            <div class="row justify-center row-info-panel" style="width: 1px">
+                            <div class="row justify-center row-info-top" style="width: 1px">
                             </div>
                         </div>
 
-                        <div class="column col q-mt-xs break-word">
+                        <div class="col q-mt-xs" :style="{ 'width': (340 - 40*(+item.inGroup)) + 'px' }">
                             <div class="text-green-10" style="font-size: 105%">
                                 {{ item.desc.author }}
                             </div>
                             <div>{{ item.desc.title }}</div>
                         </div>
 
+                        <div class="row q-mt-xs" style="font-size: 80%">
+                            <div class="row justify-center row-info-bottom" style="width: 50px">
+                                {{ item.desc.perc }}
+                            </div>
+                            <div class="row justify-center row-info-bottom" style="width: 50px">
+                                {{ item.desc.textLen }}
+                            </div>
+                            <div class="row justify-center row-info-bottom" style="width: 1px">
+                            </div>
+                        </div>
+
                         <div class="read-bar" :style="`width: ${(340 - 40*(+item.inGroup))*item.readPart}px`"></div>
                     </div>
 
@@ -273,8 +284,8 @@ class RecentBooksPage {
                 const p = (book.bookPosSeen ? book.bookPosSeen : (book.bookPos ? book.bookPos : 0));
                 if (book.textLength) {
                     readPart = p/book.textLength;
-                    perc = ` [${(readPart*100).toFixed(2)}%]`;
-                    textLen = ` ${Math.round(book.textLength/1000)}k`;
+                    perc = `${(readPart*100).toFixed(2)}%`;
+                    textLen = `${Math.round(book.textLength/1000)}k`;
                 }
 
                 const bt = utils.getBookTitle(book.fb2);
@@ -288,7 +299,9 @@ class RecentBooksPage {
                     loadTime,
                     desc: {
                         author,
-                        title: `${title}${perc}${textLen}`,
+                        title,
+                        perc,
+                        textLen,
                     },
                     readPart,
                     url: book.url,
@@ -630,9 +643,15 @@ export default vueComponent(RecentBooksPage);
     transform: rotate(90deg);
 }
 
-.row-info-panel {
+.row-info-top {
     line-height: 110%;
     border-left: 1px solid #cccccc;
     border-bottom: 1px solid #cccccc;
 }
+
+.row-info-bottom {
+    line-height: 110%;
+    border: 1px solid #cccccc;
+    border-right: 0;
+}
 </style>