DiscoverComponent.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. <template>
  2. <div>
  3. <div v-if="!loaded" style="height: 70vh;" class="d-flex justify-content-center align-items-center">
  4. <img src="/img/pixelfed-icon-grey.svg">
  5. </div>
  6. <div v-else>
  7. <div class="d-block d-md-none px-0 border-top-0 mx-n3">
  8. <input class="form-control rounded-0" placeholder="Search" v-model="searchTerm" v-on:keyup.enter="searchSubmit">
  9. </div>
  10. <div>
  11. <p class="display-4 font-weight-bold pt-5 text-lighter"><i class="far fa-compass"></i> DISCOVER</p>
  12. </div>
  13. <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">
  14. <!--<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">
  15. <p class="text-success lead font-weight-bold mb-0">Loops</p>
  16. </a>-->
  17. <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 text-decoration-none" :href="category.url" :style="'background: linear-gradient(rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.3)),url('+category.thumb+');'">
  18. <p class="text-white font-weight-bold" style="text-shadow: 3px 3px 16px #272634;">{{category.name}}</p>
  19. </a>
  20. </section>
  21. <section class="mb-5 section-explore">
  22. <div class="profile-timeline">
  23. <div class="row p-0 mt-5">
  24. <div class="col-12 col-md-6">
  25. <div class="mb-4">
  26. <a class="card info-overlay card-md-border-0" :href="posts[0].url">
  27. <div class="square">
  28. <span v-if="posts[0].type == 'photo:album'" class="float-right mr-3 post-icon"><i class="fas fa-images fa-2x"></i></span>
  29. <span v-if="posts[0].type == 'video'" class="float-right mr-3 post-icon"><i class="fas fa-video fa-2x"></i></span>
  30. <span v-if="posts[0].type == 'video:album'" class="float-right mr-3 post-icon"><i class="fas fa-film fa-2x"></i></span>
  31. <div class="square-content" v-bind:style="{ 'background-image': 'url(' + posts[0].thumb + ')' }">
  32. </div>
  33. </div>
  34. </a>
  35. </div>
  36. </div>
  37. <div class="col-12 col-md-6 row p-0 m-0">
  38. <div v-for="(post, index) in posts.slice(1,5)" class="col-6" style="margin-bottom:1.8rem;">
  39. <a class="card info-overlay card-md-border-0" :href="post.url">
  40. <div class="square">
  41. <span v-if="post.type == 'photo:album'" class="float-right mr-3 post-icon"><i class="fas fa-images fa-2x"></i></span>
  42. <span v-if="post.type == 'video'" class="float-right mr-3 post-icon"><i class="fas fa-video fa-2x"></i></span>
  43. <span v-if="post.type == 'video:album'" class="float-right mr-3 post-icon"><i class="fas fa-film fa-2x"></i></span>
  44. <div class="square-content" v-bind:style="{ 'background-image': 'url(' + post.thumb + ')' }">
  45. </div>
  46. </div>
  47. </a>
  48. </div>
  49. </div>
  50. </div>
  51. <div class="row p-0" style="display: flex;">
  52. <div v-for="(post, index) in posts.slice(5)" class="col-3 p-1 p-sm-2 p-md-3">
  53. <a class="card info-overlay card-md-border-0" :href="post.url">
  54. <div class="square">
  55. <span v-if="post.type == 'photo:album'" class="float-right mr-3 post-icon"><i class="fas fa-images fa-2x"></i></span>
  56. <span v-if="post.type == 'video'" class="float-right mr-3 post-icon"><i class="fas fa-video fa-2x"></i></span>
  57. <span v-if="post.type == 'video:album'" class="float-right mr-3 post-icon"><i class="fas fa-film fa-2x"></i></span>
  58. <div class="square-content" v-bind:style="{ 'background-image': 'url(' + post.thumb + ')' }">
  59. </div>
  60. </div>
  61. </a>
  62. </div>
  63. </div>
  64. </div>
  65. </section>
  66. <section class="mb-5">
  67. <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>
  68. </section>
  69. </div>
  70. </div>
  71. </template>
  72. <style type="text/css" scoped>
  73. .discover-bar::-webkit-scrollbar {
  74. display: none;
  75. }
  76. .card-disc {
  77. flex: 0 0 160px;
  78. width:160px;
  79. height:100px;
  80. background-size: cover !important;
  81. }
  82. .post-icon {
  83. color: #fff;
  84. position:relative;
  85. margin-top: 10px;
  86. z-index: 9;
  87. opacity: 0.6;
  88. text-shadow: 3px 3px 16px #272634;
  89. }
  90. </style>
  91. <script type="text/javascript">
  92. export default {
  93. data() {
  94. return {
  95. loaded: false,
  96. config: window.App.config,
  97. posts: {},
  98. trending: {},
  99. categories: {},
  100. allCategories: {},
  101. searchTerm: '',
  102. }
  103. },
  104. mounted() {
  105. this.fetchData();
  106. this.fetchCategories();
  107. },
  108. methods: {
  109. fetchData() {
  110. axios.get('/api/pixelfed/v2/discover/posts')
  111. .then((res) => {
  112. this.posts = res.data.posts;
  113. this.loaded = true;
  114. });
  115. },
  116. fetchCategories() {
  117. axios.get('/api/v2/discover/categories')
  118. .then(res => {
  119. this.allCategories = res.data;
  120. this.categories = res.data;
  121. });
  122. },
  123. searchSubmit() {
  124. if(this.searchTerm.length > 1) {
  125. window.location.href = '/i/results?q=' + this.searchTerm;
  126. }
  127. }
  128. }
  129. }
  130. </script>