Source View more articles and date fix
This commit is contained in:
@@ -35,7 +35,7 @@
|
||||
<div class="flex justify-end items-center">
|
||||
<div>
|
||||
<p
|
||||
class="font-semibold text-gray-700 text-sm capitalize MvTyper"
|
||||
class="font-semibold text-gray-600 text-sm capitalize MvTyper"
|
||||
v-text="story.source.name"
|
||||
></p>
|
||||
</div>
|
||||
@@ -47,9 +47,12 @@
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<span class="text-gray-600 text-xs ml-1">
|
||||
{{ story.published_date | moment("calendar") }}
|
||||
</span>
|
||||
<p
|
||||
class="ml-1 text-gray-600 text-right MvTyper"
|
||||
style="direction:rtl; font-size:13px;"
|
||||
>
|
||||
{{ story.published_date | dhivehiDate }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -58,6 +61,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as moment from "moment";
|
||||
|
||||
export default {
|
||||
name: "recent-stories",
|
||||
|
||||
@@ -67,6 +72,14 @@ export default {
|
||||
};
|
||||
},
|
||||
|
||||
filters: {
|
||||
dhivehiDate: function(date) {
|
||||
if (!date) return "";
|
||||
moment.locale("dv");
|
||||
return moment(date).format("Do MMMM YYYY h:mm");
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
axios
|
||||
.get("api/recent")
|
||||
|
||||
151
resources/js/components/SourceView.vue
Normal file
151
resources/js/components/SourceView.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<div>
|
||||
<section class="mx-auto max-w-6xl py-5">
|
||||
<div class="flex flex-col">
|
||||
<div
|
||||
class="flex flex-col md:flex-row justify-center items-center"
|
||||
>
|
||||
<div
|
||||
class="transition-all ease-in-out duration-1000 flex flex-col justify-center"
|
||||
>
|
||||
<div slot="middle-right" class="max-w-xs">
|
||||
<div class="flex flex-col justify-center h-48 p-3">
|
||||
<div
|
||||
class="flex flex-col items-center shadow hover:shadow-lg rounded-lg p-3"
|
||||
>
|
||||
<img :src="source.logo" class="h-16 w-16" />
|
||||
<div
|
||||
class="text-3xl font-bold text-gray-800 text-center MvAamu mt-2"
|
||||
>
|
||||
{{ source.name }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="text-sm my-3 MvTyper text-center leading-6"
|
||||
style="direction:rtl;"
|
||||
>
|
||||
{{ source.name }} ނޫހުން ޝާޢިޢުކޮއްފައިވާ
|
||||
ލިޔުންތަށް
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 mb-10 mt-8"
|
||||
>
|
||||
<div
|
||||
v-for="article in articles"
|
||||
:key="article.id"
|
||||
class="transition-all ease-in-out duration-1000 flex flex-col justify-center mr-0 md:mr-2"
|
||||
>
|
||||
<div slot="bottom-left" class="max-w-xs">
|
||||
<div class="p-5 shadow-md m-2 mt-4">
|
||||
<a href="#">
|
||||
<img
|
||||
class="object-scale-down h-30"
|
||||
:src="article.featured_image"
|
||||
:alt="article.meta['title']"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<div
|
||||
class="text-xs font-bold uppercase text-gray-500 text-right mt-1 mb-2 MvTyper"
|
||||
>
|
||||
{{ article.source.name }}
|
||||
</div>
|
||||
<p
|
||||
class="font-semibold text-gray-400 text-xs MvTyper"
|
||||
style="direction: rtl;"
|
||||
>
|
||||
{{ article.published_date | dhivehiDate }}
|
||||
</p>
|
||||
|
||||
<a href="#">
|
||||
<div
|
||||
class="text-md font-bold leading-7 mb-2 mt-1 text-gray-800 MvTyper text-right hover:underline"
|
||||
>
|
||||
{{ article.title }}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<button
|
||||
:disabled="loading != 0"
|
||||
v-if="moreArticles"
|
||||
@click="fetchNewArticles()"
|
||||
class="ml-4 text-white h-10 flex items-center justify-center px-4 bg-main-link rounded shadow font-medium"
|
||||
>
|
||||
{{ loading ? "Loading...." : "Show more" }}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as moment from "moment";
|
||||
export default {
|
||||
props: {
|
||||
source: Object
|
||||
},
|
||||
name: "source-view",
|
||||
|
||||
data() {
|
||||
return {
|
||||
articles: [],
|
||||
current_page: 0,
|
||||
totalCount: {
|
||||
count: 0
|
||||
},
|
||||
loading: 0
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
axios.get(`/api/source/${this.source.slug}`).then(response => {
|
||||
this.current_page = response.data.articles.current_page;
|
||||
this.totalCount.count = response.data.articles.total;
|
||||
this.articles = response.data.articles.data;
|
||||
});
|
||||
},
|
||||
|
||||
computed: {
|
||||
moreArticles() {
|
||||
//Calculating if there is any more articles
|
||||
return this.articles.length < this.totalCount.count;
|
||||
}
|
||||
},
|
||||
|
||||
filters: {
|
||||
dhivehiDate: function(date) {
|
||||
if (!date) return "";
|
||||
moment.locale("dv");
|
||||
return moment(date).format("Do MMMM YYYY h:mm");
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
fetchNewArticles() {
|
||||
this.loading = true;
|
||||
axios
|
||||
.get(
|
||||
`/api/source/${this.source.slug}?page=${this.current_page +
|
||||
1}`
|
||||
)
|
||||
.then(response => {
|
||||
this.current_page = response.data.articles.current_page;
|
||||
// spread the array item into individual arguments
|
||||
this.articles.push(...response.data.articles.data);
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -43,14 +43,12 @@
|
||||
<div
|
||||
class="text-gray-600 text-md mt-1 flex justify-end items-center"
|
||||
>
|
||||
|
||||
|
||||
<p
|
||||
class="text-gray-600 text-sm text-right mb-2"
|
||||
class="text-gray-600 text-sm text-right mb-2 MvTyper"
|
||||
style="direction:rtl;"
|
||||
>
|
||||
{{
|
||||
subarticle.published_date
|
||||
| moment("calendar")
|
||||
subarticle.published_date | dhivehiDate
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
@@ -74,18 +72,14 @@
|
||||
class="mb-4 lg:mb-0 p-4 lg:p-0 w-full md:w-4/7 relative rounded block"
|
||||
v-if="article"
|
||||
>
|
||||
<a
|
||||
:href="'/article/' + article.id"
|
||||
>
|
||||
<a :href="'/article/' + article.id">
|
||||
<img
|
||||
:src="article.featured_image"
|
||||
class="rounded-md object-cover w-full h-3/4"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<a
|
||||
:href="'/article/' + article.id"
|
||||
>
|
||||
<a :href="'/article/' + article.id">
|
||||
<h1
|
||||
class="text-gray-800 text-xl xl:text-md lg:text-md font-bold mt-2 mb-2 leading-9 hover:underline text-right MvTyper"
|
||||
style="direction:rtl;"
|
||||
@@ -110,8 +104,11 @@
|
||||
<div
|
||||
class="text-gray-600 text-md mt-4 flex justify-end items-center mb-3"
|
||||
>
|
||||
<p class="ml-1 text-gray-600 text-right">
|
||||
{{ article.published_date | moment("calendar") }}
|
||||
<p
|
||||
class="ml-1 text-gray-600 text-right MvTyper"
|
||||
style="direction:rtl;"
|
||||
>
|
||||
{{ article.published_date | dhivehiDate }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -121,6 +118,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as moment from "moment";
|
||||
|
||||
export default {
|
||||
name: "todays-pick",
|
||||
data() {
|
||||
@@ -130,6 +129,14 @@ export default {
|
||||
};
|
||||
},
|
||||
|
||||
filters: {
|
||||
dhivehiDate: function(date) {
|
||||
if (!date) return "";
|
||||
moment.locale("dv");
|
||||
return moment(date).format("Do MMMM YYYY h:mm");
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
axios
|
||||
.get("api/today")
|
||||
|
||||
Reference in New Issue
Block a user