Update DiscoverComponent

resources/assets/js/components/DiscoverComponent.vue

@@ -1,117 +1,105 @@
 <template>
-<div class="container">
+	<div>
+		<div v-if="!loaded" style="height: 70vh;" class="d-flex justify-content-center align-items-center">
+			<img src="/img/pixelfed-icon-grey.svg">
+		</div>
+		<div v-else>
+			<div class="d-block d-md-none px-0 border-top-0 mx-n3">
+				<input class="form-control rounded-0" placeholder="Search" v-model="searchTerm" v-on:keyup.enter="searchSubmit">
+			</div>
+			<section class="d-none d-md-flex mb-md-2 pt-5 discover-bar" style="width:auto; overflow: auto hidden;" v-if="categories.length > 0">
+				<a v-if="config.ab.loops == true" class="text-decoration-none bg-transparent border border-success rounded d-inline-flex align-items-center justify-content-center mr-3 card-disc" href="/discover/loops">
+					<p class="text-success lead font-weight-bold mb-0">Loops</p>
+				</a>
+				<a v-for="(category, index) in categories" :key="index+'_cat_'" class="bg-dark rounded d-inline-flex align-items-end justify-content-center mr-3 box-shadow card-disc" :href="category.url" :style="'background: linear-gradient(rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.3)),url('+category.thumb+');'">
+					<p class="text-white font-weight-bold" style="text-shadow: 3px 3px 16px #272634;">{{category.name}}</p>
+				</a>
 
-  <section class="d-none d-md-flex mb-md-2 pt-2 discover-bar" style="width:auto; overflow: auto hidden;" v-if="categories.length > 0">
-    <a v-if="config.ab.loops == true" class="text-decoration-none bg-transparent border border-success rounded d-inline-flex align-items-center justify-content-center mr-3 card-disc" href="/discover/loops">
-      <p class="text-success lead font-weight-bold mb-0">Loops</p>
-    </a>
-    <!-- <a class="text-decoration-none rounded d-inline-flex align-items-center justify-content-center mr-3 box-shadow card-disc" href="/discover/personal" style="background: rgb(255, 95, 109);">
-      <p class="text-white lead font-weight-bold mb-0">For You</p>
-    </a> -->
-
-    <a v-for="(category, index) in categories" :key="index+'_cat_'" class="bg-dark rounded d-inline-flex align-items-end justify-content-center mr-3 box-shadow card-disc" :href="category.url" :style="'background: linear-gradient(rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.3)),url('+category.thumb+');'">
-      <p class="text-white font-weight-bold" style="text-shadow: 3px 3px 16px #272634;">{{category.name}}</p>
-    </a>
-
-  </section>
-  <section class="mb-5 section-explore">
-    <div class="profile-timeline">
-	    <div class="loader text-center">
-	    	<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
-	    </div>
-      <div class="row d-none">
-        <div class="col-4 p-0 p-sm-2 p-md-3" v-for="post in posts">
-          <a class="card info-overlay card-md-border-0" :href="post.url">
-            <div class="square">
-              <span v-if="post.type == 'photo:album'" class="float-right mr-3 post-icon"><i class="fas fa-images fa-2x"></i></span>
-              <span v-if="post.type == 'video'" class="float-right mr-3 post-icon"><i class="fas fa-video fa-2x"></i></span>
-              <span v-if="post.type == 'video:album'" class="float-right mr-3 post-icon"><i class="fas fa-film fa-2x"></i></span>
-              <div class="square-content" v-bind:style="{ 'background-image': 'url(' + post.thumb + ')' }">
-              </div>
-            </div>
-          </a>
-        </div>
-      </div>
-     </div>
-  </section>
-  <section class="mb-5">
-  	<p class="lead text-center">To view more posts, check the <a href="/" class="font-weight-bold">home</a> or <a href="/timeline/public" class="font-weight-bold">local</a> timelines.</p>
-  </section>
-</div>
+			</section>
+			<section class="mb-5 section-explore">
+				<div class="profile-timeline">
+					<div class="row p-0">
+						<div class="col-4 p-1 p-sm-2 p-md-3" v-for="post in posts">
+							<a class="card info-overlay card-md-border-0" :href="post.url">
+								<div class="square">
+									<span v-if="post.type == 'photo:album'" class="float-right mr-3 post-icon"><i class="fas fa-images fa-2x"></i></span>
+									<span v-if="post.type == 'video'" class="float-right mr-3 post-icon"><i class="fas fa-video fa-2x"></i></span>
+									<span v-if="post.type == 'video:album'" class="float-right mr-3 post-icon"><i class="fas fa-film fa-2x"></i></span>
+									<div class="square-content" v-bind:style="{ 'background-image': 'url(' + post.thumb + ')' }">
+									</div>
+								</div>
+							</a>
+						</div>
+					</div>
+				</div>
+			</section>
+			<section class="mb-5">
+				<p class="lead text-center">To view more posts, check the <a href="/" class="font-weight-bold">home</a> or <a href="/timeline/public" class="font-weight-bold">local</a> timelines.</p>
+			</section>
+		</div>
+	</div>
 </template>
 
 <style type="text/css" scoped>
