91 lines
2.7 KiB
Vue
91 lines
2.7 KiB
Vue
<template>
|
|
<v-card
|
|
flat
|
|
tile
|
|
color="rgba(0, 0, 0, 0)"
|
|
class="d-flex align-content-start flex-wrap content-container mx-0 pt-2 px-2"
|
|
>
|
|
<v-row no-gutters>
|
|
<v-col
|
|
v-for="(item, index) in $store.getters.authors"
|
|
: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="authorClick(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="author-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="author-name">
|
|
<span class=" text-center font-weight-medium">{{ item.author }}</span>
|
|
</div>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "AuthorsLib",
|
|
|
|
data: () => ({
|
|
}),
|
|
|
|
methods: {
|
|
authorClick (author) {
|
|
this.$emit("authorSelected", author, true);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.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
|
|
text-align: center
|
|
> span
|
|
display: inline-block
|
|
vertical-align: middle
|
|
line-height: normal
|
|
</style>
|