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

Designs and API Routes

Browse Source
This commit is contained in:
Mohamed Jinas
2020-08-09 03:43:00 +05:00
parent 55b98e1b86
commit 11a129ec3b
20 changed files with 125691 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
resources/js/components/TodaysPick.vue Normal file
View File

@@ -0,0 +1,149 @@
<template>
<div>
<div>
<h3
class="text-gray-800 font-bold text-3xl mb-2 MvAamu"
style="direction: rtl;"
>
މިއަދުގެ ޙުލާސާ
</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"
class="rounded w-full flex flex-col md:flex-row mb-10"
>
<div class="bg-white rounded px-4">
<span
class="text-green-700 text-md font-normal hidden md:block text-right"
v-text="subarticle.source.name"
style="direction:rtl;"
></span>
<div
class="text-gray-600 text-md mt-1 flex justify-end items-center"
>
<svg
class="h-4 w-4"
viewBox="0 0 443.294 443.294"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M221.647 0C99.433 0 0 99.433 0 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647S343.861 0 221.647 0zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z"
/>
<path
d="M235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z"
/>
</svg>
<span class="ml-1" v-text="article.readtime"></span>
</div>
<div
class="md:mt-0 text-gray-800 font-semibold text-xl mb-2 text-right"
v-text="subarticle.title"
style="direction:rtl;"
></div>
<p
class="block md:hidden p-2 pl-0 pt-1 text-sm text-gray-600"
>
Wonder matter now can estate esteem assure fat
roused. Am performed on existence as discourse is.
Pleasure friendly at marriage blessing or
</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"
/>
</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="#">
<img
:src="article.featured_image"
class="rounded-md object-cover w-full h-3/4"
/>
</a>
<div>
<span
class="flex justify-end text-green-700 text-md font-normal"
v-text="article.source.name"
></span>
</div>
<a href="#">
<h1
class="text-gray-800 text-3xl font-bold mt-2 mb-2 leading-tigh hover:underline text-right MvAamu"
style="direction:rtl;"
>
އިންޑިއާއަށް ބޭހަށްދިޔަ 8 ދިވެހިން ޕޮޒިޓިވް
</h1>
</a>
<div class="text-gray-600 text-md mt-4 flex justify-end items-center">
<p class="text-gray-600 text-right">
{{ article.published_date | moment("calendar") }}
&#8210;
</p>
<span class="mr-1 ml-1" v-text="article.readtime"></span>
<svg
class="h-4 w-4"
viewBox="0 0 443.294 443.294"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M221.647 0C99.433 0 0 99.433 0 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647S343.861 0 221.647 0zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z"
/>
<path
d="M235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z"
/>
</svg>
</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.data[0];
this.subarticles = response.data.data.slice(1, 5);
})
.catch(error => {
console.log(error);
});
}
};
</script>