failj/ntspi-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changes

Browse Source
This commit is contained in:
f4ilji
2025-01-09 13:26:14 +05:00
parent 7fb6b482b7
commit fb2bfc2924
2 changed files with 50 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Components/BuilderUi/Pages/Blocks/PageResourceList.vue
+35 -8
View File
@@ -35,23 +35,42 @@
<!-- End Title --> <!-- End Title -->
<!-- Grid --> <!-- Grid -->
<div class="flex overflow-x-auto space-x-6 mb-10 lg:mb-14 p-4"> <div class="flex md:justify-center overflow-x-auto space-x-6 mb-10 lg:mb-14 p-4">
<!-- Card --> <!-- Card -->
<Link v-for="item in resource.data.content" class="group flex-shrink-0 w-64 flex flex-col bg-white border shadow-sm rounded-xl hover:shadow-md focus:outline-none focus:shadow-md transition" :href="item.link"> <Link
v-for="item in resource.data.content"
class="group flex-shrink-0 w-64 flex flex-col bg-white border shadow-sm rounded-xl hover:shadow-md focus:outline-none focus:shadow-md transition"
:href="item.link"
>
<div class="aspect-w-16 aspect-h-9"> <div class="aspect-w-16 aspect-h-9">
<img v-if="item.image" class="w-full backdrop-blur-xl object-cover rounded-t-xl h-[150px]" :src="'/storage/' + item.image" alt="Blog Image"> <img
<div v-else :class="randomBgClass()" class="w-full object-cover rounded-t-xl h-[150px] bg-gradient-to-tr" /> v-if="item.image"
class="w-full backdrop-blur-xl object-cover rounded-t-xl h-[150px]"
:src="'/storage/' + item.image"
alt="Blog Image"
>
<div
v-else
:class="randomBgClass()"
class="w-full object-cover rounded-t-xl h-[150px] bg-gradient-to-tr"
/>
</div> </div>
<div class="p-4 md:p-5"> <div class="p-4 md:p-5 flex flex-col flex-grow">
<p class="mt-2 text-xs uppercase text-gray-600">{{ item.model_select }}</p> <!-- <p class="mt-2 text-xs uppercase text-gray-600">{{ item.model_select }}</p> -->
<h3 class="mt-2 text-lg font-medium text-gray-800 group-hover:text-blue-600">{{ item.title }}</h3> <h3 class="my-2 text-lg font-medium text-gray-800 group-hover:text-blue-600">
<p class="mt-2 text-xs text-gray-600">{{ item.link_text }}</p> {{ textLimit(item.title, 40) }}
</h3>
<p class="text-xs text-gray-600 mt-auto group-hover:text-gray-900">
{{ item.link_text }}
</p>
</div> </div>
</Link> </Link>
</div> </div>
<!-- End Grid --> <!-- End Grid -->
@@ -93,6 +112,14 @@ export default {
randomBgClass() { randomBgClass() {
return this.colors[Math.floor(Math.random() * this.colors.length)]; return this.colors[Math.floor(Math.random() * this.colors.length)];
}, },
textLimit(text, symbols) {
if (text.length > symbols) {
let LimitedText;
LimitedText = text.substring(0, symbols);
return LimitedText + "...";
}
return text;
},
}, },
mounted() { mounted() {
const id = this.block?.data.resource || this.resourceId const id = this.block?.data.resource || this.resourceId
resources/js/mixins/LinksReform.js
+15 -15
View File
@@ -29,20 +29,20 @@ export const linksReform = {
this.clearBodyStyles(); this.clearBodyStyles();
// const hostname = window.location.hostname; const hostname = window.location.hostname;
// const defaultLinks = Array.from(this.getDefaultLinks()); const defaultLinks = Array.from(this.getDefaultLinks());
//
// const reactiveLinks = this.createReactiveLinks(defaultLinks, hostname); const reactiveLinks = this.createReactiveLinks(defaultLinks, hostname);
//
// reactiveLinks.forEach(link => { reactiveLinks.forEach(link => {
// link.addEventListener('click', (event) => { link.addEventListener('click', (event) => {
// event.preventDefault(); event.preventDefault();
// this.clearBodyStyles(); this.clearBodyStyles();
// const url = link.getAttribute('href'); const url = link.getAttribute('href');
// this.$inertia.visit(url, { this.$inertia.visit(url, {
// preserveScroll: false, preserveScroll: false,
// }); });
// }); });
// }); });
} }
}; };