nicothin / greeceru

https://nicothin.github.io/greeceru/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Редизайн карточки объекта

nicothin opened this issue · comments

относительно лейблов (красные метки на фото) sold и rented out - там будет один лейбл, либо один либо другой. Не знаю @greeceruit внедрит бещ проблем? Сверстано получается 2

@vladimir075 вопрос: страницу https://app.zeplin.io/project/5c6d9867dd0ba39a1b3222cd/screen/5c6e88cd1f2b6932fad4ab94 нужно верстать? Там общего с нынешним https://nicothin.pro/greeceru/internal-property.html крайне мало._

Да надо верстать. Там достаточно много изменений. Нижняя часть (от иконок Overview и ниже) - остается как была, в дизайне отображена только та часть, которая имеет изменения

@vladimir075 блок управления довольно ощутимо отличается по кол-ву информации (и, немного, по функциональности) на разных вьюпортах: https://monosnap.com/file/aROGLmsHvC7K8nmRKhesXis3hoXFps
Это нормально? Именно так и делать?

@nicothin да, так и делать. Единственное, сейчас более детально присмотревшись прошу чуть чуть подправить следующее

  1. в десктоп версии добавить НАД основной ценой (69 000) надпись For sale
    Тем же шрифтом, что написано Price над ценой в аналогичном мобильном скрине. Отравнять по левому краю надписи цены снизу (включая значек валюты)
  2. в десктоп версии добавить ПОД основной ценой (69 000) надпись-линк Price history. Такую же точно, как в аналогичном мобильном экране.
  3. в мобильной версии надпись Price над этой же ценой, если не сложно поменять на надпись For sale, чтобы мы потом не запутались.
  4. в мобильной версии красный треугольничек рядом с ценой чуток отравнять по примеру как он отравнен в десктоп версии аналогичного экрана (чуть ниже и угол такой же по отношению к значению цены. в общем точно как стоит в десктопе).
    Так же учесть что этот треугольничек рядом с ценой у нас должен быть в двух вариантах экранов. Один красный, смотрящий наверх, как мы видим сейчас на экране, другой такой же только зеленый и смотрящий вниз. (Зависит от того, повышается цена или понижается). Возможно это есть в разных состояниях этого блока в зеплине.
    Вроде все. В остальном делаем как сейчас видим на экранах - в мобильной версии функционал сокращенный. Кнопки Send message тоже разного цвета, это специально.
    Николай прошу прощения, что небольшая путаница и гружу не очень профильными просьбами. Моб и деск делали разные дизайнеры. Работаем над тем, чтобы исправляться ))

Принято.
Разметку я уже сделал, внесу правки, допишу стили и покажу.

οκ

Почти готова мобильная версия (только 320-768 пикс ширины): http://nicothin.pro/greeceru/internal-property-3.html
ранее по пунктам
3) есть
4) выровнял

Особенности

  1. шапку сделал пока без иконки поиска, жду вердикта по ней.
  2. в макете приведено модальное окно в его настольной ипостаси (https://monosnap.com/file/Sn6mQi2wrGAU8M4t6qw7UAzko1OtFi), оставлю его пока в виде по умолчанию для мобильных, дабы не плодить сущности.
  3. кнопки делаю такими, какие есть на проекте сейчас (я про размерность).
  4. крестик закрытия пока использую такой, какой на проекте уже имеется.

ждем )

Готово
http://nicothin.pro/greeceru/internal-property-3.html

Посмотрите всё ли устраивает, т.к. пришлось кое-что «додумать» для адаптивности.
Увы, не получилось обойтись без дублирования некоторых элементов в коде.

Вроде в целом хорошо. Я бы только сократил максимально расстояние между названием объекта наверху и хлебными крошками. Плюс Send message в десктопе ок, а вот в мобиле она должна становится точно такой же как у нас сейчас на сайте (типа кнопки на дне прибитой. с той разницей что сейчас там у нас две, а здесь одна будет). Вроде по текущему экрану больше нет замечаний кроме этих. Ну и потом разные его состояния надо делать.

а еще в средних ширинах Send message не по центру как то встает

@nicothin , добрый вечер!

Как мне лейблы "продано" и "проверено" засунуть на страницу результатов поиска? От мини-карточек на главной блок отличается тем, что там owl-карусель... Я попытался как-то поставить (до дива "card__photo-carousel owl-carousel"), но они перекрываются каруселью. Внутри этого дива - они даже не мелькают. Может z-index?

https://www.greece.ru/ru/search/buy/?prop_types=9 (там, где "склад в Кардица")

