Нужно сделать верстку как на дизайне чтобы первая колонка в таблице на узких экранах фиксировалась, а остальные колонки можно было свайпать влево/вправо.
Все стили нужно делать в отдельном файле niche.css. Этот файл нужно подключить к проекту.
Все классы должны быть названы с префиксом "niche-" чтобы не было конфликтов с другими элементами на других страницах.
ВАЖНО: код фильтра должен быть один. Нельзя делать отдельно фильтр для десктопа и отдельно для мобайла. В html это должен быть 1 блок.
Страница категорий уже сверстана "на скорую руку", расположена по адресу mypulse.ru/test
Нужно сделать верстку чтобы она соответствовала макету.
---
Дизайн в фигме:
www.figma.com/file/m3pw86...
Комментарии по макетам:
- Категории на десктопе
www.figma.com/file/m3pw86...
Фильтр постоянно открыт и не сворачивается
- Категории на планшете
www.figma.com/file/m3pw86...
Фильтр постоянно открыт и не сворачивается
Первая колонка в таблице зафиксирована, а остальные колонки можно было свайпать влево/вправо.
Количество столбцов в таблице будет добавляться.
- Категории на мобайле (фильтр открыт)
www.figma.com/file/m3pw86...
По-умолчанию фильтр открыт. При нажатии на "Подобрать" фильтр закрывается и отсылается ajax запрос. При нажатии на "Закрыть" фильтр просто закрывается.
- Категории на мобайле (фильтр закрыт)
www.figma.com/file/m3pw86...
Фильтр можно открыть кликнув на розовую иконку фильтра фильтра с нижнем правом углу экрана. Кнопка фильтра статичная (position: absolute) и не двигается при скроле страницы.
Первая колонка в таблице зафиксирована, а остальные колонки можно было свайпать влево/вправо.
Количество столбцов в таблице будет добавляться.
- Товары на десктопе
www.figma.com/file/m3pw86...
Просто таблица
- Товары на планшете
www.figma.com/file/m3pw86...
Первая колонка в таблице зафиксирована, а остальные колонки можно было свайпать влево/вправо.
Количество столбцов в таблице будет добавляться.
- Товары на мобайле
www.figma.com/file/m3pw86...
Первая колонка в таблице зафиксирована, а остальные колонки можно было свайпать влево/вправо.
Количество столбцов в таблице будет добавляться.
---
На проекте уже используется эта тема:
demos.creative-tim.com/ma...
Максимум элементов нужно взять из темы, например такие как: