pixelfed/resources/assets/components/partials/placeholders/TimelineOnboarding.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>