191 lines
6.4 KiB
Vue
191 lines
6.4 KiB
Vue
<template>
|
|
<v-card
|
|
flat
|
|
color="rgba(0, 0, 0, 0)"
|
|
class="content-container mx-0 pt-2 px-2"
|
|
>
|
|
<v-row
|
|
no-gutters
|
|
v-if="$store.getters.author.name.trim() !== ''"
|
|
>
|
|
<v-col
|
|
style="min-width: 316px; max-width: 316px;"
|
|
cols="12"
|
|
sm="6"
|
|
md="4"
|
|
lg="3"
|
|
xl="2"
|
|
>
|
|
<v-card
|
|
flat
|
|
tile
|
|
width="298"
|
|
height="127"
|
|
color="rgba(0, 0, 0, 0)"
|
|
class="pa-2 ma-2 d-flex"
|
|
>
|
|
<v-row
|
|
no-gutters
|
|
style="flex-wrap: nowrap;"
|
|
>
|
|
<v-col cols="5">
|
|
<v-img
|
|
:src="$store.getters.author.image"
|
|
height="95px"
|
|
width="95px"
|
|
contain
|
|
class="author-image ma-2"
|
|
>
|
|
</v-img>
|
|
</v-col>
|
|
<v-col cols="7" class="px-2">
|
|
<div class="author-name">
|
|
<span class="font-weight-medium">{{ $store.getters.author.name }}</span>
|
|
</div>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card>
|
|
</v-col>
|
|
<v-col
|
|
cols="12"
|
|
sm="1"
|
|
style="min-width: 100px; max-width: 100%;"
|
|
class="flex-grow-1 flex-shrink-0 pa-2"
|
|
v-if="$store.getters.author.wiki.trim() !== ''"
|
|
>
|
|
<v-card class="pa-0 ma-0">
|
|
<v-expansion-panels>
|
|
<v-expansion-panel>
|
|
<v-expansion-panel-title>
|
|
Wikipedia
|
|
</v-expansion-panel-title>
|
|
<v-expansion-panel-text>
|
|
{{ $store.getters.author.wiki }}
|
|
</v-expansion-panel-text>
|
|
</v-expansion-panel>
|
|
</v-expansion-panels>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-divider class="my-4"/>
|
|
|
|
<v-card
|
|
v-for="(cycle, cycleName) in $store.getters.books"
|
|
:key="cycleName"
|
|
flat
|
|
tile
|
|
color="rgba(0, 0, 0, 0)"
|
|
class="d-flex align-content-start flex-wrap"
|
|
>
|
|
<v-card-title class="w-100" v-if="cycleName !== 'no_cycle'">{{ $t("cycle") }} «{{ cycleName }}»</v-card-title>
|
|
<v-card-text class="d-flex align-content-start flex-wrap pa-0 ma-0">
|
|
<v-row no-gutters>
|
|
<v-col
|
|
v-for="(item, index) in cycle"
|
|
:key="index"
|
|
cols="12"
|
|
sm="6"
|
|
md="4"
|
|
lg="3"
|
|
xl="2"
|
|
>
|
|
<v-card
|
|
hover
|
|
ripple
|
|
outlined
|
|
tile
|
|
height="127"
|
|
class="pa-2 ma-2 semi-transparent"
|
|
@click="bookClick(item)"
|
|
>
|
|
<v-row
|
|
no-gutters
|
|
style="flex-wrap: nowrap;"
|
|
>
|
|
<v-col
|
|
cols="5"
|
|
style="min-width: 127px; max-width: 127px;"
|
|
class="flex-grow-0 flex-shrink-0"
|
|
>
|
|
<v-img
|
|
:src="item.image"
|
|
height="95px"
|
|
width="95px"
|
|
contain
|
|
class="book-image ma-2"
|
|
>
|
|
</v-img>
|
|
</v-col>
|
|
<v-col
|
|
cols="1"
|
|
class="flex-grow-1 flex-shrink-0"
|
|
style="min-width: 80px; max-width: 100%"
|
|
>
|
|
<div class="book-title">
|
|
<span class=" text-center font-weight-medium">{{ item.title }}</span>
|
|
</div>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
<v-divider class="my-4"/>
|
|
</v-card>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script>
|
|
import { useDisplay } from "vuetify";
|
|
|
|
export default {
|
|
name: "BooksLib",
|
|
|
|
setup () {
|
|
const { smAndDown, smAndUp, xs, md, lg, xl } = useDisplay();
|
|
|
|
return {
|
|
smAndDown, smAndUp, xs, md, lg, xl
|
|
}
|
|
},
|
|
|
|
data: () => ({
|
|
}),
|
|
|
|
methods: {
|
|
bookClick (book) {
|
|
this.$emit("bookSelected", book, true);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.book
|
|
&-image
|
|
border-radius: 5px
|
|
border: none
|
|
&-title
|
|
height: 100%
|
|
line-height: 100px
|
|
text-align: center
|
|
> span
|
|
display: inline-block
|
|
vertical-align: middle
|
|
line-height: normal
|
|
|
|
.author
|
|
&-image
|
|
border-radius: 125px
|
|
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)
|
|
&-name
|
|
height: 100%
|
|
line-height: 100px
|
|
> span
|
|
display: inline-block
|
|
vertical-align: middle
|
|
line-height: normal
|
|
</style>
|