-  .discover-bar::-webkit-scrollbar { 
-      display: none; 
-  }
-  .card-disc {
-    flex: 0 0 160px;
-    width:160px;
-    height:100px;
-    background-size: cover !important;
-  }
-  .post-icon {
-    color: #fff;
-    position:relative;
-    margin-top: 10px;
-    z-index: 9;
-    opacity: 0.6;
-    text-shadow: 3px 3px 16px #272634;
-  }
+.discover-bar::-webkit-scrollbar { 
+	display: none; 
+}
+.card-disc {
+	flex: 0 0 160px;
+	width:160px;
+	height:100px;
+	background-size: cover !important;
+}
+.post-icon {
+	color: #fff;
+	position:relative;
+	margin-top: 10px;
+	z-index: 9;
+	opacity: 0.6;
+	text-shadow: 3px 3px 16px #272634;
+}
 </style>
 
 <script type="text/javascript">
-export default {
-	data() {
-		return {
-      config: window.App.config,
-			posts: {},
-			trending: {},
-      categories: {},
-      allCategories: {},
-		}
-	},
-	mounted() {
-    this.fetchData();
-    this.fetchCategories();
-	},
-
-	methods: {
-
-    followUser(id, event) {
-      axios.post('/i/follow', {
-        item: id
-      }).then(res => {
-        let el = $(event.target);
-        el.addClass('btn-outline-secondary').removeClass('btn-primary');
-        el.text('Unfollow');
-      }).catch(err => {
-        if(err.response.data.message) {
-          swal('Error', err.response.data.message, 'error');
-        }
-      });
-    },
+	export default {
+		data() {
+			return {
+				loaded: false,
+				config: window.App.config,
+				posts: {},
+				trending: {},
+				categories: {},
+				allCategories: {},
+				searchTerm: '',
+			}
+		},
+		mounted() {
+			this.fetchData();
+			this.fetchCategories();
+		},
 
-		fetchData() {
-      axios.get('/api/v2/discover/posts')
-      .then((res) => {
-        let data = res.data;
-        this.posts = data.posts;
+		methods: {
+			fetchData() {
+				axios.get('/api/v2/discover/posts')
+				.then((res) => {
+					this.posts = res.data.posts;
+					this.loaded = true;
+				});
+			},
 
-        if(this.posts.length > 1) {
-          $('.section-explore .loader').hide();
-          $('.section-explore .row.d-none').removeClass('d-none');
-        }
-      });
-		},
+			fetchCategories() {
+				axios.get('/api/v2/discover/categories')
+				.then(res => {
+					this.allCategories = res.data;
+					this.categories = res.data;
+				});
+			},
 
-    fetchCategories() {
-      axios.get('/api/v2/discover/categories')
-        .then(res => {
-          this.allCategories = res.data;
-          this.categories = res.data;
-      });
-    },
+			searchSubmit() {
+				if(this.searchTerm.length > 1) {
+					window.location.href = '/i/results?q=' + this.searchTerm;
+				}
+			}
+		}
 	}
-}
-</script>
+</script>