Страница: Search results

[vladimir075]

@evgeniygavr @greeceruit Коллеги, Николай добавил верстку search results https://nicothin.github.io/greeceru/search.html Просим добавлять здесь свои замечания

[vladimir075]

1) десктоп мы упустили в дизайне крестик закрытия большого превью на карте. Правый верхний угол

[vladimir075]

как и прогнозировал Николай реально не умещается окно большого превью на мобиле (ниже скриншот айфона 6 (и это не самый маленький экран! возможные варианты решения вижу следующие 1) делать два вида этого окна - один для мобилы (сокращенный) один для десктопа. Не знаю насколько это сложно и долго. Из сокращенного варианта для мобилы можно выкинуть - строку Share property via email, строку street view, 3) view details перенести на строку с ценой,справа от нее. Если две версии этого окна (мобила и десктоп) реализовывать недолго, то сокращенная версия мобилы согласно вышеописанному будет ок. 2) убрать строку введения адреса в мобильной версии в search filters (поставив вверху), что также даст дополнительное место для карты @nicothin @greeceruit прошу оценить время на внедрение двух версий этого окна - десктопа как мы его видим + мобильной сокращенной, чтобы я решил идем ли мы в логику двух версий или принимаем другие решения

[Evgeniygavr]

При открытии этой страницы изначально "прогружаются" фильтры, а потом они якобы скрываются. Не могу этот эффект словить в сриншот, т.к. происходит это доли секунд. При нажатии​ на map view отображается уже открытый объект. Должны быть ценники, а превью объекта по "тапу"

[vladimir075]

по проблематике превью на карте выше, Олег предложил еще один, на мой взгляд интересный, вариант. Что если не морочиться с двумя версиями этого превью а протсо оформить его визуально в мобиле в виде попапа? То есть при его открытии затемняется область карты (ну и конечно крестик закрытия). Тогда в принципе можно вообще ничего не убирать и не двигать, ни в самом окне, ни строку адреса не нужно переносить итд. Как Вам такой вариант, коллеги? @Evgeniygavr, как это с точки зрения usability?

[nicothin]

Модальное окно при клике на попапчик цены на карте для мобильных? Я за.

[vladimir075]

Да

Best regards, Vladimir Khanukaev President

On 08 Jun 2017, at 11:26, Nikolay Gromov notifications@github.com wrote:

Модальное окно при клике на попапчик цены на карте? Я за.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[nicothin]

Итого блок с ценой на карте остается как был по клику на цене предполагается большой блок:

• на вьюпортах, где карту видно сразу, останется как был
• на малых вьюпортах показывается как модальное окно во весь экран (как и прочие модальные окна на этих ширинах)

[vladimir075]

@

Best regards, Vladimir Khanukaev President

On 08 Jun 2017, at 15:18, Nikolay Gromov notifications@github.com wrote:

Итого блок с ценой на карте остается как был по клику на цене предполагается большой блок:

на вьюпортах, где карту видно сразу останется как был ма малых вьюпортах показывается как модальное окно во весь экран (как и прочие модальные окна на этих ширинах) — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[vladimir075]

Да, видимо так

[nicothin]

