shihaam/karudhaas
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Topic FIlter component

Browse Source
This commit is contained in:
Mohamed Jinas
2020-09-28 07:29:46 +05:00
parent 0c6476bea6
commit d9d23977d1
4 changed files with 104 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/js/app.js vendored
View File

File diff suppressed because one or more lines are too long

2
public/mix-manifest.json
View File

@@ -1,5 +1,5 @@
{
"/js/app.js": "/js/app.js?id=112a156dd0400264ea0f",
"/js/app.js": "/js/app.js?id=90bce64bc62cb09d3d29",
"/css/app.css": "/css/app.css?id=68dfaea3ff29afe7eab0",
"/js/manifest.js": "/js/manifest.js?id=3c768977c2574a34506e",
"/js/vendor.js": "/js/vendor.js?id=aa27c0f3cc35e93603fe"

2
resources/js/app.js vendored
View File

@@ -9,6 +9,7 @@ import DiscoverTopics from "./components/DiscoverTopics";
import RecentStories from "./components/RecentStories";
import AvailableSources from './components/AvailableSources';
import SourceView from './components/SourceView';
import TopicFilter from './components/TopicFilter';
import NewsLetter from './components/NewsLetter';
Turbolinks.start();
@@ -25,6 +26,7 @@ let app = new Vue({
RecentStories,
AvailableSources,
SourceView,
TopicFilter,
NewsLetter
}
});

100
resources/js/components/TopicFilter.vue Normal file
View File

@@ -0,0 +1,100 @@
<template>
<div class="mb-10 border-t mt-5">
<div>
<h3
class="text-gray-800 text-3xl text-center mt-5 mb-2 mr-3 MvAamu"
style="font-weight: 100;"
v-text="label"
>
</h3>
</div>
<div class="container mx-auto">
<div class="flex md:-mx-4 flex-row-reverse flex-wrap mb-7 md:px-0">
<div
class="w-1/2 md:w-1/4 px-4 py-4 flex-grow"
v-for="article in articles"
:key="article.id"
>
<a :href="`/article/${article.source.slug}/${article.guid}`">
<div
class="w-full h-auto overflow-hidden relative rounded"
>
<img :src="article.featured_image" />
</div>
</a>
<div class="w-full h-auto text-right overflow-hidden mt-3">
<a
:href="`/article/${article.source.slug}/${article.guid}`"
class="text-md leading-9 font-semibold text-right text-gray-700 py-3 MvTyper hover:underline"
style="direction:rtl;"
v-text="article.title"
></a>
<div class="flex items-center justify-end mt-3 mb-3">
<a :href="'/source/' + article.source.slug">
<div class="flex justify-end items-center">
<div>
<p
class="font-semibold text-gray-600 text-sm capitalize MvTyper"
v-text="article.source.name"
></p>
</div>
<img
:src="article.source.logo"
class="h-10 w-10 rounded-full ml-1 object-cover"
/>
</div>
</a>
</div>
<p
class="ml-1 text-gray-600 text-right MvTyper"
style="direction:rtl; font-size:13px;"
>
{{ article.published_date | dhivehiDate }}
</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import * as moment from "moment";
export default {
name: "topic-filter",
props: ['topic','label'],
data() {
return {
articles: []
}
},
filters: {
dhivehiDate: function(date) {
if (!date) return "";
moment.locale("dv");
return moment(date).format("Do MMMM YYYY h:mm");
}
},
mounted() {
axios
.get(`api/topic/${this.topic}`)
.then(response => {
this.articles = response.data.articles.data;
})
.catch(error => {
console.log(error);
});
}
}
</script>
<style>
.dark-img {
filter: brightness(90%);
}
</style>