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>

51
resources/js/pages/Article.vue Normal file
View File

@@ -0,0 +1,51 @@
<template>
<div>
<div class="mb-4 md:mb-0 w-full max-w-screen-md mx-auto relative" style="height: 24em;">
<div class="absolute left-0 bottom-0 w-full h-full z-10 image-dark"
:style="{'background-image':'url(' + article.featured_image + ')'}"
></div>
<div class="p-4 absolute bottom-0 left-0 z-20">
<h2 class="text-3xl font-semibold text-gray-100 leading-relaxed text-right MvAamu" style="direction:rtl;" v-text="article.title"></h2>
<div class="flex justify-end mt-3">
<img v-if="article.source" :src="article.source.logo"
class="h-10 w-10 rounded-full mr-2 object-cover" />
<div>
<p v-if="article.source" class="font-semibold text-gray-200 text-md MvTyper" v-text="article.source.name"></p>
<p class="font-semibold text-gray-400 text-xs">{{article.published_date | moment('calendar')}}</p>
</div>
</div>
</div>
</div>
<div class="px-4 lg:px-0 mt-12 text-gray-700 max-w-screen-md mx-auto text-lg leading-relaxed">
<p v-for="paragraph in article.body" :key="paragraph" class="MvTyper text-right" style="direction:rtl;">
{{paragraph}}
<br>
<br>
</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
article: []
};
},
mounted() {
axios.get(`/api/article/${this.$route.params.id}`).then(response => {
this.article = response.data.data;
});
}
};
</script>
<style>
.image-dark {
filter: brightness(50%);
}
</style>

20
resources/js/pages/Home.vue Normal file
View File

@@ -0,0 +1,20 @@
<template>
<div>
<todays-pick></todays-pick>
<discover-topics></discover-topics>
<recent-stories></recent-stories>
</div>
</template>
<script>
import TodaysPick from '../components/TodaysPick';
import DiscoverTopics from '../components/DiscoverTopics';
import RecentStories from '../components/RecentStories';
export default {
components: {
TodaysPick,
DiscoverTopics,
RecentStories
}
}
</script>