выглядит странновато... :( может, переоформить как-то?

[vladimir075]

Оно должно иметь те же размеры и пропорции. Просто фон должен затемняться как при открытии попап окон. Жень, изобразишь наглядно для Николая?

Best regards, Vladimir Khanukaev President

On 09 Jun 2017, at 16:40, Nikolay Gromov notifications@github.com wrote:

выглядит странновато... :( может, переоформить как-то?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[nicothin]

Хм. Уже сделал как написано выше. Но Ok, переделаю немного.

[vladimir075]

И этот эффект (открытие "большого превью" карты попапом) - только для мобил. Десктоп и планшеты - как было изначально

On 6/9/17 10:09 PM, Nikolay Gromov wrote:

Хм. Уже сделал как написано выше. Но Ok, переделаю немного.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/nicothin/greeceru/issues/8#issuecomment-307474874, or mute the thread https://github.com/notifications/unsubscribe-auth/ARDgjFnahcrjw89PuSmKmO4BifK4p97Gks5sCZhtgaJpZM4NywB4.

-- Best regards,

Vladimir Khanukaev President

GREECE.RU Property Development S.A. Real Estate Services & Legal Assistance

Tel: (+30) 2310 567 433 Fax: (+30) 2310 557 151

www.greece.ru www.privatevacation.com www.newgreece.ru

“GREECE.RU” has been presenting select Greek properties onto the international market for over 10 years. The Head office of the company is situated in Thessaloniki, Greece and branch offices are located in Moscow and Halkidiki (in the district of Sani Resort). Also, the company has strong partnerships in Russia, the countries of CIS and, of course, Greece and the rest of Europe.

[vladimir075]

Коллеги, в верстке заметил упущение вывода количества найденых объектов. Привожу скриншот как сверстано, и как вижу в макетах дизайна. @Evgeniygavr Жень, ты забыл это в psd исправить?

[vladimir075]

в полном десктопе поисковые фильтры имеют достаточно места для того, чтобы внутри каждого фильтра выводилось выбранное юзером значение (Например в Type of deal появится Rent итд, в all property types выводится какой вид объекта выбрали например apartment итд и прочее. С этим нет проблем ни с полным десктопом, ни в мобильной версии. А вот в промежуточном варианте (пример ниже) внутри фильтров не будут помещаться их значения. Возможно ли какое то решение? @nicothin @Evgeniygavr

[nicothin]

Баг про кол-во принял в работу.

[nicothin]

Отправил исправление сортировщика. Через пару минут можно посмотреть. https://github.com/nicothin/greeceru/commit/46db707a439b10231dcdbc9a6372d61e9757ca2c

[nicothin]

Отправил изменения для модалки объекта карты. https://github.com/nicothin/greeceru/commit/d33392e42120576242c6679329f171288de15c4e

[vladimir075]

то, что было надо. @greeceruit - к внедрению

[Evgeniygavr]

А можно вернуть стрелочки в модальном окне, да и на странице поиска объектов тоже? Идея была такова: показываем две стрелки, лево-право, чтобы пользователь мог листать в обе стороны. Одна стрелка сейчас как-то странно смотрится.

[greeceruit]

Стрелочки влево на странице результатов поиска я вернул. Путём настройки owl-carousel. Добавил в js в нужное место строку loop:true. Остальные тоже я сделаю по мере продвижения.

[nicothin]

Так, погодите ка. В блоке card-map (большой блок локации над картой и в модалке для мобилки) карусель. Если фоток 2+ буду показаны стрелки. Если карусель не зациклена, то в состоянии «вижу первую фотку» стрелка «предыдущая фотка» отсутствует, всё штатно. И да, «вернуть» можно, включив «петлю», как указано выше.

[vladimir075]

Логика, в том, что пишет Николай в принципе, есть. Однако, если @Evgeniygavr считает, что лучше смотрятся стрелки изначально в обе стороны, то в данном конкретном случае, я не против, чтобы эта карусель (не путать с другими) была зациклена и пролистывалось сразу в обе стороны. В принципе в проекте прототипе, это так и работает сейчас.

[nicothin]

Страница утверждена?

[vladimir075]

утверждена

[vladimir075]

сорри, секунду. я задавал вопрос вышев полном десктопе поисковые фильтры имеют достаточно места для того, чтобы внутри каждого фильтра выводилось выбранное юзером значение (Например в Type of deal появится Rent итд, в all property types выводится какой вид объекта выбрали например apartment итд и прочее. С этим нет проблем ни с полным десктопом, ни в мобильной версии. А вот в промежуточном варианте (пример ниже) внутри фильтров не будут помещаться их значения. Возможно ли какое то решение? (там и скрин был)

[nicothin]

На самом деле, это они в английском варианте (короткие слова) помещаются. Вариант решения: текстовая строка под строкой фильтра

[vladimir075]

не очень наглядно себе это представил. @Evgeniygavr что думаешь?

[Evgeniygavr]

Можно кусочки слов помещать в инпут: app., hou., и так далее.

[nicothin]

В инпут? Какой инпут?

[greeceruit]

@nicothin , ещё одна проблемка со страницей результатов поиска. Label цены на карте выводится механизмом API Google. Гуглу мы передаём только css-класс label'а. В вёрстке label цены реализован как элемент одного класса, вложенный в элемент другого класса. Чтобы передать в Гугл один класс, я попытался сделать новый класс label'а с таким описанием: .alxlabel { display: block; font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; width: auto; max-width: 218px; padding: 0 10px; height: 28px; line-height: 28px; border: 1px solid #e6e6e6; background-color: #fff; border-radius: 3px; box-shadow: 0 2px 12px rgba(72, 72, 72, 0.2); }

.alxlabel:before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 7px 0 7px;
    border-color: #e6e6e6 transparent transparent transparent;
}

.alxlabel:after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 7px 0 7px;
    border-color: #fff transparent transparent transparent;
}    

Вполне возможно, что я ошибся в CSS, но не исключено, что API Google Maps игнорирует :before и :after. Картина такая: http://www.nomesitis.gr/search/buy/ Красные кусочки стандартного маркера выведены временно - только для того, чтобы определить экспериментально смещение label по вертикали и горизонтали от нужной точки на карте. Вопрос такой: нельзя ли как-то без :before и :after реализовать label?

[nicothin]

@greeceruit псевдоэлементов не видно потому, что там на родителях всюду overflow: hidden Можно нарисовать картинку в форме лейбла и поставить ее в фон. Ширина лейблов тогда будет все время идентичной, нужно предусмотреть достаточно длинную картинку, чтобы вписывались все варианты цены. Если берем такой вариант, от от @Evgeniygavr нужна SVG-картинка «пузыря» с ценой. Тень от «пузыря» я сам попробую добавить.

[greeceruit]

@nicothin , я тоже думал о background-картинке для лейбла, но там, действительно, возникнет проблема с шириной. У нас цены варьируются от десятков миллионов (вилла на продажу) до просто десятков евро (аренда апартаментов посуточно). Может, имеет смысл сделать несколько вариантов лейблов? То есть разной ширины.... Например, три варианта. Чтобы помещалось 99 999 999, 999 999 и 999. Хотя, если выставят на продажу остров за сотни миллионов, то мы не поместимся.... И с арендой непонятно. @vladimir075 , будем ли мы писать на лейблах маркеров на карте что-то вроде 9999 per month или 999 per day? Или сделать сокращение, как на терре, К- для тысяч, М - для миллионов?

[nicothin]

Можем использовать 3 разных, да. Значок типа валюты + 99 999 999, 999 999 и 999 Сделаю 3 разных CSS-класса под каждый вариант. Нужны, соответственно, 3 картинки разной ширины. В SVG.

[vladimir075]

сотни миллионов мы предусматривать не будем, таких островов нет, а если какой грек и сфантазирует, то с фантазиями не сюда ))) десятки млн на продажу, да есть объекты. так что 10 000 000 это максимальное значение по количеству цифр. Остальное, как посоветует @Evgeniygavr. Немного, конечно беспокоит, что эти маркеры перекрывают друг друга на карте ( в airbnb вроде тоже самое), но видимо ничего с этим не поделаешь. Жень, прошу отрисовать что ребята просят выше.

