diff --git a/miniapp/assets/podbor.css b/miniapp/assets/podbor.css index 7fb5f43..87bdc4b 100644 --- a/miniapp/assets/podbor.css +++ b/miniapp/assets/podbor.css @@ -883,14 +883,21 @@ color: var(--muted); } -/* Сетка карточек */ -.wiz-grid { +/* Сетка карточек (cards-режим — с пиктограммами) */ +.wiz-grid { gap: 10px; } +.wiz-grid--cards { display: grid; grid-template-columns: 1fr 1fr; - gap: 10px; } @media (min-width: 540px) { - .wiz-grid { grid-template-columns: repeat(3, 1fr); } + .wiz-grid--cards { grid-template-columns: repeat(3, 1fr); } +} + +/* Пин-режим (без пиктограмм, компактные таблетки) */ +.wiz-grid--pins { + display: flex; + flex-wrap: wrap; + gap: 8px; } .wiz-card { @@ -970,6 +977,41 @@ } .wiz-tick svg { width: 11px; height: 11px; stroke-width: 2.5; } +/* Пин-карточка (компактная таблетка, без пиктограммы) */ +.wiz-card--pin { + display: inline-flex; + align-items: center; + flex-direction: row; + gap: 8px; + padding: 9px 14px 9px 14px; + border-radius: var(--r-pill); + width: auto; + text-align: left; +} +.wiz-card--pin .wiz-pict, +.wiz-card--pin .wiz-pict-placeholder { display: none; } +.wiz-card--pin .wiz-label { + font-size: 13px; + font-weight: 500; + letter-spacing: -0.005em; +} +.wiz-card--pin .wiz-hint { + font-size: 9.5px; + letter-spacing: 0.04em; + text-transform: none; + font-family: var(--font-sans); + font-weight: 400; + color: var(--muted); +} +.wiz-card--pin .wiz-tick { + position: static; + width: 14px; + height: 14px; +} +.wiz-card--pin .wiz-tick svg { width: 9px; height: 9px; } +.wiz-card--pin.star { padding-left: 26px; } +.wiz-card--pin.star::before { top: 50%; transform: translateY(-50%); } + /* Review-экран */ .rev-list { background: #fff; diff --git a/miniapp/assets/podbor.js b/miniapp/assets/podbor.js index d4f6259..923fd0a 100644 --- a/miniapp/assets/podbor.js +++ b/miniapp/assets/podbor.js @@ -352,15 +352,31 @@ const Podbor = (function () { return o ? `${o.label}` : ""; }).join(""); + // Определяем layout: если ни у одной опции нет pict — компактные пин-кнопки, + // иначе — крупные карточки с пиктограммами. + const hasPicts = options.some(o => o.pict && PODBOR_PICTS[o.pict]); + const gridMode = hasPicts ? "cards" : "pins"; + const cardsHtml = options.map(o => { const isOn = isMulti ? currentArr.includes(o.key) : currentVal === o.key; const pict = o.pict && PODBOR_PICTS[o.pict]; + const cardCls = "wiz-card" + (hasPicts ? "" : " wiz-card--pin") + (isOn ? " on" : "") + (o.star ? " star" : ""); + if (hasPicts) { + return ` + + `; + } + // Пин-режим: компактная inline-кнопка с label, опц. hint мелкий справа return ` - `; }).join(""); @@ -383,7 +399,7 @@ const Podbor = (function () {

${step.title}${isMulti ? ' · можно несколько' : ""}

-
${cardsHtml}
+
${cardsHtml}
${stepIdx > 0 diff --git a/miniapp/index.html b/miniapp/index.html index e333907..baf0516 100644 --- a/miniapp/index.html +++ b/miniapp/index.html @@ -12,8 +12,8 @@ - - + +
@@ -21,10 +21,10 @@
- - - - - + + + + +