@greeceruit да, именно. Сделал правку в стилях.

@vladimir075

Я бы только сократил максимально расстояние между названием объекта наверху и хлебными крошками

Сократил на 20 пикс. Пустое пространство над заголовком тут используется дизайнером для акцентировки заголовка, совсем сокращать его не хотелось бы.

Плюс Send message в десктопе ок, а вот в мобиле она должна становится точно такой же как у нас сейчас на сайте (типа кнопки на дне прибитой. с той разницей что сейчас там у нас две, а здесь одна будет).

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

@vladimir075 про состояния:
Сейчас я переделал страницу, добавил прорисованную реакцию на нажатие иконки кебаба и шары для мобилки, нажатие ссылка Price history для всех ширин.

Остаются вопросы:

  1. Что решаем с поиском в шапке?
  2. Куда посетитель должен кликнуть, чтобы увидеть нижний дроп с быстрым редактированием и попап с селектором цены? (https://monosnap.com/file/vRA3qe7Dqur9leJnSR3XLLNFGHRrMi)
  1. Вроде мы говорили раньше, что когда нет значка help center, то с лупой для поиска проблем нет. Help center у нас появляется только на стадии занесения объекта и там совсем не нужна лупа поиска. А лупа поиска у нас нужна только на карточке объекта, где как раз совсем не нужен help center. Может тогда так и поступим? @nicothin @greeceruit
  2. оба попапа относятся к личному кабинету. Edit property price появляется при нажатии на quick edit первого попапа; первый попап появляется при нажатии на троеточие в личном кабинете https://zpl.io/VYKB7ln (это вариант для мобильных)
    Еще замечание. У нас есть два варианта попапа - один с историей цен (price history), другой с историей офферт (offers from others). Тот, который с историей цен, не предполагает ававтарку и имя (поскольку цена меняется только самим собственником https://zpl.io/VDBzwl3 (мобильная версия). А еще должен быть такой же для offers from others. Он с аватаркими и именами, но без надписи Follow price changes внизу.
    Еще по идее в обоих должен быть скрол.

Вроде мы говорили раньше, что когда нет значка help center, то с лупой для поиска проблем нет. Help center у нас появляется только на стадии занесения объекта и там совсем не нужна лупа поиска. А лупа поиска у нас нужна только на карточке объекта, где как раз совсем не нужен help center. Может тогда так и поступим?

Если у @greeceruit нет возражений, то да, могу сделать два новых хедера — один с центром помощи, другой с лупой. (И, конечно, обеих иконок может не быть, как сейчас.)

Еще замечание. У нас есть два варианта попапа - один с историей цен (price history), другой с историей офферт (offers from others). Тот, который с историей цен, не предполагает ававтарку и имя (поскольку цена меняется только самим собственником https://zpl.io/VDBzwl3 (мобильная версия). А еще должен быть такой же для offers from others. Он с аватаркими и именами, но без надписи Follow price changes внизу.
Еще по идее в обоих должен быть скрол.

Показал в этой модалке по клику на Price history (пришлось переделать на мод. окно) вид таблицы с аватаром и без. Убирание из кода кнопки «Follow price changes» тоже ничего не сломает.
На малых высотах вьюпорта там виден скролл (увы, кнопка закрытия тоже уезжает вверх, дабы не закрывать контент, но тап на темной области вне модалки её закроет, так что не критично).

Куда посетитель должен кликнуть, чтобы увидеть нижний дроп с быстрым редактированием и попап с селектором цены? (https://monosnap.com/file/vRA3qe7Dqur9leJnSR3XLLNFGHRrMi)

оба попапа относятся к личному кабинету. Edit property price появляется при нажатии на quick edit первого попапа; первый попап появляется при нажатии на троеточие в личном кабинете https://zpl.io/VYKB7ln (это вариант для мобильных)

Сейчас заведу ишью о ревёрстке ЛК, добавлю туда эту информацию.

Вижу взеплине, внизу https://app.zeplin.io/project/5c6d9867dd0ba39a1b3222cd/screen/5c6d98b4dd0ba39a1b3223e5
Это другое оформление той же страницы? Там некоторые дополнения: прибитость правого блока, фильтры над хлебными крошками (зачем? это ж уже страница объекта), между просмотрами 3400 и id добавить надпись Added 23.10.2019.
Это делать?

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

Если у @greeceruit нет возражений, то да, могу сделать два новых хедера — один с центром помощи, другой с лупой. (И, конечно, обеих иконок может не быть, как сейчас.)

@nicothin , или два хедера, или один, в котором можно менять: либо блок с лупой, либо блок с центром помощи. На ваше усмотрение.

Вижу взеплине, внизу https://app.zeplin.io/project/5c6d9867dd0ba39a1b3222cd/screen/5c6d98b4dd0ba39a1b3223e5
Это другое оформление той же страницы? Там некоторые дополнения: прибитость правого блока, фильтры над хлебными крошками (зачем? это ж уже страница объекта), между просмотрами 3400 и id добавить надпись Added 23.10.2019.
Это делать?

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

@nicothin это та же страница. Просто делали разные дизайнеры, потому есть небольшая путаница. Думаем сейчас как все это лучше на будущее организовать. 1) Прибитость правого блока на карточке должна быть. 2) фильтры нет, раз мы решили выводить лупу, 3) Добавить Added.. да 4) Про Contact us то что написано также делать. И он должен быть в шапке, сорри.
@greeceruit обратить внимание на 4)

