• Juick discuss proof of concept доработанной вёрстки

    * меню сворачивается при w < 620px;
    * левая колонка на flexbox, убирается вниз при w < 1000px (теоретически, можно сделать открывающийся сайдбар, но тогда надо и меню и левую колонку в один гамбургер как-то пихать... пока не вижу, как их совместить);
    * несколько доработок в форме ввода сообщений (попробуйте приаттачить картинку).

    В код лучше не смотреть.

Replies (150)

  • @killy, На странице пользователя можно левую колонку свернуть в одну строку (со своим гамбургером?) под меню. Но в остальных случаях — непонятно, что делать.
  • @killy, меню я в одну фиксированную строку хочу упихать, выкинув лишние пункты
  • @vt, алсо сайдбары уже не модно!!! Просто отдельная кнопка профиля в меню же
  • @killy, позырил на десктопе и на будильнике. нормально, все годно. атач — супер.
    на будильнике икона вопроса бессмысленна и смотрится не по делу. проблемы с многострочными сообщениями нет.
  • @alex0b, У меня на телефоне почему-то меню справа, версия для арабов, наверное
  • @killy, неожиданно что, когда тянешь текстарию вправо, она перескакивает вниз
  • @vt, Зато не промажешь. Рядом с лого пальцепроблема может случиться
  • @alex0b, икона вопроса бессмысленна
    она и на десктопе ничего не делает вроде
  • @lurker, тултипу носит
  • @alex0b, Зачем рядом если надо совмещать?
  • @vt, в случае декстопа — это переход на главную, а на мобиле — элегантные шорты?
  • @lurker, Недосмотрел. Должен быть только вертикальный ресайз.
  • @alex0b, хотя, как по мне, лучше бы просто цифробувенно было написано, вместо икон
  • @vt, Для правшей.
    Гамбургер слева больше с сайдбаром ассоциируется.
  • @killy, Я в своих экспериментах цвет меню и основного фона местами поменял и мне кажется что гораздо лучше выглядит
  • @vt, Например beta.juick.com
  • @vt, А нет, тут старый цвет еще
  • @vt, Я к тому, что в левой колонке иногда нужные вещи есть, которые не обязательно относятся к профилю, и доставать их из подвала неудобно. В частности, непонятно, как со страницами настроек и справки быть.

    Ещё как вариант — сворачивать и закреплять внизу экрана.
  • @killy, Настройки на экране профиля же надо
  • @vt, Аааа... Выравнивать чат по центру — кошмар.
  • @killy, как по мне, заюзать для чата половину высоты моего монитора — вот где кошмар
  • @vt, Я пока не знаю, что это за экран профиля такой.
    Так или иначе, там тоже будет какой-то перечень разделов скорее всего, который в левой колонке обычно и оказывается.
  • @killy, Ну да, это она и будет, просто я к тому, что отдельной кнопки под настройки не нужно
  • @alex0b, Я там на маленьком экране больше тренировался
  • @vt, А. Если ты решил, что я про ссылку на настройки говорю, то нет — я не про то.
    Я про то, как верстать такие страницы, где левая колонка важна, для мобильников.
  • @vt, Чтоб складывалось в два экрана из одного
  • @killy, Ну, я и говорю — она должна быть кнопкой в меню и открываться вместо а не слева и не сбоку, ну как сайдбар
  • @alex0b, Многобукв захламляют вид и занимают много места на мобильнике, при этом нет смысла смотреть на них каждый раз.

    Пробовал повесить тултип непосредственно на контролы, но получается как-то очень навязчиво.
    Скорее надо ещё реакцию на клик добавить.
  • @vt, Если выкинуть теги и оставить только осмысленные вещи, то я бы их не убирал за два клика (меню, затем кнопка), а показывал отдельной строкой под меню (со своим гамбургером или скорее шевроном — как дропбокс, в общем).
    Меню сайта отдельно, меню станицы отдельно.
  • @killy, Попробуй поглядеть на mobile.twitter.com, например. Там все три осмысленные кнопки сверху, а менее осмысленные, в том числе и теги, прячутся уже за ними
  • @killy, я немного пошевелил разметку и подвигал заголовок, ничего не сломал?
  • @vt, Все элементы шапки и подвала расползлись по углам — это плохо.
  • @vt, Уведомления опять отвалились что ли?
  • @killy, Почему плохо? На всех сайтах шапка во всю ширину
  • @vt, В комбинации с колонкой фиксированной ширины — плохо на большом экране. Выглядит как недоделка.

    Мне нравится, когда фон растянут на всю ширину, но все элементы подчиняются общей логике.
  • @killy, С какой колонкой?
  • @vt, Эээ. С контентом фиксированной ширины. Всё что между шапкой и подвалом.
  • @killy, Так у всех же так?
  • @vt, Шапку сломал
  • @alex0b, Ты же сам хотел на весь монитор!
  • @vt, во-первых про чатики; во-вторых, по высоте.
    а тут белая область должна быть по ширине равна "ответы — показать деревом", а логотип и меню слева и справа выравнены по границе белой
  • @killy, Сделать ~~бочку~~ ON не помогло.
  • @killy, test
  • @vt, а епт, жаббер не работает вообще
  • @alex0b, так белая область это оно, она да, по центру (у всех!), а шапка — по всей ширине (у всех, опять же)
  • @vt, test
  • @vt, Всё ещё нет.
  • @vt, Где у всех?
    Вон у твиттера как тебе и говорят — содержимое шапки и остальной страницы выровнено.
  • @vt, ничего не понимаю
  • @killy, ты в треде смотришь что ли? В треде всегда сломано было, на главной — так же как в твиттере
  • @vt, Куда главнее?
  • @killy, Абсолютно одинаково с твиттером или ты колонку с тегами не считаешь?
  • @vt,
  • @killy, Ну и твиттера так же
  • @vt, У твиттера так
  • @killy, ох, лол, уменьши страницу, у них включится две колонки и будет так. Но я согласен, это можно поправить. Ну так я еще буду шапку ломать
  • @vt, щас жаббер надо починить, я хз вообще почему он не работает
  • @vt, еуые
  • @vt, да ладно, жабир — ожившая мумия!
  • @vt, починилось. Откатил жаббер до вмешательства @ma1uta :)
  • @vt, У твиттера баг на некоторых размерах. Вот ихние две колонки там где без бага.
    (На удивление паршивая вёрстка у них, если начать вникать в детали.)
  • @vt, нет, это я дебил, нашел
  • @vt, а нет, не помогло, опять откатил
  • @vt, тест
  • @killy, я наконец понял, что мне не нравится в поле ввода сообщения над сообщениями. На других сайтах есть бесконечная прокрутка, она прячется и не мозолит глаза пока листаешь ленту. А здесь она всегда торчит. Надо делать бесконечную прокрутку! Только главное надо понять как это сделать так, чтоб запоминалась позиция при переходе в тред и обратно, а то на всяком meow.bnw.im оно не запоминает
  • @vt, Вот если будет бесконечная прокрутка, тогда согласен вернуть форму сообщения
  • @vt, Надо непременно чем-нибудь зашквариться...
  • @killy, какие с ней проблемы, кроме описанной мной?
  • @vt, * тяжёлые страницы
    Если долго скроллить твиттер или тумблер, то можно уронить браузер. Нам вроде сейчас особо не грозит, но всё же лучше быть готовым убирать медиа-контент, который не на экране.

    * сложности в навигации
    Нет понятной позиции на таймлайне и невозможно сослаться на определённый момент времени.
    Хотя на жуйке с этим и сейчас не очень — сейчас разве что можно считать, сколько страниц прокликал, но по крайней мере есть ссылки на ленту с привязкой к постам.
    Тут, в принципе, можно сделать нормально, если в бесконечную ленту вставлять отметки "день, два, три назад, такое-то число..." и как-то предоставлять ссылку, которая приведёт в то же место в ленте.
  • @killy, Про навигацию я разве не тоже самое написал?
  • @vt, Примерно. Возврат из треда — часть проблемы.
  • @killy, Ха, может именно поэтому везде тред показывают всплывающим окном?
  • @vt, Ога. И комменты подгружают порциями. Лишь бы только не новую страницу...
    Опасная дорога.
  • @killy, Так она у них физически одна
  • @killy, Покритикуйте beta.juick.com, пока я это не залил на главную :)
  • @vt, * Для мобильников пока что получается хуже, чем было (теперь почти всё в подвале окажется). Попробую сворачивалку сделать.

    * Порядок пунктов в левой колонке мне не нравится.
    Предлагаю | My_feed Recommendations Photos |
    | PM Discuss Settings Logout |
    (разделить то, что видно всем обо мне, и то, что вижу только я)

    * Шапку надо будет доработать (могу свой вариант предложить)
    — Подчёркивания, "/".
    — Одинаковый фон у шапки и остального сайта — как-то не очень.
    — Надо бы сделать responsive, чтобы показывать ровно столько, сколько в экран влезает и можно было достать то, что не влезает.
  • @killy, Так этот подвал надо сделать сайдбаром
  • @killy, А. My_feed тоже только мне виден — его тоже во второй блок.
  • @vt, Значит сайдбаром.
    А говорил что не в тренде...
  • @killy, Ну дык не выползающим, а открывающимся поверх
  • @vt, Как на mobile.twitter.com
  • @vt, ?
  • @vt, На фейсбуке тоже такой, только лол, справа для арабов
  • @killy, Ну вот это как на фейсбуке, на жуйке нет Арабов!
  • @killy, Хотя кнопка пользователя да, а в правой что тогда ?
  • @killy, (Неплохо бы ещё как-то видеть в каком разделе находишься.)
  • @vt, В правой — All, photos, поиск
  • @killy, Может это под лого сделать?
  • @vt, Надо ещё лого по центру.
    Можно рядом с ним галку вниз вместо гамбургера — тогда понятно будет.
  • @killy, Да, галка вниз лучше гамбургера, я именно против него, пользователь не знает что это
  • @killy, Фон шапки и остального сайта одного цвета это норм, надо просто выделять активный пункт, темная шапка говно
  • @vt, Да ладно, все уже выучили.
    И он стал популярен именно потому, что это удачная визуализация того, что под ним обычно находится — вертикального списка элементов.
    Я бы даже сказал, что он более понятен и не многозначен по сравнению с галкой.
    Хотя в данном случае мне и галка норм. Но потом могут быть вопросы уже к ней.
  • @vt, Мне мой вариант нравится — не такая уж тёмная, главное отличается от остального фона.
  • @killy, Наоборот надо фон темнее делать, например каким-то узором заливки, а не шапку
  • @vt, Покажи пример.
    Пока что аватар с бордером не очень сочетается. Без бордера тоже не айс.
    Нужен разный фон. При этом, если шапка светлее основного фона, то тоже фигня получается.
  • @killy, Светлая шапка, светлый фон, но чуть темнее
  • @vt, Херня же.
  • @killy, так тень у шапки сделай
  • @vt, Худо-бедно на мобильнике...
  • @killy, Хреново на десктопе.
  • @killy, Предыдущий вариант получше, т.к. основной фон не трогал.
  • @killy, Ну вот норм же
  • @vt, Удовлетворительно.
    Имхо затемнённая шапка всё равно была бы лучше чем выбеленная.
  • @killy, Поэтому мне нравится одного цвета, stackoverflow и мобильный твиттер
  • @vt, У SO затемнённая шапка.
  • @vt, Хотя у so на мобильном зачем то чёрная
  • @vt, Даже на десктопе она чуть темнее.
  • @killy, ну вот можно попробовать белый жуйк с еееее5 шапкой
  • @vt, Вот белый точно не надо.
  • @killy, ну так давай оставим один цвет и хватит париться, еще куча всего чинить же, от подчеркиваний в ссылках как-то избавиться например
  • @vt, В порядке моих предпочтений:
    /82
    /101 (фон eeeee5, шапка f5f5e9)
    и только потом
    /95

    Ты скажи, когда свои идеи в этой ветке реализовал, тогда доверстаю.
  • @killy, упс. забыл кропнуть
  • @killy, Или f5f5eb для шапки.
  • @killy, эти серые цвета какими-то грязными пятнами выглядят :)
  • @killy, аватар с бордером не очень сочетаетсяА нафига его прижимать к границе? Надо маленький as аватар туда
  • @vt, Ну приехали. А в /102 ему норм было...
  • @killy, В /102 норм
  • @vt, какие там цвета? Попробую у себя
  • @vt, f2f2ec — шапка
    eaeadf — фон
  • @killy, ну щас на бете так
  • @vt, Сойдёт.
  • @vt, Не. Так не лучше.
  • @killy, (К слову, не очень понимаю, зачем хранить аватар в двух размерах.)
  • @killy, Не знаю, зачем это делал угнич, вообще нужен аватар стандартного размера, @2x и @3x, но as слишком маленький даже для @1x
  • @killy, а если левую панель сделать фоном шапки?
  • @vt, не, фигня, фоном шапки надо делать выделенный пункт меню
  • @vt, имхо тоже фигня. Я бы на выделенном пункте галку вправо рисовал.
  • @killy, сделал фиксированную шапку, вроде норм, хз
  • @vt, или боковую панель тоже фиксировать надо что ли. В фейсбуке фиксированная, вконтактике нет и какая "наверх" херня вместо нее
  • @vt, Что-то с наручниками.
    Боковую панель можно прибить при условии, что она в экран по высоте влезает.
  • @killy, наручники уйдут в строку recommend, comment, share (сюда)
  • @vt, а pm похоже надо убирать в глобальное меню, чтоб она могла заполнять боковое меню людьми
  • @vt, И settings тогда тоже?
  • @killy, Не только наручники, но и остальные значки просвечиваются через шапку
  • @vt, Ещё с юзерскриптом комменты просвечивают.
    Причина — transform и position relative влияют на z-index.
  • @killy, если нет каких-то сверхбагов, то я хочу текущее зарелизить на главную
  • @vt, PM (и Settings) решил наверх не вытаскивать?

    Про порядок пунктов меню я говорил: имхо лучше Recommendations, Photos <hr/> потом всё остальное.

    Иконки по прежнему просвечивают через меню. (это могу пофиксить после)
  • @killy, Ну это мелочи, можно релизить? Сервис-паками допилим!
  • @vt, Народ на мобильниках будет не очень рад.
    У меня ещё день займёт допилить, после того как ты засквошишь все эти коммиты.
  • @killy, а что на мобильниках? Меню и так было в подвале, ничего не поменялось
  • @vt, Туда несколько пунктов из шапки уехали.
  • @killy, да этими пунктами щас мало кто пользуется, все же читают весь жуйк
  • @vt, Только заметил:
    Наручники совсем выпилил?
  • @killy, share же
  • @vt, Не вижу.
  • @killy, из комментов выпилил, в ленте есть
  • @vt, ну все, писец
  • @vt, Ок. Посмотрим на реакцию.
    А подписка на тред где?
  • @killy, хз, потерял где-то
  • @vt, пойду посплю и пусть мне приснится сайдбар на мобильниках