[+] Add links
This commit is contained in:
@@ -7,11 +7,15 @@
|
|||||||
|
|
||||||
<div class="friends" v-if="friends">
|
<div class="friends" v-if="friends">
|
||||||
<div class="friend card clickable" v-for="f in friends" :key="f.name" @click="click(f)">
|
<div class="friend card clickable" v-for="f in friends" :key="f.name" @click="click(f)">
|
||||||
<!-- :style="{'background-image': `url(${f.banner})`}">-->
|
|
||||||
<div class="banner" :style="bgStyle(f)"></div>
|
<div class="banner" :style="bgStyle(f)"></div>
|
||||||
<img class="avatar" :src="f.avatar" alt="">
|
<img class="avatar" :src="f.avatar" alt="">
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<div class="name">{{ f.name }}</div>
|
<div class="name">{{ f.name }}</div>
|
||||||
|
<div class="space"></div>
|
||||||
|
<div class="links">
|
||||||
|
<a v-if="f.twitter" :href="`https://twitter.com/${f.twitter}`"><i class="fab fa-twitter"></i></a>
|
||||||
|
<a v-if="f.github" :href="`https://github.com/${f.github}`"><i class="fab fa-github"></i></a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -29,6 +33,10 @@ export interface Friend {
|
|||||||
banner: string
|
banner: string
|
||||||
|
|
||||||
desc?: string
|
desc?: string
|
||||||
|
|
||||||
|
twitter?: string
|
||||||
|
github?: string
|
||||||
|
blog?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
@Options({components: {}})
|
@Options({components: {}})
|
||||||
@@ -96,12 +104,18 @@ export default class Friends extends Vue
|
|||||||
.info
|
.info
|
||||||
z-index: 10
|
z-index: 10
|
||||||
display: flex
|
display: flex
|
||||||
flex-direction: column
|
align-items: end
|
||||||
justify-content: end
|
width: 100%
|
||||||
|
|
||||||
.name
|
.name
|
||||||
font-size: 1.2em
|
font-size: 1.2em
|
||||||
|
|
||||||
|
.space
|
||||||
|
flex-grow: 1
|
||||||
|
|
||||||
|
a
|
||||||
|
color: $color-text-main
|
||||||
|
|
||||||
.avatar
|
.avatar
|
||||||
margin-top: calc(#{$top} - #{$img} / 2 - 20px)
|
margin-top: calc(#{$top} - #{$img} / 2 - 20px)
|
||||||
width: $img
|
width: $img
|
||||||
|
|||||||
Reference in New Issue
Block a user