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

Vue SPA components

Browse Source
This commit is contained in:
Mohamed Jinas
2020-08-10 21:23:38 +05:00
parent 8b62750afe
commit 9938ad605e
3 changed files with 122 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
resources/js/components/RecentStories.vue
View File

@@ -1,56 +1,67 @@
<template>
<div>
<div>
<h3 class="text-2xl font-bold text-gray-800 mt-3 mb-4 text-right MvAamu">
<h3
class="text-2xl font-bold text-gray-800 mt-3 mb-4 text-right MvAamu"
>
ފަހުގެ ޙަބަރުތަށް
</h3>
</div>
<div class="flex justify-end">
<!-- post cards -->
<div class="w-full lg:w-2/3">
<a
v-for="story in recentStories"
:key="story.id"
class="block w-full lg:flex mb-10 shadow rounded-lg"
href="#"
>
<div
class="bg-white rounded px-4 flex flex-col justify-between leading-normal"
>
<div>
<!-- post cards -->
<div class="w-full lg:w-2/3">
<div v-for="story in recentStories" :key="story.id">
<router-link
:to="{ name: 'article.show', params: { id: story.id } }"
class="block w-full lg:flex mb-10 shadow rounded-lg"
>
<div
class="mt-3 md:mt-0 text-gray-700 font-bold text-2xl mb-2 text-right MvAamu"
style="direction:rtl;"
v-text="story.title"
class="bg-white rounded px-4 flex flex-col justify-between leading-normal"
>
<div>
<div
class="mt-5 text-gray-700 font-semibold text-2xl mb-2 text-right MvAamu"
style="direction:rtl;"
v-text="story.title"
></div>
<div
class="flex items-center justify-end mt-3 mb-2"
>
<p
class="font-semibold text-gray-700 text-sm capitalize MvTyper"
v-text="story.source.name"
></p>
<p class="text-gray-600 text-xs ml-1">
&mdash;
{{
story.published_date
| moment("calendar")
}}
</p>
</div>
<p
class="text-gray-700 text-base text-right MvTyper"
style="direction:rtl;"
>
{{ story.body[0] }}
</p>
</div>
</div>
<div class="flex items-center justify-end mt-1 mb-2">
<p
class="font-semibold text-gray-700 text-sm capitalize MvTyper"
v-text="story.source.name"
>
</p>
<p class="text-gray-600 text-xs ml-1">
&mdash; {{story.published_date | moment("calendar")}}
</p>
</div>
<p class="text-gray-700 text-base text-right MvTyper" style="direction:rtl;">
{{story.body.slice(0,200)}}
</p>
</div>
<div
class="h-48 lg:w-48 flex-none bg-cover text-center overflow-hidden opacity-75 rounded-lg"
:style="{
'background-image':
'url(' + story.featured_image + ')'
}"
:title="story.meta.title"
></div>
</router-link>
</div>
<div
class="h-48 lg:w-48 flex-none bg-cover text-center overflow-hidden opacity-75 rounded-lg"
:style="{ 'background-image': 'url(' + story.featured_image + ')' }"
title="deit is very important"
></div>
</a>
</div>
</div>
</div>
</div>
</template>