Today style fix
This commit is contained in:
@@ -1,98 +1,45 @@
|
||||
<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="container mx-auto mb-5 border-b">
|
||||
<div>
|
||||
<h2 class="text-gray-800 text-3xl text-right mt-3 mb-2 MvAamu"
|
||||
style="font-weight: 100;"
|
||||
>
|
||||
<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>
|
||||
މިއަދުގެ ޚުލާޞާ
|
||||
</h2>
|
||||
</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 MvTyper"
|
||||
style="direction:rtl;"
|
||||
>
|
||||
{{
|
||||
subarticle.published_date | dhivehiDate
|
||||
}}
|
||||
</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 class="flex md:-mx-4 flex-wrap md:px-0 flex-row-reverse">
|
||||
<div class="w-full md:w-1/2 px-4 py-4">
|
||||
<div>
|
||||
<img :src="article.featured_image" class="rounded" />
|
||||
</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"
|
||||
<div class="flex flex-col justify-end">
|
||||
<a
|
||||
:href="'/article/' + article.id"
|
||||
class="text-2xl md:text-3xl lg:text-3xl leading-11 text-gray-700 pb-4 pt-4 MvTyper font-semibold hover:underline"
|
||||
style="direction:rtl;"
|
||||
v-text="article.title"
|
||||
></h1>
|
||||
</a>
|
||||
></a>
|
||||
<p
|
||||
class="ml-1 mb-4 text-gray-600 text-right MvTyper"
|
||||
style="direction:rtl;"
|
||||
>
|
||||
{{ article.body[0].slice(0,200) }}...
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex justify-end items-center">
|
||||
<div class="flex justify-end items-center mt-3">
|
||||
<div>
|
||||
<p
|
||||
class="font-semibold text-gray-700 text-sm capitalize MvTyper"
|
||||
v-text="article.source.name"
|
||||
></p>
|
||||
<a
|
||||
:href="'/source/' + article.source.slug"
|
||||
class="hover:underline"
|
||||
>
|
||||
<p
|
||||
class="font-semibold text-gray-700 text-sm capitalize MvTyper"
|
||||
v-text="article.source.name"
|
||||
></p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<img
|
||||
@@ -112,8 +59,91 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/4">
|
||||
<div class="flex md:-mx-4 flex-wrap mb-7 md:px-0 rtl">
|
||||
<div
|
||||
class="w-1/2 md:w-full lg:w-full px-4 md:px-8 lg:px-8 py-4"
|
||||
v-for="subarticle in subarticles"
|
||||
:key="subarticle.id"
|
||||
>
|
||||
<div class="flex justify-end">
|
||||
<img
|
||||
:src="subarticle.featured_image"
|
||||
class="rounded"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<a
|
||||
:href="'/article/' + subarticle.id"
|
||||
class="text-md leading-9 font-semibold py-3 text-gray-700 MvTyper"
|
||||
v-text="subarticle.title"
|
||||
style="direction:rtl;"
|
||||
></a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row-reverse justify-between mt-2">
|
||||
<div class="flex justify-end items-center">
|
||||
<div>
|
||||
<p
|
||||
class="font-semibold text-gray-600 text-sm capitalize MvTyper"
|
||||
v-text="subarticle.source.name"
|
||||
></p>
|
||||
</div>
|
||||
|
||||
<img
|
||||
:src="subarticle.source.logo"
|
||||
class="h-8 w-8 rounded-full ml-1 object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/4 px-4 py-4">
|
||||
<ul
|
||||
style="list-style: none; float: right; padding: 0px;"
|
||||
class="mt-8 sm:mt-8 md:mt-0 lg:mt-0"
|
||||
>
|
||||
<li
|
||||
class="pb-8"
|
||||
v-for="listarticle in listarticles"
|
||||
:key="listarticle.id"
|
||||
>
|
||||
<div class="flex justify-end">
|
||||
<a
|
||||
:href="'/article/' + listarticle.id"
|
||||
class="text-md leading-normal text-gray-800 pb-4 MvTyper text-right hover:underline"
|
||||
style="direction:rtl;"
|
||||
v-text="listarticle.title"
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
<div class="border-b mb-3"></div>
|
||||
<div class="flex justify-between items-center flex-row-reverse">
|
||||
<div class="flex items-end flex-col">
|
||||
<a
|
||||
:href="'/source/' + listarticle.source.slug"
|
||||
class="hover:underline"
|
||||
>
|
||||
<span
|
||||
class="MvTyper text-sm text-gray-600"
|
||||
v-text="listarticle.source.name"
|
||||
></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="MvTyper text-sm text-gray-600">{{listarticle.published_date | dhivehiDate}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end featured section -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -124,8 +154,9 @@ export default {
|
||||
name: "todays-pick",
|
||||
data() {
|
||||
return {
|
||||
article: null,
|
||||
subarticles: []
|
||||
article: [],
|
||||
subarticles: [],
|
||||
listarticles: []
|
||||
};
|
||||
},
|
||||
|
||||
@@ -142,7 +173,8 @@ export default {
|
||||
.get("api/today")
|
||||
.then(response => {
|
||||
this.article = response.data[0];
|
||||
this.subarticles = response.data.slice(1, 5);
|
||||
this.subarticles = response.data.slice(1, 3);
|
||||
this.listarticles = response.data.slice(3, 7);
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
|
||||
Reference in New Issue
Block a user