Как организовать адаптивное SPA приложение?

Представьте веб-приложение, где пользователю выводится древовидный список (todolist). В мобильной версии это список, при клике на элемент показывается новый список (подзадачи), при клике "назад" возвращается предыдущий список (верхнего уровня), переход анимируется в материальном стиле (как на андроиде). На планшете к этому добавляется левое меню (которое на мобилке скрыто), теперь анимируется не весь экран, а только основная часть со списком (т.е. меню всегда статично). В настольной версии это древовидный список, который можно разворачивать-сворачивать, меню м.б. расширено верхней навигацией.
Вопрос: как это организовать? Не связываются у меня эти три представления, ведь в мобильной версии подзадача открывает новый экран со своим урлом, который добавляется в стек, на планшете похожая история, но из-за статичного меню уже сложнее организовывать экраны в виде стека, а в настольной версии это вообще один экран с единственным урлом и непонятно, как он должен вести себя при уменьшении окна браузера - какой элемент этого большого списка показывать
  • Вопрос задан
  • 515 просмотров
Пригласить эксперта
Ответы на вопрос 2
в настольной версии это вообще один экран с единственным урлом
В этом ваша ошибка - если это SPA, то у каждой "страницы" всё равно должен быть свой URL. Тогда и проблема ваша разрешится.
Ответ написан
Taraflex
@Taraflex
Ищу работу. Контакты в профиле.
1. Урл должен меняться везде одинаково либо не менятся вообще.
2.
Не связываются у меня эти три представления,

Взгляните на него как на одно представляние, у которого есть 2 зависимости
Наличие бок панели => Ширина экрана
Ширина экрана => максимальное число родительских веток доступных одновременно для просмотра
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы