deadcxap/liberama
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Поправка разметки

Browse Source
This commit is contained in:
Book Pauk
2022-07-13 23:47:55 +07:00
parent d4788439cb
commit a1dea514b7
1 changed files with 40 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
client/components/Reader/RecentBooksPage/RecentBooksPage.vue
View File

@@ -100,12 +100,17 @@
</div> </div>
</div> </div>
<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-part column items-stretch clickable break-word" @click="loadBook(item)">
<div class="col" style="border: 1px solid #cccccc; border-bottom: 0; padding: 4px" :style="{ 'width': (340 - 40*(+item.inGroup)) + 'px' }"> <div
<div class="text-green-10" style="font-size: 105%"> class="col" style="border: 1px solid #cccccc; border-bottom: 0; padding: 4px; line-height: 140%;"
:style="{ 'width': (380 - 40*(+item.inGroup)) + 'px' }"
>
<div class="text-green-10" style="font-size: 80%">
{{ item.desc.author }} {{ item.desc.author }}
</div> </div>
<div>{{ item.desc.title }}</div> <div style="font-size: 75%">
{{ item.desc.title }}
</div>
</div> </div>
<div class="row" style="font-size: 10px"> <div class="row" style="font-size: 10px">
@@ -113,7 +118,7 @@
{{ item.desc.textLen }} {{ item.desc.textLen }}
</div> </div>
<div class="row items-center row-info-top" :style="`width: ${(220 - 40*(+item.inGroup))}px; padding: 1px`"> <div class="row items-center row-info-top" :style="`width: ${(260 - 40*(+item.inGroup))}px; padding: 1px`">
<div class="read-bar" :style="`width: ${100*item.readPart}%`"></div> <div class="read-bar" :style="`width: ${100*item.readPart}%`"></div>
</div> </div>
@@ -124,7 +129,7 @@
</div> </div>
</div> </div>
<div class="row" style="font-size: 10px" :style="{ 'width': (340 - 40*(+item.inGroup)) + 'px' }"> <div class="row" style="font-size: 10px" :style="{ 'width': (380 - 40*(+item.inGroup)) + 'px' }">
<div class="row justify-center items-center row-info-bottom" style="width: 30px"> <div class="row justify-center items-center row-info-bottom" style="width: 30px">
{{ item.num }} {{ item.num }}
</div> </div>
@@ -141,21 +146,27 @@
</div> </div>
</div> </div>
<div class="row-part column justify-center" style="width: 80px; font-size: 75%"> <div
class="row-part column"
style="width: 90px;"
>
<div
class="col column justify-center"
style="font-size: 75%; padding-left: 6px; border: 1px solid #cccccc; border-left: 0;"
>
<div> <div>
<a v-show="isUrl(item.url)" :href="item.url" target="_blank">Оригинал</a><br><br> <a v-show="isUrl(item.url)" :href="item.url" target="_blank">Оригинал</a><br><br>
<a :href="item.path" @click.prevent="downloadBook(item.path, item.fullTitle)">Скачать FB2</a> <a :href="item.path" @click.prevent="downloadBook(item.path, item.fullTitle)">Скачать FB2</a>
</div> </div>
</div> </div>
<div class="row-part column justify-center"> <div
<q-btn class="del-button self-end row justify-center items-center clickable"
dense style="position: absolute; border-left: 1px solid #cccccc; border-bottom: 1px solid #cccccc;"
style="width: 30px; height: 30px; padding: 7px 0 7px 0; margin-left: 4px"
@click="handleDel(item.key)" @click="handleDel(item.key)"
> >
<q-icon class="la la-times" size="14px" /> <q-icon class="la la-times" size="12px" />
</q-btn> </div>
</div> </div>
</div> </div>
</q-virtual-scroll> </q-virtual-scroll>
@@ -606,7 +617,7 @@ export default vueComponent(RecentBooksPage);
} }
.row-part { .row-part {
padding: 4px 4px 4px 4px; padding: 4px 0px 4px 0px;
} }
.clickable { .clickable {
@@ -614,7 +625,6 @@ export default vueComponent(RecentBooksPage);
} }
.break-word { .break-word {
line-height: 180%;
overflow-wrap: break-word; overflow-wrap: break-word;
word-wrap: break-word; word-wrap: break-word;
white-space: normal; white-space: normal;
@@ -671,4 +681,15 @@ export default vueComponent(RecentBooksPage);
height: 4px; height: 4px;
background-color: #bbbbbb; background-color: #bbbbbb;
} }
.del-button {
width: 20px;
height: 20px
}
.del-button:hover {
color: white;
background-color: #FF3030;
}
</style> </style>