Update Discover.vue component

resources/assets/components/Discover.vue

@@ -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>