diff --git a/tradein-mvp/backend/data/sql/099_brand_praktika_logo_wordmark.sql b/tradein-mvp/backend/data/sql/099_brand_praktika_logo_wordmark.sql new file mode 100644 index 00000000..097fd76e --- /dev/null +++ b/tradein-mvp/backend/data/sql/099_brand_praktika_logo_wordmark.sql @@ -0,0 +1,24 @@ +-- 099_brand_praktika_logo_wordmark.sql +-- Fix: логотип «Практики» в шапке trade-in «поехал» (расплющен в полоску). +-- +-- ПРИЧИНА: logo_url хотлинкал `https://gk-praktika.ru/images/logo/logo-pink.svg` — +-- это розовый КВАДРАТ-знак (viewBox 0 0 69 69) с `preserveAspectRatio="none"` и +-- без width/height. Браузер берёт дефолт-бокс 300×150, CSS даёт height:24/width:auto, +-- width не выводится из viewBox → бокс 300×24 → квадрат растянут в полоску. +-- +-- ФИКС: self-host полноразмерного wordmark «ПРАКТИКА» (символ #i-logo-new из спрайта +-- клиента, viewBox 1498×194, нормальное соотношение) в +-- frontend/public/brands/praktika.svg → отдаётся на /trade-in/brands/praktika.svg. +-- Шапка теперь рендерит wordmark целиком (Topbar убирает дублирующий текст-название). +-- +-- Идемпотентно: UPDATE по PK slug='praktika'. Безопасно ре-применять. +-- +-- NUMBERING: highest на main = 098 → 099. + +BEGIN; + +UPDATE brands +SET logo_url = 'https://gendsgn.ru/trade-in/brands/praktika.svg' +WHERE slug = 'praktika'; + +COMMIT; diff --git a/tradein-mvp/frontend/public/brands/praktika.svg b/tradein-mvp/frontend/public/brands/praktika.svg new file mode 100644 index 00000000..a452e484 --- /dev/null +++ b/tradein-mvp/frontend/public/brands/praktika.svg @@ -0,0 +1 @@ + diff --git a/tradein-mvp/frontend/src/components/trade-in/Topbar.tsx b/tradein-mvp/frontend/src/components/trade-in/Topbar.tsx index 2bddee8c..6260d8ed 100644 --- a/tradein-mvp/frontend/src/components/trade-in/Topbar.tsx +++ b/tradein-mvp/frontend/src/components/trade-in/Topbar.tsx @@ -103,20 +103,22 @@ export function Topbar({ active }: TopbarProps) {
{brand ? ( - <> - {/* logo_url из бренд-конфига → safeUrl (блок javascript:/data: схем, #766). - Невалидный URL → fallback на TI-марку, без broken/опасного img. */} - {safeUrl(brand.logo_url) ? ( - {brand.name} - ) : ( + /* logo_url из бренд-конфига → safeUrl (блок javascript:/data: схем, #766). + Брендовый логотип — полноразмерный wordmark (содержит название), поэтому + отдельный brand-product текст НЕ рендерим, иначе дубль («ПРАКТИКА» ×2). + Невалидный/пустой URL → fallback TI-марка + текстовое название бренда. */ + safeUrl(brand.logo_url) ? ( + {brand.name} + ) : ( + <> TI - )} - {brand.name} - + {brand.name} + + ) ) : ( <> TI diff --git a/tradein-mvp/frontend/src/components/trade-in/trade-in.css b/tradein-mvp/frontend/src/components/trade-in/trade-in.css index 4f6c1a4f..7384e270 100644 --- a/tradein-mvp/frontend/src/components/trade-in/trade-in.css +++ b/tradein-mvp/frontend/src/components/trade-in/trade-in.css @@ -114,8 +114,18 @@ color: var(--muted); text-transform: uppercase; } - /* #657 white-label: логотип клиента вместо «TI»-метки (см. Topbar.tsx) */ - .brand-logo { height: 24px; width: auto; display: block; } + /* #657 white-label: логотип клиента вместо «TI»-метки (см. Topbar.tsx). + object-fit:contain + max-width — защита от расплющивания, если у бренда SVG + без нормального viewBox/с preserveAspectRatio="none" (как был хотлинк + logo-pink.svg). Полноразмерный wordmark (viewBox 1498×194) рендерится ~200×26. */ + .brand-logo { + height: 26px; + width: auto; + max-width: 200px; + object-fit: contain; + object-position: left center; + display: block; + } /* Активный бренд: переопределяем шрифт всего trade-in scope на Manrope. --accent / --accent-2 переопределяются в рантайме из page.tsx (document.documentElement.style.setProperty). Без ?brand= класс не @@ -231,7 +241,12 @@ border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); max-height: calc(100vh - 104px); - overflow: hidden; + /* overflow-y:auto (было hidden) — на коротких вьюпортах (13" MacBook @100%) + форма выше max-height; flex-shrink тела внутри max-height-контейнера не + срабатывает, и кнопка «Оценить» в .form-foot выдавливалась за границу и + обрезалась. Скролл на самой карточке делает кнопку всегда доступной. */ + overflow-y: auto; + overflow-x: hidden; display: flex; flex-direction: column; } @@ -253,7 +268,9 @@ } .form-body { padding: 16px 18px 8px; - overflow-y: auto; + /* overflow-y:visible — скроллом владеет .form-card целиком (см. выше); вложенный + auto-скролл тут не нужен (flex-shrink тела в max-height-контейнере не работал). */ + overflow-y: visible; flex: 1; } .field { margin-bottom: 12px; } @@ -357,6 +374,8 @@ padding: 12px 18px 16px; border-top: 1px solid var(--border); background: linear-gradient(to bottom, transparent, color-mix(in oklch, var(--surface-2) 60%, transparent) 40%); + /* flex-shrink:0 — футер с кнопкой «Оценить» не сжимается при скролле карточки. */ + flex-shrink: 0; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;