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

Migrate to ssr

Browse Source
This commit is contained in:
Mohamed Jinas
2020-08-14 01:49:09 +05:00
parent 2a8c2c095a
commit 73f81426c6
8 changed files with 66 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
resources/js/components/TodaysPick.vue
View File

@@ -16,7 +16,7 @@
<div class="md:w-4/7">
<div v-for="subarticle in subarticles" :key="subarticle.id">
<a
href=""
:href="'/article/' + subarticle.id"
class="rounded w-full flex flex-col md:flex-row mb-10"
>
<div class="bg-white rounded px-4">
@@ -92,7 +92,7 @@
v-if="article"
>
<a
href="#"
:href="'/article/' + article.id"
>
<img
:src="article.featured_image"
@@ -101,7 +101,7 @@
</a>
<a
href="#"
:href="'/article/' + article.id"
>
<h1
class="text-gray-800 text-3xl font-bold mt-2 mb-2 leading-tigh hover:underline text-right MvTyper"

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

@@ -1,51 +0,0 @@
<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 right-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>