С шапкой разбираемся в #28 (comment)

@vladimir075 сделал фиксацию блока, добавил Added, с Contact Us разобрались ранее.

http://nicothin.pro/greeceru/internal-property-3.html

Там есть разные состояния блока, контактов, цветовые надиписи, а также ховеры. Все в макетах

https://app.zeplin.io/project/5c6d9867dd0ba39a1b3222cd/screen/5c6d98b1809f735df65325e7 — вижу это
Это единственное, что осталось для страницы объекта, я верно понимаю?

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

@greeceruit прошу обратить при внедрении внимание что Николай прибил правый блок, как и должно быть

@greeceruit прибитие работает на странице объекта, никаких изменений в разметке не потребовало, сделано целиком в JS.

@vladimir075
http://nicothin.pro/greeceru/internal-property-3.html — в сайдбаре показаны блоки и состояния.
Увы, использующийся у нас в проекте бутстраповский popover не позволяет чётко контролировать положение уголка (он всегда центрует его), так что с его положением есть отклонения от макета:
image

@nicothin про уголок не страшно. Я правильно понимаю, что у нас на данный момент остался личный кабинет?

@vladimir075 насколько я вижу, да.

Тогда ждем, Коль )

@nicothin хотел попросить сделать для лк, там где размещенные собственником объекты, внизу pagination, аналогично как у нас на search results

@vladimir075 начал было пилить, но теперь сомнения взяли.

Общие вопросы

  1. Не могу четко провести аналогии между мобильными макетами (как-то они перемешаны и названы странно) и настольными.
  2. Некоторые макеты сделаны с игнором раскладки сайта: https://monosnap.com/file/J4OPw8vJiZDhRiWlm9oXhADqCDWPzz Я это сделаю, но только на тех ширинах, которые позволят избежать гор. скролла.
  3. Кнопки Marketing tools и Advertise property в мобилке есть, в настольном варианте нет. Это нормально?

Очень хотелось бы получить соответствие мобильных макетов и настольных.

Страница ВИШЛИСТ

