mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-12-26 23:13:17 +00:00
106 lines
2.4 KiB
Vue
106 lines
2.4 KiB
Vue
|
<template>
|
||
|
|
<div class="timeline-onboarding">
|
||
|
|
<div class="card card-body shadow-sm mb-3 p-5" style="border-radius: 15px;">
|
||
|
|
<h1 class="text-center mb-4">✨ {{ $t('timeline.onboarding.welcome') }}</h1>
|
||
|
|
|
||
|
|
<p class="text-center mb-3" style="font-size: 22px;">
|
||
|
|
{{ $t('timeline.onboarding.thisIsYourHomeFeed') }}
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p class="text-center lead">{{ $t('timeline.onboarding.letUsHelpYouFind') }}</p>
|
||
|
|
|
||
|
|
<p v-if="newlyFollowed" class="text-center mb-0">
|
||
|
|
<a href="/i/web" class="btn btn-primary btn-lg primary font-weight-bold rounded-pill px-4" onclick="location.reload()">
|
||
|
|
{{ $t('timeline.onboarding.refreshFeed') }}
|
||
|
|
</a>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-12 col-md-6 mb-3" v-for="(profile, index) in popularAccounts">
|
||
|
|
<div class="card shadow-sm border-0 rounded-px">
|
||
|
|
<div class="card-body p-2">
|
||
|
|
<profile-card
|
||
|
|
:key="'pfc' + index"
|
||
|
|
:profile="profile"
|
||
|
|
class="w-100"
|
||
|
|
v-on:follow="follow(index)"
|
||
|
|
v-on:unfollow="unfollow(index)"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
import ProfileCard from './../profile/ProfileHoverCard.vue';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
profile: {
|
||
|
|
type: Object
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
components: {
|
||
|
|
"profile-card": ProfileCard
|
||
|
|
},
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
popularAccounts: [],
|
||
|
|
newlyFollowed: 0
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
mounted() {
|
||
|
|
this.fetchPopularAccounts();
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
fetchPopularAccounts() {
|
||
|
|
axios.get('/api/pixelfed/discover/accounts/popular')
|
||
|
|
.then(res => {
|
||
|
|
this.popularAccounts = res.data;
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
follow(index) {
|
||
|
|
axios.post('/api/v1/accounts/' + this.popularAccounts[index].id + '/follow')
|
||
|
|
.then(res => {
|
||
|
|
this.newlyFollowed++;
|
||
|
|
this.$store.commit('updateRelationship', [res.data]);
|
||
|
|
this.$emit('update-profile', {
|
||
|
|
'following_count': this.profile.following_count + 1
|
||
|
|
})
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
unfollow(index) {
|
||
|
|
axios.post('/api/v1/accounts/' + this.popularAccounts[index].id + '/unfollow')
|
||
|
|
.then(res => {
|
||
|
|
this.newlyFollowed--;
|
||
|
|
this.$store.commit('updateRelationship', [res.data]);
|
||
|
|
this.$emit('update-profile', {
|
||
|
|
'following_count': this.profile.following_count - 1
|
||
|
|
})
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.timeline-onboarding {
|
||
|
|
.profile-hover-card-inner {
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
.d-flex {
|
||
|
|
max-width: 100% !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|