Страница: Region
vladimir075 opened this issue · 38 comments
Николай, прошу следующей по последовательности отрисовать страницу региона
@Evgeniygavr Жень, прошу прокомментировать для Николая особенности ее поведения. Sidebar как у нас там себя должен вести?
Не конкретной локации, а региона, ясно.
Артборд region.
Да, хочется понять что там с филльтром, который всерху и с сайдбаром.
Давайте оставим фильтр прибитым на странице (чтобы он не ездил за пользователем, как на странице поиска), а сайдбар в мобильном, я ранее писал, не отображаем. Ни на одном макете мобильного вида его нет.
@Evgeniygavr ok, фильтр прибью, при скролле страницы будет оставаться на месте.
Вопросы и уточнения:
-
В мобильном представлении фильтр скрыт? В дизайне мобилки его не вижу, сделаю пока так, чтобы он был виден, ибо это его поведение по умолчанию.
-
В мобилке есть блок со вставкой видео с ютуба, его дейтсивтельно не должно быть на широких экранах?
Николай, пока @Evgeniygavr пару дней в ограниченном доступе к интернету, и поэтому видимо отвечает не сразу, прокомментирую, как понимаю.
@Evgeniygavr прошу также прокомментировать как только получишь сообщение, а то мы без тебя тут запутаемся.
Итак мое понимание-
- https://projects.invisionapp.com/boards/65397FVNFXAKJ/#/5468395/165339947 это те макеты которые вижу я. Тут есть фильтр
- в десктопе, видео, конечно же, тоже есть. Видимо Евгений забыл его туда добавить, посколько это было из последних правок
https://projects.invisionapp.com/share/2MBJ7MQ68#/screens/233081294
-
по ссылке я вижу: http://take.ms/JCM0h (фильтра над контентом нет) Что-то не так, вопрос остается открытым.
-
ok. Только с пропорциями проблема: видеовставка должна иметь одинаковые пропорции, если это одно видео, а сейчас на мобилке оно примерно 3/4, на десктопе примерно 16/9. Сделаю вставку видео с ютуба адаптивной, под 16/9. При желании допишу потом возможность вставки видео иных пропорций.
- Если я правильно понимаю верхний фильтр, переносится вниз на мобиле. Это то что на макете называется Properties filter
- Ждем прояснений @Evgeniygavr
- На странице поиска вверху всегда есть поле поиска, по клике на кнопку в НПУ появляется модалка с доп. опциями. Тут, вероятно, идентично. Пока делаю видимое поле поиска над контентом по принципу бритвы Оккама. Ждем пояснений от Евгения.
Ряд неизвестных мне терминов )) Может речь про адресную строку, а не про фильтры поиска? если да, то я неправильно понял. Если про адресную строку, а не про фильтры поиска, то вроде как на странице региона она у Евгения задумана не была. Ждем уточнений @Evgeniygavr
прибитый фильтр немного напрягает, страница же не только текстовые фрагменты содержит:
Согласен, что в данной картинке напрягает его прибитость. Ждем прояснений @Evgeniygavr
вопрос 3 про картинки: на мобилке и в десктопе контентная картинка со скалой отличается. Предполагалось использование адаптивной графики с подгрузкой разных изображений для разных случаев?
(пока использую одно, бездеформационно ограничу верт. размер для мобилок)
По фильтру я написал "прибить к верху, чтобы он не ездил". На странице поиска ездит за пользователем, на странице региона - нет. В мобильном варианте фильтр спрятался в кнопку внизу "Properties filter".
Видео есть и в декстопе, и в мобильном. Правка вносилась в последние дни перед здачей проекта, поэтому стоит скачать заново макеты. Извините, что не упомянул об этом сразу. Формат видео можно оставить 3:4 везде.
Фото. Идея была скейлить фото в зависимости от экрана с обязательным центрированием. Пример, что я имею ввиду - здесь http://korrespondent.net/ (измените размер экрана.)
https://nicothin.github.io/greeceru/region.html
фото в контенте: ограничил макс. высоту на мобилках.
Вопросы
- @Evgeniygavr в десктопной версии этой страницы у нас какие-нибудь сайдбары приклеены?
- @nicothin здесь также видео https://projects.invisionapp.com/share/2MBJ7MQ68#/screens/233081294
- при открытии нижней кнопки properties filter, нижняя кнопка show 123 properties подлезает под кнокпки properties filter/regions (айфон 6) Если это аналогично и в других местах, и я просто не заметил, надо поправить.
2 так есть же видео: http://take.ms/0XSL5
3 исправил, через минуту задеплоится
@Evgeniygavr Жень, прошу прокомментировать мой вопрос выше.
Дублирую- есть ли на странице региона https://nicothin.github.io/greeceru/region.html в десктоп версии какие-нибудь стационарные (приклеенные) сайдбары. их поведение.
А также внести любые другие замечания по верстке, если таковые имеется. Либо утвердить верстку данной страницы
Да, на этой странице есть сайдбар для десктопа, он же есть в макете. За пользователем блок "regions of greece" в данном случае не ездит, т.к. по высоте он не влезет в экран. Поэтому его делаем статичным.
upd. По верстке не знаю к чему придраться. Выглядит все здорово.
upd 2. Единственный нюанс. Вот на таком разрешении у нас карточки с объектами начинают перестраиваться - скрин Можем ли мы как-то сделать, чтобы 4-ый объект не висел по центру в одиночестве?
Это вопрос к Николаю и верстке или же вопрос наполнения базы объектов? Если по верстке - то может лучше в таком случае этот "висящий" объект скрывать?
upd 3. Этот блочок, с объектами, у нас дублируется на многих страницах, если что, а не только на этой странице.
@greeceruit вопрос выше
Так, оставляем тогда как есть: статичный сайдбар и полный список регионов.
@Evgeniygavr "статичный сайдбар" это который join community?
это который справа. Все что справа на макете - это сайдбар. И регионы, и блок "join"
тогда непонятно - если мы "приклеим" всю эту длинную колбасу сайдбара (регионы+join), то на невысоких экранах народ блок join видеть не будет. Или я что-то неправильно понимаю?
К вопросу о том, что у нас на некоторых разрешениях последняя строка featured properties может быть неполной. Т.е. то, что @Evgeniygavr назвал "висящей строкой". Мои сугубо программерские мозги не испытывают никакого дискомфорта от висящей строки :), но можно сделать следующее: сервер может отдавать чуток больше объектов и мы будем дополнять висящие строки нужным количеством карточек объектов. Можно сделать это и программно. Если @nicothin даст мне информацию о том, на какой ширине сколько карточек поместятся, то оставшиеся я буду посредством jQuery убирать в display: none. Буду отлавливать изменение ширины окна, в том числе и изменение ориентации мобильного устройства и выводить только "полные строки" карточек.
Скрывать JS-ом объекты в заисимости от ширины вьюпорта? ))) Это и CSS-ом решается без всякой боли с постоянным отслеживанием ресайза окна и проблемами определения реальной ширины за вычетом скролла.
Итого, для блоков Top rated с сделаю так, чтоб на любой ширине выводилось целое количество «строк» с карточками объектов, прочие буду прятать. В разметке будет видно сколько их реально нужно вывести в разметку.
Остается вопрос с сайдбаром только? Для широких экранов я не вижу какого-то простого варианта, чтобы он был фиксирован во вьюпорте при скролле, т.к. область его движения не занимает всю высоту вьюпорта (за вычетом хедера).
То есть, сделать можно, но логика представляется мне сложной и я бы за нее не взялся.
@nicothin (про сайдбар) простым языком - есть экраны где вся эта колбаса не будет помещаться и join community никто не увидит если колбасу приклеить? Может тогда не приклеивать ее тут и сделать приклееным только join community, когда юзер до него доскролит? @Evgeniygavr ? или в идеале только в тех экранах где не помещается вся колабса это решение, а где помещается, то приклеить всю колбасу. не знаю насколько это возня
@nicothin, если можно обойтись только CSS, то супер!
По сайдбару - оставляем все как есть сейчас по этой ссылке, если это последний билд. Ничего менять не нужно.
Задеплоил изменения в поведении блоков для Top Rated...
В общем, нужно по 8 блоков и для главной нужно перенести вставку .question на позицию 4го блока.
Там всегда (когда это не слайдер) будут две строки, соответственно, 4, 6 и 8 блоков — сколько в строку влезает, исходя из ширины.
Сайдбар: ничего не менял пока.
Наверное, можно фиксировать join community во вьюпорте, когда верхняя граница блока начинает почти касаться верхней границы вьюпорта но без JS этого не сделать, а писать этот JS я буду явно дольше, чем @greeceruit ))
ок
Страница утверждена?
утверждена