146 lines
5.2 KiB
Vue
146 lines
5.2 KiB
Vue
<template>
|
|
<div>
|
|
<div class="py-6 flex justify-center lg:justify-end md:justify-end">
|
|
<h3
|
|
class="text-gray-800 text-3xl MvAamu"
|
|
style="direction: rtl; font-weight: 100;"
|
|
>
|
|
މިއަދުގެ ޙުލާސާ
|
|
</h3>
|
|
</div>
|
|
<!-- featured section -->
|
|
<div
|
|
class="flex flex-wrap md:flex-no-wrap space-x-0 md:space-x-6 mb-5 border-b"
|
|
>
|
|
<!-- sub-main posts -->
|
|
<div class="md:w-4/7">
|
|
<div v-for="subarticle in subarticles" :key="subarticle.id">
|
|
<a
|
|
:href="'/article/' + subarticle.id"
|
|
class="rounded w-full flex flex-col md:flex-row mb-10"
|
|
>
|
|
<div class="bg-white rounded px-4">
|
|
<div
|
|
class="md:mt-0 text-gray-800 font-semibold text-xl xl:text-md lg:text-md mb-2 text-right leading-8 sm:leading-9 md:leading-9 MvTyper hover:underline"
|
|
v-text="subarticle.title"
|
|
style="direction:rtl;"
|
|
></div>
|
|
|
|
<div class="flex justify-end items-center">
|
|
<div>
|
|
<p
|
|
class="font-semibold text-gray-700 text-sm capitalize MvTyper"
|
|
v-text="subarticle.source.name"
|
|
></p>
|
|
</div>
|
|
|
|
<img
|
|
:src="subarticle.source.logo"
|
|
class="h-10 w-10 rounded-full ml-1 object-cover"
|
|
/>
|
|
</div>
|
|
|
|
<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"
|
|
>
|
|
{{
|
|
subarticle.published_date
|
|
| moment("calendar")
|
|
}}
|
|
</p>
|
|
</div>
|
|
|
|
<p
|
|
class="block md:hidden p-2 pl-0 pt-1 text-sm text-gray-600 MvTyper"
|
|
style="direction:rtl;"
|
|
v-text="subarticle.body[0]"
|
|
></p>
|
|
</div>
|
|
<img
|
|
:src="subarticle.featured_image"
|
|
class="block md:hidden lg:block rounded-md h-64 md:h-32 m-4 md:m-0"
|
|
/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- main post -->
|
|
<div
|
|
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"
|
|
>
|
|
<img
|
|
:src="article.featured_image"
|
|
class="rounded-md object-cover w-full h-3/4"
|
|
/>
|
|
</a>
|
|
|
|
<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;"
|
|
v-text="article.title"
|
|
></h1>
|
|
</a>
|
|
|
|
<div class="flex justify-end items-center">
|
|
<div>
|
|
<p
|
|
class="font-semibold text-gray-700 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>
|
|
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end featured section -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "todays-pick",
|
|
data() {
|
|
return {
|
|
article: null,
|
|
subarticles: []
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
axios
|
|
.get("api/today")
|
|
.then(response => {
|
|
this.article = response.data[0];
|
|
this.subarticles = response.data.slice(1, 5);
|
|
})
|
|
.catch(error => {
|
|
console.log(error);
|
|
});
|
|
}
|
|
};
|
|
</script>
|