From 5715c4c6c8013e99608b1aedafa36768d53ce1d1 Mon Sep 17 00:00:00 2001
From: Dhaverd <jedi55@mail.ru>
Date: Wed, 18 Jun 2025 14:11:16 +0800
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20?=
 =?UTF-8?q?=D0=B0=D0=B4=D0=B0=D0=BF=D1=82=D0=B8=D0=B2=D0=BD=D0=BE=D1=81?=
 =?UTF-8?q?=D1=82=D0=B8=20=D0=BF=D0=BE=D0=B4=20=D0=BC=D0=BE=D0=B1=D0=B8?=
 =?UTF-8?q?=D0=BB=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/ServiceLinks/ServicesLinks.vue      | 38 +++++++++++++++----
 1 file changed, 31 insertions(+), 7 deletions(-)

diff --git a/resources/views/ServiceLinks/ServicesLinks.vue b/resources/views/ServiceLinks/ServicesLinks.vue
index 6682286..a0e381c 100644
--- a/resources/views/ServiceLinks/ServicesLinks.vue
+++ b/resources/views/ServiceLinks/ServicesLinks.vue
@@ -8,7 +8,10 @@ export default {
     data: () => ({
         links: ref([]),
         servicesListStore: useServicesList(),
-        fetching: true
+        fetching: true,
+        windowHeight: document.documentElement.clientHeight,
+        windowWidth: document.documentElement.clientWidth,
+        isWide: window.innerWidth >= 654
     }),
     mounted() {
         this.fetching = true;
@@ -16,24 +19,41 @@ export default {
             this.links = this.servicesListStore.links;
             this.fetching = false;
         });
-    }
+        this.myEventHandler();
+        window.addEventListener("resize", this.myEventHandler, { passive: true });
+    },
+    methods: {
+        myEventHandler(e) {
+            this.windowHeight = document.documentElement.clientHeight;
+            this.windowWidth = document.documentElement.clientWidth;
+            this.isWide = this.windowWidth >= 654;
+        }
+    },
+    created() {
+        window.addEventListener("resize", this.myEventHandler);
+    },
 }
 </script>
 
 <template>
     <v-app>
         <v-sheet class="bg-gradient h-100 w-100 d-flex justify-center">
-            <v-sheet class="bg-grey-darken-3 mt-5 mb-5 rounded-lg w-75 pl-3">
-                <p class="text-h3 text-center pt-3">Список сервисов и страниц</p>
-                <v-skeleton-loader v-if="fetching"/>
+            <v-sheet class="bg-grey-darken-3 mt-5 mb-5 rounded-lg w-75 pl-3 pr-3">
+                <p class="text-xl-h3 text-lg-h3 text-md-h4 text-sm-h4 text-h5 text-center pt-3">Список сервисов и страниц</p>
+                <v-skeleton-loader v-if="fetching" class="bg-grey-darken-3" type="card"/>
                 <div class="pt-5 h-100" v-else>
-                    <v-row class="ma-0" v-for="n in Math.ceil(links.length / 3)">
+                    <v-row class="ma-0" v-for="n in Math.ceil(links.length / 3)" v-if="isWide">
                         <v-col class="d-flex justify-center align-center" v-for="j in 3">
-                            <v-btn v-if="links[(n - 1) * 3 + j - 1]" class="w-100 h-100 pa-5 text-white" style="background-color: #E08E79" :href="links[(n - 1) * 3 + j - 1].link" target="_blank">
+                            <v-btn v-if="links[(n - 1) * 3 + j - 1]" class="w-100 h-100 pa-5 text-white mt-5 mb-5 bg-btn" :href="links[(n - 1) * 3 + j - 1].link" target="_blank">
                                 {{ links[(n - 1) * 3 + j - 1].name }}
                             </v-btn>
                         </v-col>
                     </v-row>
+                    <div v-else class="ma-0">
+                        <v-btn class="w-100 h-100 pa-5 text-white mt-5 mb-5 bg-btn" v-for="link in links" :href="link.link" target="_blank">
+                            {{ link.name }}
+                        </v-btn>
+                    </div>
                 </div>
             </v-sheet>
         </v-sheet>
@@ -51,4 +71,8 @@ export default {
         repeating-conic-gradient(from 90deg,var(--c))
         0/calc(3*var(--s)) calc(3*var(--s))
 }
+
+.bg-btn {
+    background-color: #E08E79
+}
 </style>