From c24e30f14cef8a4b6956aaa2ada5dc9b12fbb9cb Mon Sep 17 00:00:00 2001 From: Nikita Kiselev Date: Mon, 25 May 2026 10:13:42 +0300 Subject: [PATCH] fix(spa): visual fixes for SPA (#106) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(spa): prevent more-link button from wrapping in block header Long block titles squeezed the "Смотреть всё" link in BaseBlock, causing its text to wrap onto two lines. Allow the title column to shrink and keep the link in a single line. * fix(spa): enable typography styles for product description Add @tailwindcss/typography plugin so the `prose` classes used in the product description actually apply: paragraph spacing, headings, hr, links and tables. Also make wide tables inside `.prose` horizontally scrollable instead of overflowing the viewport. * fix(spa): open description links via Telegram WebApp API Links inside the v-html product description used to navigate the Mini App's WebView away from the app on Telegram mobile. Intercept clicks on anchors in the description and route them through Telegram.WebApp.openTelegramLink for t.me/tg:// targets and Telegram.WebApp.openLink for everything else, falling back to window.open when running outside Telegram. * fix(spa): refine categories list layout Tighten category item typography (text-base, leading-snug) and slightly enlarge the icon for a better balance with long titles. Drop the duplicate "Назад к ..." link and replace the parent-category CTA with a daisyUI soft block button "Показать все товары категории" so the primary action is visually distinct from the list. --- frontend/spa/package-lock.json | 48 +++++++++++++++++++ frontend/spa/package.json | 1 + .../CategoriesList/CategoryItem.vue | 10 ++-- .../components/MainPage/Blocks/BaseBlock.vue | 8 ++-- frontend/spa/src/style.css | 9 ++++ frontend/spa/src/views/CategoriesList.vue | 21 ++------ frontend/spa/src/views/Product.vue | 29 ++++++++++- 7 files changed, 99 insertions(+), 27 deletions(-) diff --git a/frontend/spa/package-lock.json b/frontend/spa/package-lock.json index e668f5d3..5e83128e 100644 --- a/frontend/spa/package-lock.json +++ b/frontend/spa/package-lock.json @@ -23,6 +23,7 @@ "vue-router": "^4.6.3" }, "devDependencies": { + "@tailwindcss/typography": "^0.5.19", "@testing-library/jest-dom": "^6.9.1", "@testing-library/vue": "^8.1.0", "@vitejs/plugin-vue": "^6.0.1", @@ -1588,6 +1589,19 @@ "node": ">= 20" } }, + "node_modules/@tailwindcss/typography": { + "version": "0.5.19", + "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.19.tgz", + "integrity": "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==", + "dev": true, + "license": "MIT", + "dependencies": { + "postcss-selector-parser": "6.0.10" + }, + "peerDependencies": { + "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1" + } + }, "node_modules/@tailwindcss/vite": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.2.1.tgz", @@ -2520,6 +2534,19 @@ "dev": true, "license": "MIT" }, + "node_modules/cssesc": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "dev": true, + "license": "MIT", + "bin": { + "cssesc": "bin/cssesc" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/cssstyle": { "version": "5.3.7", "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-5.3.7.tgz", @@ -4276,6 +4303,20 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/postcss-selector-parser": { + "version": "6.0.10", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz", + "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==", + "dev": true, + "license": "MIT", + "dependencies": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/postcss-value-parser": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", @@ -5051,6 +5092,13 @@ "browserslist": ">= 4.21.0" } }, + "node_modules/util-deprecate": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", + "dev": true, + "license": "MIT" + }, "node_modules/vite": { "version": "7.3.3", "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.3.tgz", diff --git a/frontend/spa/package.json b/frontend/spa/package.json index 313a7188..da79bacf 100644 --- a/frontend/spa/package.json +++ b/frontend/spa/package.json @@ -28,6 +28,7 @@ "vue-router": "^4.6.3" }, "devDependencies": { + "@tailwindcss/typography": "^0.5.19", "@testing-library/jest-dom": "^6.9.1", "@testing-library/vue": "^8.1.0", "@vitejs/plugin-vue": "^6.0.1", diff --git a/frontend/spa/src/components/CategoriesList/CategoryItem.vue b/frontend/spa/src/components/CategoriesList/CategoryItem.vue index 8e5be7d4..d324bdcc 100644 --- a/frontend/spa/src/components/CategoriesList/CategoryItem.vue +++ b/frontend/spa/src/components/CategoriesList/CategoryItem.vue @@ -2,16 +2,16 @@ -
-
- +
+
+
-

{{ category.name }}

+

{{ category.name }}

 diff --git a/frontend/spa/src/components/MainPage/Blocks/BaseBlock.vue b/frontend/spa/src/components/MainPage/Blocks/BaseBlock.vue index 25b81344..9adcf7c5 100644 --- a/frontend/spa/src/components/MainPage/Blocks/BaseBlock.vue +++ b/frontend/spa/src/components/MainPage/Blocks/BaseBlock.vue @@ -1,13 +1,13 @@