[vladimir075]

@Evgeniygavr Жень, ждем то что ребята просят выше в ветке

[Evgeniygavr]

Если правильно понял о чем вы - https://goo.gl/7z8SVa

[nicothin]

Обновил стили пузырей поверх карты — вставил фоновые картинки. Сглаживание углов там кривое и краницы картинки смазаны. Полагаю, из-за того, что форма в картинке имеет ширину, не вписанную в пикселы (ширина 127.2 в большой картинке, к примеру).

[vladimir075]

@greeceruit прошу прокомментировать.

[greeceruit]

Внедрил новые стили пузырей - лейблов цен на карте.
Соорудил пока один класс на базе .card-map--micro-md (для среднего размера) и .card-map__price Цены будут форматироваться в соответствии с языковыми настройками и под отформатированную цену будет выбираться размер пузыря. Сейчас на странице результатов поиска отключён pagination, поэтому пузыри перекрывают друг друга и страница страшно тормозит, но отдельностоящие лейблы выглядят, по-моему, неплохо. http://www.nomesitis.gr/el/search/buy/

@vladimir075 И с нулевыми ценами надо что-нибудь решить политически

[vladimir075]

1) смотрятся вроде хорошо, но сливается белый с картой где она светлая. @greeceruit внедри пожалуйста и на эту карту нашу расцветку чтобы посмотреть как будет. 2) там где цены нулевые предлагаю писать "€ по запросу", € on request В принципе от "нулевых" цен мы будем постепенно уходить, но пока думаю так

[greeceruit]

@nicothin Проблемка с js. TypeError: $(...).slider is not a function  /static/js/script.min.v-1.005.js:2

Видимо сборщик не включил slider в результирующий js. Если это вам как-то поможет, то такая штука уже была

[nicothin]

Да, это у меня на ноуте, видимо, зависимость не стоит эта. Поправил.

[greeceruit]

@nicothin, добрый день! На странице search results при каждом изменении фильтров и перемещении карты, на сервер отправляется ajax-запрос. Результаты приходят с сервера и отрисовываются на странице посредством JS. Нужно каким-то образом дать понять пользователю, что ему придётся немного подождать результатов. Нужен индикатор ожидания, чтобы я его мог программно показывать в момент отправки запроса на сервер и скрывать в момент прихода данных с сервера. Можете сделать такую штуку в наших стилях? Что-то вроде спиннера

[nicothin]

Могу добавить поверх контентной части скрытый полупрозрачный блок с анимированным элементом. По необходимости его можно будет находить по id и дописывать/убирать класс-модификатор видимости. Так удобно будет?

[greeceruit]

Да, так будет хорошо! Под контентной частью имеется в виду всё, кроме шапки? У нас и на карте маркеры перерисовываются...

[nicothin]

https://github.com/nicothin/greeceru/commit/528ac02509af7e00e576d0894ed9c766d8d3c119#diff-c9db0e13a328be0eaa311c5b24ad331c

[greeceruit]

@nicothin , на странице результатов поиска в мобильной версии div class="pagination" не скрывается и div class="pagination pagination--mobile" не появляется. Кажется, .pagination вообще нет в css.

[nicothin]

Нужен адрес страницы, о которой идет речь. Начиная с 970 (вверх) срабатывает

.layout-tabs__tab--map .pagination {
  display: none
}

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

[greeceruit]

Реализовано вот тут http://www.nomesitis.gr/el/search/rent/

Делалось из этого https://nicothin.github.io/greeceru/search.html (тут тоже не срабатывает, по крайней мере в эмуляторе айфона 6+ в Хроме )