generated from dwd/boilarplate-astro-tailwind
134 lines
7.3 KiB
Vue
134 lines
7.3 KiB
Vue
<template>
|
|
<div>
|
|
<section class="container mx-auto px-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
|
|
<div v-for="item in items" :key="item.id" class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
|
|
<div class="flex flex-col">
|
|
<div>
|
|
<a class="flex flex-col" :href="`/hi/${item.slug}`">
|
|
<img class="aspect-video rounded-t-lg" :src="item.img" :alt="item.title" />
|
|
<h2 class="text-lg text-justify">{{ item.title }}</h2>
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<!-- Overlay -->
|
|
<div v-if="item.dialogOpen" class="fixed inset-0 bg-black opacity-50"></div>
|
|
<dialog :id="`d-${item.id}`" class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%] dialog" :open="item.dialogOpen">
|
|
<form method="dialog">
|
|
<div class="flex flex-col md:flex-col">
|
|
<a :href="`/hi/${item.slug}`" class="flex flex-col md:flex-col">
|
|
<img class="rounded-t-xl" :src="item.img" :alt="item.title" />
|
|
<h1 class="text-lg font-bold">{{ item.heading }}</h1>
|
|
<h2 class="text-justify">{{ item.in_brief }}</h2>
|
|
</a>
|
|
<div class="flex flex-row place-content-between place-items-center">
|
|
<div class="flex flex-row place-content-between place-items-center p-2 space-x-6 shadow-lg shadow-gray-400 rounded-2xl">
|
|
<a class="hover:-translate-y-2 duration-[1s]" :href="`whatsapp://send?text=${item.title}%20%0A%20https://barta-india.in/hi/${item.slug}`" data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
|
|
<a class="hover:-translate-y-2 duration-[1s]" :href="`https://www.facebook.com/share.php?u=https://barta-india.in/hi/${item.slug}`" target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>
|
|
<a class="hover:-translate-y-2 duration-[1s]" :href="`http://www.twitter.com/share?url=https://barta-india.in/hi/${item.slug}&text=%20${item.title}`" target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
|
|
<a class="hover:-translate-y-2 duration-[1s]" :href="`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/hi/${item.slug}&title=${item.title}&summary=${item.title}&source=${item.title}`" onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
|
|
<!-- <a class="hover:-translate-y-2 duration-[1s]" :href="`whatsapp://send?text=${item.title}%20%0A%20https://barta-india.in/${item.slug}`" data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
|
|
<a class="hover:-translate-y-2 duration-[1s]" :href="`https://www.facebook.com/share.php?u=https://barta-india.in/hi/${item.slug}`" target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>
|
|
<a class="hover:-translate-y-2 duration-[1s]" :href="`http://www.twitter.com/share?url=https://barta-india.in/${item.slug}&text=${item.title}`" target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
|
|
<a class="hover:-translate-y-2 duration-[1s]" :href="`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${item.slug}&title=${item.title}&summary=${item.title}&source=${item.title}`" onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a> -->
|
|
</div>
|
|
<div class="flex border-b-4 border-gray-500 border-t rounded-full text-3xl hover:rotate-180 duration-[3s]">
|
|
<button class="text-white font-bold py-2 px-4 bg-[#780a0a] rounded-full shadow-xl" @click="closeDialog(item)">✘</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</dialog>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-row place-content-between">
|
|
<button @click="openDialog(item)" class="bg-[#780a0a] text-white rounded-md font-bold py-2 px-6">In Brief</button>
|
|
<a :href="`/hi/${item.slug}`" class="bg-[#780a0a] text-white rounded-md font-bold py-2 px-6">Details</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
items: [],
|
|
};
|
|
},
|
|
methods: {
|
|
openDialog(item) {
|
|
item.dialogOpen = true;
|
|
|
|
window.addEventListener('keydown', this.handleKeyDown);
|
|
},
|
|
closeDialog(item) {
|
|
item.dialogOpen = false;
|
|
|
|
window.removeEventListener('keydown', this.handleKeyDown);
|
|
},
|
|
handleKeyDown(event) {
|
|
if (event.key === 'Escape') {
|
|
|
|
this.items.forEach(item => {
|
|
item.dialogOpen = false;
|
|
});
|
|
|
|
window.removeEventListener('keydown', this.handleKeyDown);
|
|
}
|
|
},
|
|
getData() {
|
|
let fullURL = window.location.href.split('/')[5].split('?cat=')[1];
|
|
// console.log(fullURL);
|
|
fetch(`https://apisp.dev2.cicdhosting.com/_dedicated/dwd/category-hi/?cat=${fullURL}`)
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
// console.log(data);
|
|
this.items = data;
|
|
|
|
this.items.forEach(item => {
|
|
item.dialogOpen = false;
|
|
});
|
|
})
|
|
.catch(error => {
|
|
console.error('There was a problem with the fetch operation:', error);
|
|
});
|
|
},
|
|
},
|
|
mounted() {
|
|
this.getData();
|
|
}
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
.dialog {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background-color: white; /* Adjust as needed */
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
/* Additional styles for the overlay (optional) */
|
|
.dialog-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
|
|
z-index: 999; /* Ensure the overlay is above other content */
|
|
}
|
|
</style>
|
|
|
|
|