Как лучше это сверстать?

Question

[sergey]

Надо сверстать вот такую штуку на Bootstrap. Думаю как лучше это сделать? Кидается в глаза возможно с помощью аккордеона, но вот как быть тогда с фильтром статуса заказов? Подскажите как правильно поступить, а то голова что-то не работает:). Спасибо за советы!

Comments

[Алексей A]

Как быть с фильтром статуса заказов? Можно JS просто скрывать блоки аккордеона у которых класс, скажем, не "canceled".

Answer 1

[Алексей A]

Типа такого? codepen.io

Всё делается просто через классы.
$('.filter-btn').toggleClass('open'); и $('.filter-btn').removeClass('open');

Comments

[sergey]

ну где-то так, попробую

[Илья Ерохин]

это хорошо. А как фильтровать список?

[sergey]

AirWorker: я решил использовать исключительно bootstrap, табы (фильтровать по id) и аккордеон внутри

[Алексей A]

AirWorker: в смысле? Судя по макету, тут можно применить только один из фильтров. А дальше просто сортировка по дате.

[Илья Ерохин]

Алексей A:

> Судя по макету, тут можно применить только один из фильтров.

Один, но применить-то его нужно! Например ВСЕ - это без фильтров, ТЕКУЩИЕ - это только те где статус "текущий", и т. д. Или предлагаете на сервере формировать отдельно контент под каждый таб?

[Алексей A]

AirWorker: Можно сразу отдавать ВСЕ заказы, потом на клиенте их фильтровать. А что бы не перегружать себя и пользователя отдавать за один раз, скажем, до 50 заказов (или заказы за последний месяц и т.п.).
Таким образом, клиент при применении фильтров сразу же получит результат.

[Илья Ерохин]

> А что бы не перегружать себя и пользователя отдавать за один раз, скажем, до 50 заказов

поверьте, можно отдавать абсолютно все сразу за все время ;)

[Алексей A]

AirWorker: Вообще, всё зависит от того, что за сервис. Видел интернет-магазины, где на странице отображается 10 предметов, а применяя фильтр отравляется запрос к серверу и идёт ожидание ответа (плохой UX). Понятно, что если товаров тысячи, тогда действительно всё нужно фильтровать на сервере.

Answer 2

[Артур]

если бутстрап брать, то только на аккордеон... хотя и там можно без него обойтись.
лучше с нуля сделать без лишних оверрайдов.
по фильтру приходит мысль об ангуляре или реакте... но тут дело индивидуальное)

Comments

[Артур]

Хотя! так как заказы одновременно могут быть только в одной из групп фильтра, то можно тот же бутстрап взять и табы оттуда воткнуть

[sergey]

Артур: табы? а они каким боком сюда? в заглавии?

[Артур]

ну да, в фильтре.

[Артур]

Артур: но, опять же, лучше на фреймворке нормально сделать

[sergey]

Артур: ок, спасибо за совет, буду верстать

[sergey]

Артур: ну хотят чтобы в базисе был бутстрап

Answer 3

[Илья Ерохин]

список рендерим ангуляром, фильтруем ангуляром. Строки делаем бутсраповским аккордеоном. Делов-то ))

Comments

[sergey]

в angular.js не силен

[Илья Ерохин]

SM: ну так придется выучить. Или что-то подобное. Или через боль и косяки на jQuery или ванили

[sergey]

AirWorker: да учу, просто времени на это не хватит, надо сделать уже:)))

Answer 4

[global Error]

А в чем там проблема? Если ваша задача как верстальщик то делайте как видите, потом оптимизируйте.....

Comments

[Serj-One]

Ага. Сначала делать, потом думать? Любой адекватный разработчик сначала продумывает архитектуру, и лишь после этого начинает собственно разработку. Иначе последующая "оптимизация" вполне может обернуться полной переработкой.

[global Error]

Serj-One: Это првильно подметили вы. Jquery UI accordion widget в помощь.