This repository has been archived by the owner on May 13, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
bylineMultiple.vue
89 lines (83 loc) · 2.35 KB
/
bylineMultiple.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<template>
<footer class="post-full-footer">
<section class="post-full-authors">
<div class="post-full-authors-content">
<p>This post was a collaboration between</p>
<p>
<!-- FIXME Add comma after first author -->
<a
v-for="author in author"
:key="author.name"
:href="'/author/' + author.id"
>{{ author.name }}</a>
</p>
</div>
<ul class="author-list" v-on:mouseleave="hideAuthorCard">
<!-- FIXME Appear only single card on hover -->
<li
v-on:mouseover="authorCardHovered = authorUsername"
v-for="author in author"
:key="author.name"
class="author-list-item"
>
<div :class="{'author-card': true, hovered: authorCardHovered === authorUsername }">
<div class="basic-info">
<img
v-if="author.image"
class="author-profile-image"
:src="author.image"
:alt="author.name"
>
<div v-else class="author-profile-image">
<Avatar/>
</div>
<h2>{{ author.name }}</h2>
</div>
<div class="bio">
<div v-if="author.bio">
<p>{{ author.bio }}</p>
<p>
<a :href="'/author/' + author.id">More posts</a>
by {{ author.name }}.
</p>
</div>
<p v-else>
Read
<a :href="'/author/' + author.id">more posts</a> by this author.
</p>
</div>
</div>
<a v-if="author.image" :href="'/author/' + author.id" class="moving-avatar">
<img class="author-profile-image" :src="author.image" :alt="author.name">
</a>
<a v-else :href="'/author/' + author.id" class="moving-avatar author-profile-image">
<Avatar/>
</a>
</li>
</ul>
</section>
</footer>
</template>
<script>
import Avatar from "./icons/Avatar";
export default {
data: () => {
return {
authorCardHovered: ""
};
},
props: {
author: Array
},
components: {
Avatar
},
methods: {
hideAuthorCard() {
setTimeout(() => {
this.authorCardHovered = "";
}, 800);
}
}
};
</script>