|
@@ -1,196 +1,14 @@
|
|
|
<template>
|
|
|
<div class="web-wrapper">
|
|
|
- <div v-if="isLoaded" class="container-fluid mt-3">
|
|
|
+ <div class="container-fluid mt-3">
|
|
|
<div class="row">
|
|
|
<div class="col-md-4 col-lg-3">
|
|
|
<sidebar :user="profile" />
|
|
|
</div>
|
|
|
|
|
|
- <div v-if="tab == 'index'" class="col-md-8 col-lg-9 mt-n4">
|
|
|
- <div v-if="profile.is_admin" class="d-md-flex my-md-3">
|
|
|
- <grid-card
|
|
|
- :dark="true"
|
|
|
- :title="'Hello ' + profile.username"
|
|
|
- subtitle="Welcome to the new Discover experience! Only admins can see this"
|
|
|
- button-text="Manage Discover Settings"
|
|
|
- button-link="/i/web/discover/settings"
|
|
|
- icon-class="fal fa-cog"
|
|
|
- :small="true" />
|
|
|
- </div>
|
|
|
- <!-- <section class="mb-1 mb-md-3 mb-lg-4">
|
|
|
- <news-slider />
|
|
|
- </section> -->
|
|
|
-
|
|
|
- <!-- <discover-spotlight /> -->
|
|
|
-
|
|
|
- <!-- <div class="d-md-flex my-md-3">
|
|
|
- <grid-card
|
|
|
- :dark="true"
|
|
|
- title="The Not So Trending"
|
|
|
- subtitle="Explore the posts that deserve more attention"
|
|
|
- button-text="Explore posts"
|
|
|
- icon-class="fal fa-analytics"
|
|
|
- button-link="/i/web/discover/future-trending"
|
|
|
- :button-event="true"
|
|
|
- v-on:btn-click="toggleTab('trending')"
|
|
|
- :small="true" />
|
|
|
-
|
|
|
- <grid-card
|
|
|
- title="Behind The Posts"
|
|
|
- subtitle="Discover the people"
|
|
|
- button-text="Discover People"
|
|
|
- button-link="/i/web/discover/people"
|
|
|
- icon-class="fal fa-user-friends"
|
|
|
- :small="true" />
|
|
|
- </div> -->
|
|
|
-
|
|
|
- <daily-trending v-on:btn-click="toggleTab('trending')"/>
|
|
|
-
|
|
|
- <!-- <div class="d-md-flex my-md-3">
|
|
|
- <grid-card
|
|
|
- title="Explore Loops"
|
|
|
- subtitle="Loops are short, looping videos"
|
|
|
- button-text="Explore Loops"
|
|
|
- icon-class="fal fa-camcorder"
|
|
|
- button-link="/i/web/discover/loops"
|
|
|
- :small="false" />
|
|
|
-
|
|
|
- <grid-card
|
|
|
- :dark="true"
|
|
|
- title="Popular Places"
|
|
|
- subtitle="Explore posts by popular locations"
|
|
|
- button-text="Explore Popular Places"
|
|
|
- icon-class="fal fa-map"
|
|
|
- :button-event="true"
|
|
|
- v-on:btn-click="toggleTab('popular-places')"
|
|
|
- button-link="/i/web/discover/popular-places"
|
|
|
- :small="false" />
|
|
|
- </div> -->
|
|
|
-
|
|
|
- <div class="d-md-flex my-md-3">
|
|
|
- <grid-card
|
|
|
- v-if="config.hashtags.enabled"
|
|
|
- :dark="true"
|
|
|
- title="My Hashtags"
|
|
|
- subtitle="Explore posts tagged with hashtags you follow"
|
|
|
- button-text="Explore Posts"
|
|
|
- button-link="/i/web/discover/my-hashtags"
|
|
|
- icon-class="fal fa-hashtag"
|
|
|
- :small="false" />
|
|
|
-
|
|
|
- <grid-card
|
|
|
- v-if="config.memories.enabled"
|
|
|
- title="My Memories"
|
|
|
- subtitle="A distant look back"
|
|
|
- button-text="View Memories"
|
|
|
- button-link="/i/web/discover/my-memories"
|
|
|
- icon-class="fal fa-history"
|
|
|
- :small="false" />
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="d-md-flex my-md-3">
|
|
|
- <grid-card
|
|
|
- v-if="config.insights.enabled"
|
|
|
- title="Account Insights"
|
|
|
- subtitle="Get a rich overview of your account activity and interactions"
|
|
|
- button-text="View Account Insights"
|
|
|
- icon-class="fal fa-user-circle"
|
|
|
- button-link="/i/web/discover/account-insights"
|
|
|
- :small="false" />
|
|
|
-
|
|
|
- <grid-card
|
|
|
- v-if="config.friends.enabled"
|
|
|
- :dark="true"
|
|
|
- title="Find Friends"
|
|
|
- subtitle="Find accounts to follow based on common interests"
|
|
|
- button-text="Find Friends & Followers"
|
|
|
- button-link="/i/web/discover/find-friends"
|
|
|
- icon-class="fal fa-user-plus"
|
|
|
- :small="false" />
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="d-md-flex my-md-3">
|
|
|
- <grid-card
|
|
|
- v-if="config.server.enabled && config.server.domains && config.server.domains.length"
|
|
|
- :dark="true"
|
|
|
- title="Server Timelines"
|
|
|
- subtitle="Browse timelines of a specific remote instance"
|
|
|
- button-text="Browse Server Feeds"
|
|
|
- icon-class="fal fa-list"
|
|
|
- button-link="/i/web/discover/server-timelines"
|
|
|
- :small="false" />
|
|
|
-
|
|
|
- <!-- <grid-card
|
|
|
- title="Curate the Spotlight"
|
|
|
- subtitle="Apply to curate the spotlight for one week"
|
|
|
- button-text="Apply to Curate Spotlight"
|
|
|
- button-link="/i/web/discover/spotlight/curate/apply"
|
|
|
- icon-class="fal fa-thumbs-up"
|
|
|
- :small="false" /> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div v-else-if="tab == 'trending'" class="col-md-8 col-lg-9 mt-n4">
|
|
|
+ <div class="col-md-8 col-lg-9 mt-n4">
|
|
|
<discover :profile="profile" />
|
|
|
</div>
|
|
|
-
|
|
|
- <div v-else-if="tab == 'popular-places'" class="col-md-8 col-lg-9 mt-n4">
|
|
|
- <section class="mt-3 mb-5 section-explore">
|
|
|
- <div class="profile-timeline">
|
|
|
- <div class="row p-0 mt-5">
|
|
|
- <div class="col-12 mb-4 d-flex justify-content-between align-items-center">
|
|
|
- <p class="d-block d-md-none h1 font-weight-bold mb-0 font-default">Popular Places</p>
|
|
|
- <p class="d-none d-md-block display-4 font-weight-bold mb-0 font-default">Popular Places</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="row mt-5">
|
|
|
- <div class="col-12 col-md-12 mb-3">
|
|
|
- <div class="card-img big">
|
|
|
- <img src="/img/places/nyc.jpg">
|
|
|
- <div class="title font-default">New York City</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="col-12 col-md-6 mb-3">
|
|
|
- <div class="card-img">
|
|
|
- <img src="/img/places/edmonton.jpg">
|
|
|
- <div class="title font-default">Edmonton</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="col-12 col-md-6 mb-3">
|
|
|
- <div class="card-img">
|
|
|
- <img src="/img/places/paris.jpg">
|
|
|
- <div class="title font-default">Paris</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="col-12 col-md-4 mb-3">
|
|
|
- <div class="card-img">
|
|
|
- <img src="/img/places/london.jpg">
|
|
|
- <div class="title font-default">London</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="col-12 col-md-4 mb-3">
|
|
|
- <div class="card-img">
|
|
|
- <img src="/img/places/vancouver.jpg">
|
|
|
- <div class="title font-default">Vancouver</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="col-12 col-md-4 mb-3">
|
|
|
- <div class="card-img">
|
|
|
- <img src="/img/places/toronto.jpg">
|
|
|
- <div class="title font-default">Toronto</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
- </div>
|
|
|
-
|
|
|
</div>
|
|
|
|
|
|
<drawer />
|
|
@@ -201,205 +19,23 @@
|
|
|
<script type="text/javascript">
|
|
|
import Drawer from './partials/drawer.vue';
|
|
|
import Sidebar from './partials/sidebar.vue';
|
|
|
- import Rightbar from './partials/rightbar.vue';
|
|
|
import Discover from './sections/DiscoverFeed.vue';
|
|
|
- import DiscoverNewsSlider from './partials/discover/news-slider.vue';
|
|
|
- import DiscoverSpotlight from './partials/discover/discover-spotlight.vue';
|
|
|
- import DailyTrending from './partials/discover/daily-trending.vue';
|
|
|
- import DiscoverGridCard from './partials/discover/grid-card.vue';
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
"drawer": Drawer,
|
|
|
"sidebar": Sidebar,
|
|
|
- "rightbar": Rightbar,
|
|
|
"discover": Discover,
|
|
|
- "news-slider": DiscoverNewsSlider,
|
|
|
- "discover-spotlight": DiscoverSpotlight,
|
|
|
- "daily-trending": DailyTrending,
|
|
|
- "grid-card": DiscoverGridCard
|
|
|
},
|
|
|
|
|
|
data() {
|
|
|
return {
|
|
|
- isLoaded: false,
|
|
|
profile: undefined,
|
|
|
- config: {},
|
|
|
- tab: 'index',
|
|
|
- popularAccounts: [],
|
|
|
- followingIndex: undefined
|
|
|
}
|
|
|
},
|
|
|
|
|
|
- updated() {
|
|
|
- // let u = new URLSearchParams(window.location.search);
|
|
|
- // if(u.has('ft') && u.get('ft') == '1') {
|
|
|
- // this.tab = 'index';
|
|
|
- // }
|
|
|
- },
|
|
|
-
|
|
|
mounted() {
|
|
|
this.profile = window._sharedData.user;
|
|
|
- this.fetchConfig();
|
|
|
- },
|
|
|
-
|
|
|
- methods: {
|
|
|
- fetchConfig() {
|
|
|
- axios.get('/api/pixelfed/v2/discover/meta')
|
|
|
- .then(res => {
|
|
|
- this.config = res.data;
|
|
|
- this.isLoaded = true;
|
|
|
- window._sharedData.discoverMeta = res.data;
|
|
|
- // this.fetchPopularAccounts();
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- fetchPopularAccounts() {
|
|
|
- // axios.get('/api/pixelfed/discover/accounts/popular')
|
|
|
- // .then(res => {
|
|
|
- // this.popularAccounts = res.data;
|
|
|
- // })
|
|
|
- },
|
|
|
-
|
|
|
- followProfile(index) {
|
|
|
- event.currentTarget.blur();
|
|
|
- this.followingIndex = index;
|
|
|
- let id = this.popularAccounts[index].id;
|
|
|
-
|
|
|
- axios.post('/api/v1/accounts/' + id + '/follow')
|
|
|
- .then(res => {
|
|
|
- this.followingIndex = undefined;
|
|
|
- this.popularAccounts.splice(index, 1);
|
|
|
- }).catch(err => {
|
|
|
- this.followingIndex = undefined;
|
|
|
- swal('Oops!', 'An error occured when attempting to follow this account.', 'error');
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- goToProfile(account) {
|
|
|
- this.$router.push({
|
|
|
- path: `/i/web/profile/${account.id}`,
|
|
|
- params: {
|
|
|
- id: account.id,
|
|
|
- cachedProfile: account,
|
|
|
- cachedUser: this.profile
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- toggleTab(index) {
|
|
|
- this.tab = index;
|
|
|
- setTimeout(() => {
|
|
|
- window.scrollTo({top: 0, behavior: 'smooth'});
|
|
|
- }, 300);
|
|
|
- },
|
|
|
-
|
|
|
- openManageModal() {
|
|
|
- event.currentTarget.blur();
|
|
|
- swal('Settings', 'Discover settings here', 'info');
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- .card-img {
|
|
|
- position: relative;
|
|
|
-
|
|
|
- img {
|
|
|
- object-fit: cover;
|
|
|
- width: 100%;
|
|
|
- height: 200px;
|
|
|
- border-radius: 10px;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- &:before,
|
|
|
- &:after {
|
|
|
- content: "";
|
|
|
- background: rgba(0,0,0,0.2);
|
|
|
- z-index: 2;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- border-radius: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .title {
|
|
|
- position: absolute;
|
|
|
- bottom: 5px;
|
|
|
- left: 10px;
|
|
|
- font-size: 40px;
|
|
|
- color: #fff;
|
|
|
- z-index: 3;
|
|
|
- font-weight: 700;
|
|
|
- }
|
|
|
-
|
|
|
- &.big {
|
|
|
- img {
|
|
|
- height: 300px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .font-default {
|
|
|
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
|
- letter-spacing: -0.7px;
|
|
|
- }
|
|
|
-
|
|
|
- .bg-stellar {
|
|
|
- background: #7474BF;
|
|
|
- background: -webkit-linear-gradient(to right, #348AC7, #7474BF);
|
|
|
- background: linear-gradient(to right, #348AC7, #7474BF);
|
|
|
- }
|
|
|
-
|
|
|
- .bg-berry {
|
|
|
- background: #5433FF;
|
|
|
- background: -webkit-linear-gradient(to right, #acb6e5, #86fde8);
|
|
|
- background: linear-gradient(to right, #acb6e5, #86fde8);
|
|
|
- }
|
|
|
-
|
|
|
- .bg-midnight {
|
|
|
- background: #232526;
|
|
|
- background: -webkit-linear-gradient(to right, #414345, #232526);
|
|
|
- background: linear-gradient(to right, #414345, #232526);
|
|
|
- }
|
|
|
-
|
|
|
- .media-body {
|
|
|
- margin-right: 0.5rem;
|
|
|
- }
|
|
|
-
|
|
|
- .avatar {
|
|
|
- border-radius: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .username {
|
|
|
- font-size: 14px;
|
|
|
- line-height: 14px;
|
|
|
- margin-bottom: 2px;
|
|
|
- word-break: break-word !important;
|
|
|
- word-wrap: break-word !important;
|
|
|
- }
|
|
|
-
|
|
|
- .display-name {
|
|
|
- margin-bottom: 0;
|
|
|
- font-size: 12px;
|
|
|
- word-break: break-word !important;
|
|
|
- word-wrap: break-word !important;
|
|
|
- }
|
|
|
-
|
|
|
- .follower-count {
|
|
|
- margin-bottom: 0;
|
|
|
- font-size: 10px;
|
|
|
- word-break: break-word !important;
|
|
|
- word-wrap: break-word !important;
|
|
|
- }
|
|
|
-
|
|
|
- .follow {
|
|
|
- background-color: var(--primary);
|
|
|
- border-radius: 18px;
|
|
|
- font-weight: 600;
|
|
|
- padding: 5px 15px;
|
|
|
- }
|
|
|
-</style>
|