Update DiscoverComponent.vue

This commit is contained in:
Daniel Supernault 2019-05-27 23:07:45 -06:00
parent 7400c04e4a
commit e20910b1d2
No known key found for this signature in database
GPG Key ID: 0DEF1C662C9033F7
1 changed files with 11 additions and 46 deletions

View File

@ -1,22 +1,18 @@
<template> <template>
<div class="container"> <div class="container">
<section class="d-none d-md-flex mb-md-5 pb-md-3 px-2" style="overflow-x: hidden;" v-if="categories.length > 0"> <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 class="bg-dark rounded d-inline-flex align-items-end justify-content-center mr-3 box-shadow card-disc" href="/discover/personal"> <a 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-white font-weight-bold" style="text-shadow: 3px 3px 16px #272634;border-bottom: 2px solid #fff;">For You</p> <p class="text-success lead font-weight-bold mb-0">Loops</p>
</a> </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);">
<div v-show="categoryCursor > 5" class="text-dark d-inline-flex align-items-center pr-3" v-on:click="categoryPrev()"> <p class="text-white lead font-weight-bold mb-0">For You</p>
<i class="fas fa-chevron-circle-left fa-lg text-muted"></i> </a> -->
</div>
<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+');'"> <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> <p class="text-white font-weight-bold" style="text-shadow: 3px 3px 16px #272634;">{{category.name}}</p>
</a> </a>
<div v-show="allCategories.length != categoryCursor" class="text-dark d-flex align-items-center" v-on:click="categoryNext()">
<i class="fas fa-chevron-circle-right fa-lg text-muted"></i>
</div>
</section> </section>
<section class="mb-5 section-explore"> <section class="mb-5 section-explore">
<div class="profile-timeline"> <div class="profile-timeline">
@ -41,7 +37,11 @@
</template> </template>
<style type="text/css" scoped> <style type="text/css" scoped>
.discover-bar::-webkit-scrollbar {
display: none;
}
.card-disc { .card-disc {
flex: 0 0 160px;
width:160px; width:160px;
height:100px; height:100px;
background-size: cover !important; background-size: cover !important;
@ -52,12 +52,10 @@
export default { export default {
data() { data() {
return { return {
people: {},
posts: {}, posts: {},
trending: {}, trending: {},
categories: {}, categories: {},
allCategories: {}, allCategories: {},
categoryCursor: 5,
} }
}, },
mounted() { mounted() {
@ -84,17 +82,6 @@ export default {
}, },
fetchData() { fetchData() {
// axios.get('/api/v2/discover/people')
// .then((res) => {
// let data = res.data;
// this.people = data.people;
// if(this.people.length > 1) {
// $('.section-people .loader').hide();
// $('.section-people .row.d-none').removeClass('d-none');
// }
// });
axios.get('/api/v2/discover/posts') axios.get('/api/v2/discover/posts')
.then((res) => { .then((res) => {
let data = res.data; let data = res.data;
@ -111,31 +98,9 @@ export default {
axios.get('/api/v2/discover/categories') axios.get('/api/v2/discover/categories')
.then(res => { .then(res => {
this.allCategories = res.data; this.allCategories = res.data;
this.categories = _.slice(res.data, 0, 5); this.categories = res.data;
}); });
}, },
categoryNext() {
if(this.categoryCursor > this.allCategories.length - 1) {
return;
}
this.categoryCursor++;
let cursor = this.categoryCursor;
let start = cursor - 5;
let end = cursor;
this.categories = _.slice(this.allCategories, start, end);
},
categoryPrev() {
if(this.categoryCursor == 5) {
return;
}
this.categoryCursor--;
let cursor = this.categoryCursor;
let start = cursor - 5;
let end = cursor;
this.categories = _.slice(this.allCategories, start, end);
},
} }
} }
</script> </script>