feat: update styles

2025-08-08 17:13:41 +03:00
parent 5f785e82e6
commit ca3a59f43a
11 changed files with 93 additions and 32 deletions
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -22,6 +22,8 @@ services:
      - XDEBUG_CLIENT_PORT=9003
      - XDEBUG_DISCOVER_CLIENT_HOST=false
      - PHP_IDE_CONFIG=serverName=orbstack
+      - php.session.gc_maxlifetime=28800
+      - php.session.cookie_lifetime=0

  mysql:
    image: mariadb:10.2.7
--- a/module/oc_telegram_shop/upload/oc_telegram_shop/framework/ImageTool/ImageTool.php
+++ b/module/oc_telegram_shop/upload/oc_telegram_shop/framework/ImageTool/ImageTool.php
@@ -47,7 +47,7 @@ class ImageTool implements ImageToolInterface
            $image = $this->manager->make($fullOldPath)
                ->resize($width, $height, function ($constraint) {
                    $constraint->aspectRatio();
-                    $constraint->upsize();
+                    // $constraint->upsize();
                })
                ->resizeCanvas($width, $height, 'center', false, null);

--- a/module/oc_telegram_shop/upload/oc_telegram_shop/src/Handlers/ProductsHandler.php
+++ b/module/oc_telegram_shop/upload/oc_telegram_shop/src/Handlers/ProductsHandler.php
@@ -57,8 +57,8 @@ class ProductsHandler
        $mainpageProducts = $params['mainpageProducts'];
        $languageId = 1;
        $categoryName = '';
-        $imageWidth = 184;
-        $imageHeight = 245;
+        $imageWidth = 300;
+        $imageHeight = 300;

        if ($categoryId) {
            $categoryName = $this->queryBuilder->newQuery()
@@ -243,6 +243,8 @@ class ProductsHandler
        $languageId = 1;
        $imageWidth = 500;
        $imageHeight = 500;
+        $imageFullWidth = 1000;
+        $imageFullHeight = 1000;

        $product = $this->queryBuilder->newQuery()
            ->select([
@@ -299,7 +301,7 @@ class ProductsHandler
            [$width, $height] = $this->ocImageTool->getRealSize($imagePath);
            $images[] = [
                'thumbnailURL' => $this->ocImageTool->resize($imagePath, $imageWidth, $imageHeight, 'placeholder.png'),
-                'largeURL' => $this->ocImageTool->getUrl($imagePath),
+                'largeURL' => $this->ocImageTool->resize($imagePath, $imageFullWidth, $imageFullHeight, 'placeholder.png'),
                'width' => $width,
                'height' => $height,
                'alt' => $product['product_name'],
--- a/spa/src/components/FullScreenImageViewer.vue
+++ b/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>
--- a/spa/src/components/ProductImageSwiper.vue
+++ b/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>
--- a/spa/src/components/ProductsList.vue
+++ b/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>
--- a/spa/src/main.js
+++ b/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.');
--- a/spa/src/stores/SettingsStore.js
+++ b/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: '🔚 Ну всё, разгрузили всё, что было. Даже кладовщика разбудить не удалось.',
    }),
--- a/spa/src/style.css
+++ b/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 {
@@ -44,3 +44,7 @@ html {
    background-color: red;
    color: red;
 }
+
+.swiper-pagination-bullets {
+    top: 10px;
+}
--- a/spa/src/views/Product.vue
+++ b/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>
--- a/spa/tailwind.config.js
+++ b/spa/tailwind.config.js
@@ -10,5 +10,7 @@ module.exports = {
            },
        },
    },
-    plugins: [require("daisyui")],
+    plugins: [
+        require("daisyui"),
+    ],
 };