78 lines
8.4 KiB
Markdown
78 lines
8.4 KiB
Markdown
# Карточки секции «Активность»: как подобрать настройки
|
||
|
||
Кратко о том, какие атрибуты и классы влияют на вид карточки и как не ломать сетку. Живой каталог всех вариантов — **[`public/cases/mini-projects-showcase.html`](../public/cases/mini-projects-showcase.html)** (исходник `src/pages/cases/mini-projects-showcase.html`). Разметка главной — `src/partials/mini-projects-section.html`, раскладка — `[public/js/modules/mini-projects/masonry.js](../public/js/modules/mini-projects/masonry.js)`, стили — `[public/css/main.css](../public/css/main.css)` (классы `mini-projects-*`, `mp-card*`).
|
||
|
||
## Как устроена сетка
|
||
|
||
- Каждая карточка — элемент `**li.mini-projects-grid__item**` внутри `**ol#mini-projects-list.mini-projects-grid**`.
|
||
- **Ширина в «клетках»** задаётся атрибутом `**data-mp-cells`** со значением от **1** до **3** — это максимум на карточку; в JS значение дополнительно ограничивается (`readDeclaredCells` в `masonry.js`).
|
||
- Фактическое число клеток в ряду (`rowCells`) зависит от ширины списка (контейнера сетки), не от всего экрана целиком:
|
||
- **≥ 1180px** — 6 клеток в ряду
|
||
- **≥ 880px** — 4
|
||
- **≥ 520px** — 2
|
||
- иначе — **1**
|
||
Пороги заданы в `rowCellsForWidth()` в `masonry.js`; при необходимости их можно сдвинуть под макет.
|
||
- Если `**data-mp-cells`** больше, чем `rowCells` (например, на телефоне ряд из одной клетки), скрипт подставит эффективную ширину `min(объявленное, rowCells)`, карточка займёт всю строку.
|
||
|
||
Итог: `**data-mp-cells`** выбирайте в диапазоне **1–3** относительно широкого ряда; самая широкая карточка занимает половину шестиклеточной строки или меньше.
|
||
|
||
## Когда какой модификатор карточки
|
||
|
||
Базовый блок — `**mp-card`**. Дальше — комбинации модификаторов.
|
||
|
||
### `mp-card--stack` (+ опционально `mp-card--link`)
|
||
|
||
- Превью **на всю ширину карточки**, **вплотную** к верхнему и боковым краям; под ним — текст с внутренними отступами.
|
||
- Удобно для **сильного визуала** (скрин, обложка) и **2–4 строк описания**.
|
||
- Ссылка наружу: обёртка `**<a class="mp-card mp-card--link mp-card--stack">`**. В `**h3.mp-card__title`** добавьте `**<span class="mp-card__ext">**` (иконка внешней ссылки появляется при ховере, как в блоке «Опыт работы»).
|
||
|
||
### `mp-card--horizontal` (+ опционально `mp-card--link`)
|
||
|
||
- Превью **слева**, текст **справа** (колонка превью ~22% ширины карточки, не шире **6rem**); на ширине **до ~519px** колонки складываются в столбик (превью сверху), см. медиазапрос в CSS.
|
||
- Подходит, когда картинка **не главный герой**, но нужна миниатюра; текст может быть длиннее, чем в узкой колонке `stack`.
|
||
- У горизонтальной карточки без ссылки превью и текст те же классы `**mp-card__media`** / `**mp-card__body`**, но без `**mp-card--link`** и `**mp-card__ext**`.
|
||
|
||
### `mp-card--horizontal` + `mp-card--hor-image` (+ `mp-card--link`)
|
||
|
||
- Как horizontal, но логотип/иконка: `**object-fit: contain**` в превью, без обрезки по краям. На узком экране превью не растягивается на всю ширину — до **6rem**.
|
||
- Превью с обводкой и скруглением как у `portfolio-card__image` (см. `main.css`, `.mp-card__image`).
|
||
- Пример на главной: Figma Community, `data-mp-cells="2"`, превью `assets/misc/figma_logo.webp`.
|
||
|
||
### `mp-card--compact`
|
||
|
||
- **Только текстовый блок** (`mp-card__body`), без `**mp-card__media`**.
|
||
- Имеет смысл для заметок, чеклистов, коротких описаний без скрина.
|
||
- Ссылка: `**mp-card mp-card--link mp-card--compact`**; без ссылки — обёртка `**article`** или `**div**` с теми же классами без `**mp-card--link**`.
|
||
|
||
### `mp-card--decor`
|
||
|
||
- **Не проект**, а визуальная заглушка в сетке (ровная подложка, паттерн).
|
||
- Внутри: `**span.mp-card__decor-pattern`**; без тела проекта и без ссылки.
|
||
- Задаётся тем же `**data-mp-cells`**, что и у обычных карточек, чтобы заполнить «дыру» в masonry.
|
||
|
||
## Теги типа проекта
|
||
|
||
- Список `**ul.mp-card__tags`** (можно `**aria-label="Тип проекта"`**).
|
||
- Элементы — `**li.mp-card__tag**` с коротким словом (плагин, скрипт, веб-сайт и т.д.).
|
||
- Обычно **один** тег; несколько допустимы, строка тегов переносится.
|
||
|
||
## Свёрнутый блок «Показать все»
|
||
|
||
- Карточки, которые не должны учитываться в **ограниченной высоте** до раскрытия: на `**li`** добавьте `**data-mp-extra`** и атрибут `**hidden`** (скрипт снимает `hidden` для измерения, высота списка в свёрнутом режиме считается только по карточкам **без** `data-mp-extra`).
|
||
- Кнопка с `**data-mp-toggle`** уже есть в разметке; логика — `[expand.js](../public/js/modules/mini-projects/expand.js)`.
|
||
|
||
## Практические подсказки по красоте раскладки
|
||
|
||
1. `**data-mp-cells="3"`** — самая широкая карточка в сетке (на десктопе помещается до двух таких в один ряд при `rowCells === 6`). Для акцента и крупного превью в `**stack`**.
|
||
2. `**2 + 2 + 2`** или `**3 + 3**` на шести клетках часто выглядят ровнее случайного набора — masonry всё равно упакует по высоте; меняйте порядок `**li**` в HTML.
|
||
3. **Горизонтальный шаблон** на `**data-mp-cells="2"`** даёт плотный блок «иконка + текст»; длинный текст чаще уместнее в `**stack`** с `**data-mp-cells="3"`**.
|
||
4. `**mp-card--compact`** и `**data-mp-cells="1"**` — узкая текстовая колонка; хорошо рядом с `**stack**` на **2–3** клетки.
|
||
5. После смены картинок или текста высота пересчитывается на `**resize`** и при `**load`** изображений; если верстка «прыгнула», проверьте размеры превью и порядок элементов в DOM.
|
||
|
||
## Мини-чеклист перед коммитом
|
||
|
||
- У каждой `**li`** задан осмысленный `**data-mp-cells`** (**1–3**).
|
||
- Для ссылки есть `**mp-card--link`** и `**mp-card__ext`** в заголовке.
|
||
- У `**stack`/`horizontal`** с картинкой есть `**mp-card__media`** + `**mp-card__image**` (например, `placeholder.webp` или свой файл).
|
||
- `**data-mp-extra**` только у карточек, которые должны скрываться до «Показать все».
|
||
- Декоративная ячейка — `**mp-card--decor**`, без лишнего интерактива. |