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>

spa/src/main.js

@@ -11,7 +11,6 @@ import ApplicationError from "@/ApplicationError.vue";
 import AppMetaInitializer from "@/utils/AppMetaInitializer.ts";
 import {injectYaMetrika} from "@/utils/yaMetrika.js";
 
-
 import { register } from 'swiper/element/bundle';
 import 'swiper/element/bundle';
 import 'swiper/css/bundle';
@@ -44,6 +43,10 @@ settings.load()
                 document.documentElement.setAttribute('data-theme', settings.theme[this.colorScheme]);
             });
         }
+
+        for (const key in settings.theme.variables) {
+            document.documentElement.style.setProperty(key, settings.theme.variables[key]);
+        }
     })
     .then(() => {
         console.log('Load front page categories and products.');

spa/src/stores/SettingsStore.js

@@ -16,6 +16,9 @@ export const useSettingsStore = defineStore('settings', {
         theme: {
             light: 'light',
             dark: 'dark',
+            variables: {
+                '--product_list_title_max_lines': 2,
+            }
         },
         noMoreProductsMessage: '🔚 Ну всё, разгрузили всё, что было. Даже кладовщика разбудить не удалось.',
     }),

spa/src/style.css

@@ -13,7 +13,7 @@ html {
     --swiper-navigation-color: var(--color-primary);
     --swiper-pagination-bullet-inactive-color: var(--color-base-content);
     --swiper-pagination-fraction-color: var(--color-neutral-content);
-    --swiper-pagination-bottom: var(--tg-safe-area-inset-bottom);
+    --product_list_title_max_lines: 1;
 }
 
 .swiper-pagination-bullets {
@@ -43,4 +43,8 @@ html {
 .swiper-pagination-bullets > .swiper-pagination-bullet {
     background-color: red;
     color: red;
+}
+
+.swiper-pagination-bullets {
+    top: 10px;
 }

spa/src/views/Product.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="pb-10">
     <div>
-      <swiper-container
-          pagination="true"
-      >
+      <swiper-container ref="swiperEl" init="false">
         <swiper-slide
           v-for="(image, index) in product.images"
           lazy="true"
@@ -205,6 +203,8 @@ function onPopState() {
   }
 }
 
+const swiperEl = ref(null);
+
 onUnmounted(() => {
   window.removeEventListener('popstate', onPopState);
 });
@@ -215,8 +215,7 @@ onMounted(async () => {
 
   window.addEventListener('popstate', onPopState);
 
-  const swiperEl = document.querySelector('swiper-container');
-  swiperEl.addEventListener('swiperslidermove', (event) => {
+  swiperEl.value.addEventListener('swiperslidermove', (event) => {
     if (!canVibrate) return;
     window.Telegram.WebApp.HapticFeedback.impactOccurred('soft');
     canVibrate = false;
@@ -224,5 +223,20 @@ onMounted(async () => {
       canVibrate = true;
     }, 50);
   });
+
+  Object.assign(swiperEl.value, {
+    injectStyles: [`
+    .swiper-pagination {
+      position: relative;
+      padding-top: 15px;
+    }
+      `],
+    pagination: {
+      dynamicBullets: true,
+      clickable: true,
+    },
+  });
+
+  swiperEl.value.initialize();
 });
 </script>

spa/tailwind.config.js

@@ -10,5 +10,7 @@ module.exports = {
             },
         },
     },
-    plugins: [require("daisyui")],
+    plugins: [
+        require("daisyui"),
+    ],
 };