(сейчас это http://nicothin.pro/greeceru/profile-wish.html)

Мобильные:

1 https://app.zeplin.io/project/5c6d9867dd0ba39a1b3222cd/screen/5c6d99308f02e4466a54c560
2 https://app.zeplin.io/project/5c6d9867dd0ba39a1b3222cd/screen/5c6d992f24a2969ad0d59fa4
3 https://app.zeplin.io/project/5c6d9867dd0ba39a1b3222cd/screen/5c6d992f2e306c9a39d14f06
4 https://app.zeplin.io/project/5c6d9867dd0ba39a1b3222cd/screen/5c6d992e7fbd759a46cfd983
4 copy https://app.zeplin.io/project/5c6d9867dd0ba39a1b3222cd/screen/5c6d992ef26e9543dbad01e2
5 https://app.zeplin.io/project/5c6d9867dd0ba39a1b3222cd/screen/5c6d9930c49d450d828dfe87

Настольные:

Wishlist https://app.zeplin.io/project/5c6d9867dd0ba39a1b3222cd/screen/5c6d98b363746746701dac96
Wishlist v.2 https://app.zeplin.io/project/5c6d9867dd0ba39a1b3222cd/screen/5c6d98b2ad81ec99d92edf6e
Wishlist v.2 Copy и Wishlist v.2 Copy 2 — повторение предыдущей с показанными выпадающими элементами.

Вопросы по вишлисту

  1. https://monosnap.com/file/cbxzPApSmzA9PNRlAQ88oPSpGHpGMF — это состояние наведения на карточку?
  2. https://monosnap.com/file/NkhhQY4sieJwDrOqDoLEfBTDIkX4PM — выравнивание я могу сделать одинаковым?
  3. https://app.zeplin.io/project/5c6d9867dd0ba39a1b3222cd/screen/5c6d992e7fbd759a46cfd983 и https://app.zeplin.io/project/5c6d9867dd0ba39a1b3222cd/screen/5c6d992ef26e9543dbad01e2 — это ведь одно и то же, просто оформлено по-разному? Если да, то какой вариант делать?

Про блоки для вишлиста относительно ясно: мобильные прорисованы отдельно, настольные — все скопом в одной картинке.

Другие страницы между мобилкой и настольным вообще как-то слабо связаны.
Мне нужны сооветствия. Нужен список по типу «название страницы»: мобильные (имена артбордов в зеплине или ссылки), настольные (имена артбордов в зеплине или ссылки).

Соответствия
Верно ли я понимаю, что мобилка https://app.zeplin.io/project/5c6d9867dd0ba39a1b3222cd/screen/5c6d9930c49d450d828dfe87 соответствует на настольном вот этим двоим — https://monosnap.com/file/OYFZBCnNii7rLSODzQPYDn8AGMA0Qz ?

Соответствия
Верно ли я понимаю, что мобилка https://app.zeplin.io/project/5c6d9867dd0ba39a1b3222cd/screen/5c6d9930c49d450d828dfe87 соответствует на настольном вот этим двоим — https://monosnap.com/file/OYFZBCnNii7rLSODzQPYDn8AGMA0Qz ?

да, верно

2. Некоторые макеты сделаны с игнором раскладки сайта: https://monosnap.com/file/J4OPw8vJiZDhRiWlm9oXhADqCDWPzz Я это сделаю, но только на тех ширинах, которые позволят избежать гор. скролла.

Я думаю это просто косяк дизайнера, который разрабатывал последние изменения. Можно сверстать нововведения с сохранением текущей раскладки?

3. Кнопки Marketing tools и Advertise property в мобилке есть, в настольном варианте нет. Это нормально?

вообще они у нас сейчас они есть на текущем проекте, но не задействованы. Может пока их тогда не делать?

  1. https://monosnap.com/file/cbxzPApSmzA9PNRlAQ88oPSpGHpGMF — это состояние наведения на карточку?

то что серый фон, да, видимо состояние наведения

2. https://monosnap.com/file/NkhhQY4sieJwDrOqDoLEfBTDIkX4PM — выравнивание я могу сделать одинаковым?

да, конечно. Косяк дизайнера. Верен нижний вариант

делать вот этот вариант https://app.zeplin.io/project/5c6d9867dd0ba39a1b3222cd/screen/5c6d992ef26e9543dbad01e2

постараюсь завтра - послезавтра сделать соответствия и комменты к ним

Можно сверстать нововведения с сохранением текущей раскладки?

Раскладку блоков по странице сохраню, конечно, изменится только разметка самих блоков (есть похожие, но тут легче переделать, чем адаптировать старую разметку под новые.
Собственно, пока делаю эти:

Верно ли я понимаю, что мобилка https://app.zeplin.io/project/5c6d9867dd0ba39a1b3222cd/screen/5c6d9930c49d450d828dfe87 соответствует на настольном вот этим двоим — https://monosnap.com/file/OYFZBCnNii7rLSODzQPYDn8AGMA0Qz ?

ок

@nicothin вижу, что кнопки advertise property и marketing tools все таки есть и на мобильных и на настолльных экранах (может не нав всех, но есть). Хотя они сейчас нами не используются, может все таки можно их сохранить?

@nicothin все ок. Единственное сомнение насчет того что Marketing tool и Advertise property становится у нас в мобильной версии прибитыми внизу кнопками. Сомнение потому, что у нас появятся кнопки Accept/Decline на аукционах, а также Make offer и первые кнопки будут отвлекать от более важных. Но точно смогу оценить когда сверстаем там где есть эти разделы.
Также у нас пр нажатии иконки пирога в разделе My properties должна раскрываться/схлопываться статистика, как у нас было. А при нажатии на иконку раскрываться/схлопываться блок Auction is running

@vladimir075

  1. кнопки Marketing tool и Advertise property вынесу из прибитого состояния
  2. по клику на кнопку с пирогом показывать/скрывать вот такой блок ниже.
  3. по клику на кнопку с молотком показывать/скрывать Auction is running

ok

по умолчанию в п. 2 и 3 блоки свёрнуты же?

Ok
2 и 3 по умалчанию свернуты, но хорошо бы так сделать, чтобы мы могли, если надо, разворачивать по умолчанию тот или иной

@nicothin все здорово. Только на моем айфоне не одна из кнопок не работает (молоток, пирог, троеточие) Версия 9.3.2 Можем что-то сделать?

@nicothin все здорово. Только на моем айфоне не одна из кнопок не работает (молоток, пирог, троеточие) Версия 9.3.2 Можем что-то сделать?

Попробовал принудительно обновить js-файл (надеюсь, виновато кеширование). Через пару минут посмотрите еще раз пожалуйста (обновив страницу, конечно же).

Не хочет работать. А при некоторых попытках нажатия вообще наверх страницы отбрасывает

Попробую сымитировать на айпаде сегодня вечером. (айфона нет)

На айпаде тоже работают нажатия на кнопки. Буду искать айфон )))

