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 -->
<!-- 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 -->
<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">
<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">
<div v-else :class="randomBgClass()" class="w-full object-cover rounded-t-xl h-[150px] bg-gradient-to-tr" />
<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"
>
<div
v-else
:class="randomBgClass()"
class="w-full object-cover rounded-t-xl h-[150px] bg-gradient-to-tr"
/>
</div>
<div class="p-4 md:p-5">
<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>
<p class="mt-2 text-xs text-gray-600">{{ item.link_text }}</p>
<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> -->
<h3 class="my-2 text-lg font-medium text-gray-800 group-hover:text-blue-600">
{{ textLimit(item.title, 40) }}
</h3>
<p class="text-xs text-gray-600 mt-auto group-hover:text-gray-900">
{{ item.link_text }}
</p>
</div>
</Link>
</div>
<!-- End Grid -->
@@ -93,6 +112,14 @@ export default {
randomBgClass() {
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() {
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();
// const hostname = window.location.hostname;
// const defaultLinks = Array.from(this.getDefaultLinks());
//
// const reactiveLinks = this.createReactiveLinks(defaultLinks, hostname);
//
// reactiveLinks.forEach(link => {
// link.addEventListener('click', (event) => {
// event.preventDefault();
// this.clearBodyStyles();
// const url = link.getAttribute('href');
// this.$inertia.visit(url, {
// preserveScroll: false,
// });
// });
// });
const hostname = window.location.hostname;
const defaultLinks = Array.from(this.getDefaultLinks());
const reactiveLinks = this.createReactiveLinks(defaultLinks, hostname);
reactiveLinks.forEach(link => {
link.addEventListener('click', (event) => {
event.preventDefault();
this.clearBodyStyles();
const url = link.getAttribute('href');
this.$inertia.visit(url, {
preserveScroll: false,
});
});
});
}
};