From fb2bfc292485ecd4155f04e2ff48852e20756cdf Mon Sep 17 00:00:00 2001
From: f4ilji <F4ilji@yandex.ru>
Date: Thu, 9 Jan 2025 13:26:14 +0500
Subject: [PATCH] Changes

---
 .../Pages/Blocks/PageResourceList.vue         | 43 +++++++++++++++----
 resources/js/mixins/LinksReform.js            | 30 ++++++-------
 2 files changed, 50 insertions(+), 23 deletions(-)

diff --git a/resources/js/Components/BuilderUi/Pages/Blocks/PageResourceList.vue b/resources/js/Components/BuilderUi/Pages/Blocks/PageResourceList.vue
index ec828b6..6c61559 100644
--- a/resources/js/Components/BuilderUi/Pages/Blocks/PageResourceList.vue
+++ b/resources/js/Components/BuilderUi/Pages/Blocks/PageResourceList.vue
@@ -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
diff --git a/resources/js/mixins/LinksReform.js b/resources/js/mixins/LinksReform.js
index 7bcc104..90b5e33 100644
--- a/resources/js/mixins/LinksReform.js
+++ b/resources/js/mixins/LinksReform.js
@@ -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,
+                });
+            });
+        });
     }
 };
\ No newline at end of file