Возможно причина в старой версии (писал выше какая).

Допилил второе соответствие.
http://nicothin.pro/greeceru/profile-my-properties.html

@nicothin Здорово, только в айфоне также не работает (

Николай, как то выше просил сделать pagination в ЛК. Нам бы не забыть его, а то его нет в макетах

@nicothin у меня такой вопрос. Ховеры на карточке объекта выскакивают быстро при наведении мыши, а вот когда ее отводишь тормозят чтобы пропасть. может с этим надо что-то сделать?

Ховеры на карточке объекта выскакивают быстро при наведении мыши, а вот когда ее отводишь тормозят чтобы пропасть. может с этим надо что-то сделать?

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

Николай, как то выше просил сделать pagination в ЛК. Нам бы не забыть его, а то его нет в макетах

Пагинатор уже добавил, при следующем деплое (сегодня ночью) можно увидеть. Он как в разделе «Блог».

@greeceruit
предлагаю дальнейшее обсуждение ЛК вести в другой ишью: #34

@nicothin Николай, у меня такой вопрос
Screen Shot 2020-10-06 at 6 46 41 PM
https://www.greece.ru/el/property/579176981716-monokatoikia-agios-athanasios/
В десктопе, в греческой версии на кнопке Send offer полное написание перевода в кнопке не умещается. Конкрретно не умещаются три буквы. Меж тем это очень важная функция и мы не можем оставлять юзера догадываться что там написано. Можно ли предложить какое то решение? Может уменьшение шрифта?

Подпилил, изменив гор. отступы: b6c9fe7

Подпилил, изменив гор. отступы: b6c9fe7

Отлично, спасибо!
@greeceruit прошу внести поправку на сайт

@nicothin Николай, если не сложно поменять иконку молоточка рядом с Sell at auction
Screen Shot 2020-10-21 at 2 37 37 PM
на вот эту иконку https://www.vectorstock.com/royalty-free-vector/hand-with-coin-black-simple-icon-vector-7376750, предварительно окрасив ее в зеленый цвет (идентичный надписи) и того же размера что была и предыдущая иконка

Это легко, только нужен сам файл:

image

отправил на почту

06f5d7b

Сделал, но с увеличением размера (20 → 30), ибо без этого смотрелось как-то не очень:

image

После увеличения иконка читается:

image

Старую иконку оставил (много где используется)

В связи с работами, проводимыми в рамках SEO, нам нужно переверстать <h1> на карточке объекта. В <h1></h1> должен быть только текст и <h1> должен быть без класса

Сейчас в <h1>:
<h1 class="list-property_location-name pageh1">Отель Ева в Кассандра Халкидики<div class="list-property_header-vc"><svg height="15" width="22"><use xlink:href="/static/img/sprite-svg.svg#eye" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>5 669</div></h1>

В связи с работами, проводимыми в рамках SEO, нам нужно переверстать <h1> на карточке объекта. В <h1></h1> должен быть только текст и <h1> должен быть без класса

Сейчас в <h1>: <h1 class="list-property_location-name pageh1">Отель Ева в Кассандра Халкидики<div class="list-property_header-vc"><svg height="15" width="22"><use xlink:href="/static/img/sprite-svg.svg#eye" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>5 669</div></h1>

http://nicothin.pro/greeceru/internal-property-3.html — сделал с только текстом и без классов (хотя «без классов» — ОЧЕНЬ странное тредование))

Обновите стилевой файл и разметку (div class="list-property__header-info" не менялся, добавилась обертка вокруг заголовка и счетчика просмотров)

(в диффе коммита дополнительные изменения в JS, признаться, не помню откуда они, не обращайте внимания)