feat: update styles

spa/src/components/FullScreenImageViewer.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="fixed z-200 top-0 inset-0 flex justify-center align-center flex-col h-full bg-black">
+  <div class="fullscreen-image-viewer fixed z-200 top-0 inset-0 flex justify-center align-center flex-col h-full bg-black">
     <Swiper
         :zoom="true"
         :navigation="true"
         :pagination="{
-      type: 'fraction',
-    }"
+          type: 'fraction',
+        }"
         :activeIndex="activeIndex"
         :modules="[Zoom, Navigation, Pagination]"
         class="mySwiper w-full h-full"
@@ -13,7 +13,7 @@
     >
       <SwiperSlide v-for="image in images">
         <div class="swiper-zoom-container">
-          <img :src="image.largeURL" :alt="image.alt"/>
+          <img :src="image.largeURL" :alt="image.alt" class="w-full h-full"/>
         </div>
       </SwiperSlide>
     </Swiper>
@@ -65,3 +65,15 @@ function onClose() {
   emits('close');
 }
 </script>
+
+<style>
+.fullscreen-image-viewer .swiper-button-next,
+.fullscreen-image-viewer .swiper-button-prev {
+  color: white;
+  mix-blend-mode: difference;
+}
+
+.fullscreen-image-viewer .swiper-pagination-fraction {
+  bottom: calc(var(--tg-safe-area-inset-bottom, 0) + var(--tg-content-safe-area-inset-bottom, 0));
+}
+</style>

spa/src/components/ProductImageSwiper.vue

@@ -1,20 +1,24 @@
 <template>
-  <swiper-container ref="swiperEl" pagination="true">
+  <swiper-container ref="swiperEl" init="false" pagination-dynamic-bullets="true">
     <swiper-slide
         v-for="image in images"
         lazy
+        class="bg-base-100 overflow-hidden"
+        style="aspect-ratio:1/1; border-radius:12px;"
     >
       <img
           :src="image.url"
           :alt="image.alt"
           loading="lazy"
+          class="w-full h-full"
+          style="object-fit: contain"
       />
     </swiper-slide>
   </swiper-container>
 </template>
 
 <script setup>
-import {onMounted, ref} from "vue";
+import {onMounted, onUnmounted, ref} from "vue";
 
 const props = defineProps({
   images: {
@@ -23,24 +27,30 @@ const props = defineProps({
   },
 });
 
+const params = {
+  injectStyles: [`
+    .swiper-pagination {
+      position: relative;
+      padding-top: 15px;
+    }
+      `],
+  pagination: {
+    clickable: true,
+  },
+}
+
 const swiperEl = ref(null);
 
-let haptic = true;
+onUnmounted(() => {
+
+});
 
 onMounted(async () => {
   swiperEl.value?.addEventListener('swiperactiveindexchange', (event) => {
     window.Telegram.WebApp.HapticFeedback.selectionChanged();
   });
 
-  swiperEl.value?.addEventListener('swiperprogress', (num) => {
-    if (haptic === false) return;
-    //window.Telegram.WebApp.HapticFeedback.impactOccurred('light');
-    haptic = false;
-    setTimeout(() => haptic = true, 50);
-  });
-
-  swiperEl.value?.addEventListener('swiperreachend', (event) => {
-    //window.Telegram.WebApp.HapticFeedback.impactOccurred('medium');
-  });
+  Object.assign(swiperEl.value, params);
+  swiperEl.value.initialize();
 });
 </script>

spa/src/components/ProductsList.vue

@@ -4,17 +4,17 @@
 
     <div v-if="productsStore.products.data.length > 0">
       <div
-          class="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8"
+          class="products-grid grid grid-cols-2 gap-x-5 gap-y-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8"
       >
         <RouterLink
             v-for="product in productsStore.products.data"
             :key="product.id"
-            class="group"
+            class="product-grid-card group"
             :to="`/product/${product.id}`"
             @click="haptic"
         >
           <ProductImageSwiper :images="product.images"/>
-          <h3 class="mt-4 text-sm">{{ product.name }}</h3>
+          <h3 class="product-title mt-4 text-sm">{{ product.name }}</h3>
           <p class="mt-1 text-lg font-medium">{{ product.price }}</p>
         </RouterLink>
         <div ref="bottom" style="height: 1px;"></div>
@@ -134,3 +134,12 @@ onMounted(async () => {
   }
 })
 </script>
+
+<style scoped>
+.product-grid-card .product-title {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--product_list_title_max_lines, 3);
+  overflow: hidden;
+}
+</style>