• Juick discuss wip Ещё раз.
    Вёрстка жуйка в расчёте на экраны любых размеров.
    Проверьте кто на чём может.
    тред, залогинен
    лента, разлогинен

    Вчерашний пост прошёл практически незамеченным.
    Но я тут ещё немного дополировал. (Подкрутил тень под меню, чтобы "не так сильно сливалась". При схлопывании меню в одну колонку, нельзя ставить поиск вниз — он скрывается за клавиатурой. Схлопывание в одну колонку происходило раньше, чем нужно. У незалогиненного пользователя нет аватарки, только шеврон.)

    Если проблем с этой вёрсткой нет, то могу толкнуть коммит.

Replies (95)

  • @killy, Хаха, а форма та же, будут ныть, что кнопки переставляем а форму не чиним
  • @vt, Как я и говорил, формой займусь, когда будет видно, в каком окружении она будет.
  • @killy, Ну мне это меню не нравится, стрелка опять отдельный пункт как бы представляет, и меню все равно сливается, может белым его?
  • @vt, Вот стрелка в контактике четко показывает текущий элемент и наличие меню. Ну и вообще, как бы на мобиле принято что верхняя строка показывает текущий раздел, а написать — кнопкой сбоку (или кругляшком внизу, если на андроиде), ну то есть навигация мягко говоря странная
  • @killy, Напишу подряд все, что заметил.

    1. В ленте ссылки "Contacts, help, advertisement" выравниваются по по правой стороне плашки с постом. В треде происходит то же самое, но сама плашка с постом только одна, в самом верху, из-за чего возникает ощущение, что эти ссылки не выровнены и торчат. Решение: 1) Сделать плашки комментов такой же ширины, как и плашка поста (не работает для древовидных комментов); 2) выделить цветом фоновый див у комментариев, ну и чтобы он был той же ширины, что и плашка поста (в общем-то тоже не работает для древовидных комментариев большой вложенности).

    2. При изменении размера текстарии "Написать комментарий..." кнопка "ОК" должна выравниваться по нижнему краю текстарии, не? (Алсо, колонка пустого места под кнопкой прикрепления картинки выглядит, конечно, не очень; область для драггинга в идеале должна быть в углу.)

    3. Тред, свернутое меню юзера: у кнопок "Subscribe, Block, PM" должен быть отступ от линии прямо над ними?

    4. Там же: "Рекомендации, Фотографии", текст точно не по центру должен быть? "Поиск" и теги точно не должны быть по центру\растягиваться?

    5. Кнопка разворачивания верхнего меню (которое "Блог, Моя лента...") — ссылка и работает с вимиумом, а кнопка разворачивания меню пользователя (которое "Subscribe, Block, PM") — не ссылка и не работает с вимиумом.

    6. Верхнее меню с полем для поиска, но без остальных кнопок (без "Фото, Написать..." — только одно поле для поиска и все) выглядит, конечно, странно: маленький текстбокс и куча пустого пространства на весь экран. Растянуть на всю ширину? В ленте это выглядит нормально, так как там справа всего одна ссылка.

    7. Всплывающая форма отправки нового сообщения: на маленьких экранах ее не видно целиком, но при этом она и не прокручивается. Если она целиком не влезает в экран по вертикали, то you are screwd. То же касается и верхнего меню, кстати. (Не уверен, впрочем, что девайсы с таким маленьким экраном еще есть.)

    8. Там же: на достаточно маленьких экранах текст-ария ("New message...") вылазит за пределы формы.

    9. Там же: "or Upload" должно быть в одну строку. :)

    10. Там же: инпутбокс для тегов должен быть растянут по ширине, как и все остальные инпуты в форме.

    Вроде больше ничего не заметил.
  • @vt, Хочу всё как в лучших домах! Во всех сразу!

    Про это вот это вот Блабла^ уже высказали жалобу, что слишком много нажатий — дай нам все важные ссылки в один клик.

    Меню на скриншоте содержит несколько ссылок, а остальное распихано невесть где. Ты ещё скажи, что вон та нижняя панель с иконками нужна.

    С текущим разделом вообще беда сейчас. Я не думал его в шапку пихать, но есть сложности с левой колонкой. Пока не думал, как шаблоны рефакторить.
  • @killy, Стрелка в данном случае показывает варианты фильтрации одной новостной ленты, а кнопки внизу — это настоящее меню разделов. Разделы на жуйке — это моя лента, пм, нотификации (пока не готово) и обзор. Вот к ним нужен быстрый доступ, а остальное — это вот опции этих разделов, которые и можно скрывать стрелками
  • @killy, На мобиле лучше чем сейчас. На десктопе меню слева — выглядит дико. Хотя лучше чем как сейчас, выходить на главную, чтоб в дискуссии попасть.
  • @voice-of-lolks, 1. на подвал не смотрю, пока есть более серьёзные проблемы. Шаблон дерева комментариев надо переделать, чтобы получить сворачивание и пофиксить неограниченное уползание вправо.

    2. не уверен насчёт нижнего края. Пока сделал, чтобы кнопка оставалась на экране хотя бы. На мобильных устройствах уползает вниз, т.к. там дефицит пространства по ширине экрана. Насчёт кнопки прикрепления картинки думаю. Там ещё есть что пофиксить в этой форме, поэтому ещё вернусь к ней.

    3. да, надо добавить.

    4. по центру — плохо. в одну строку тоже не очень. Не знаю, что делать на среднего размера экранах (возможно, надо и тут тоже две колонки делать). Поиск растягивается на маленьких экранах. Тегов маловато в примере — так-то они занимают всё доступное пространство.

    5. пропустил этот момент, т.к. на десктопе обычно полноразмерный вид должен быть. Ок, не проблема добавить.

    6. сложный вопрос. Справа одна ссылка только для гостей — в ленте и треде одинаково. Могу Фото прятать на 710px вместо 600px, чтобы там не одиноко было...

    7. форма — следующий шаг, когда (если -_-) меню устаканим.

    8. это если меньше 320px. Есть такие?

    8,9,10. см. п. 7
  • @lex2d, На десктопе меню слева — выглядит дико.Вот это не понял. Меню слева?
  • @killy, Насчет 4 — а почему, собственно, по центру — плохо? Уточню: я имею в виду выравнивание по центру текста внутри кнопок "Рекомендации, фотографии". С учетом того, что сами кнопки растянуты на всю ширину, и с учетом трех отцентрованных кнопок над ними — по-моему вполне симпатично будет. А вот насчет поиска и тегов тоже не уверен.

    Насчет 8 — надо ведь еще зум учитывать. Вообще, там нечто такое получается: imgur.com

    И насчет 6 — может вообще сразу все кнопки прятать вместе с поиском, а? Так и развернутая менюшка будет всегда выглядеть нормально, и высоту плавающего хидера можно будет уменьшить до полосочки со стрелкой. Пустое пространство слева можно будет заполнить ма-аленьким логотипом. Ну или справа аватарка, слева стрелка. Или логотип со стрелкой. Ну, ты понял.
  • @voice-of-lolks, 4. имхо зашквар. Выравнивание по центру сразу говорит "мы не знали где оно на самом деле должно быть". И оно на самом деле как-то так. Фичи левой колонки должны быть как-то по другому организованы, но я пока не вижу как именно.

    8. про то, что отдельно взятую форму сделать более отзывчивой — не спорю (И она скорее всего будет более отзывчивой, когда за неё кто-то возьмётся). Но патологические случаи (как на скриншоте) лучше не рассматривать. Никто не будет пользоваться в таком виде, когда на экране помещается только два слова в одну строку.

    6. предыдущий вариант ( #2887699 ) — логотип с шевроном по центру и аватарка в углу. Кое-кому не понравилось, что до тех пунктов, которые сейчас на виду, нужно будет в два клика добираться вместо одного.
  • @killy, о, кнопки под постом в одну строку! Заебись.
  • @killy, при клике на льва битая картинка
  • @lurker, Там и льва могло не быть.
    Макет, сохранённый с локалхоста. Подставил ссылку на loremflickr.com, чтобы дырку заткнуть.
  • @killy, 4. Но ведь три кнопки над ними уже по центру! Три кнопки, Карл^W^W^W Впрочем, дело хозяйское — возможно, и вправду нужно вообще в целом как-то по-другому все это организовать.

    8. Ну, смотри, я обычно просто делаю в браузере зум на максимум и смотрю, все ли работает. Случай на картинке, конечно, патологический, но с трехкратным зумом на десктопе форма и хидер ведут себя так же.

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

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

    А вообще, если фантазировать, то в идеале хотелось бы видеть выплывающую левую панель (aka drawer), наверное. То есть сперва левая колонка схлопывается, а в хидере в левом углу появляется кнопка меню (☰), при нажатии на которую левая колонка выезжает поверх контента. Потом, при следующем уменьшении размера экрана, хидер схлопывается в тонкую полосочку с кнопкой ☰, маленьким логотипом и маленькой аварткой, а все кнопки из хидера переносятся наверх этой выезжающей слева поверх контента колонки. Вот.
  • @killy, на jolla в портретной ориентации в меню popular, photos, login. при повороте photos переезжает в верхнюю строку, login остаётся в меню, а popular улетает в пропасть куда-то
  • @voice-of-lolks, 8.
    я обычно просто делаю в браузере зум на максимум и смотрю, все ли работает.Для этого есть эмуляция устройств в devtools. Абстрактный "максимум" не даёт полезной информации о том, что будут видеть пользователи при повседневном использовании.
    Перфекционизм говорит, что неплохо бы, чтобы оно в принципе всегда было нормально, да. Но это не та задача, время на которую чем-то окупится.

    6. в идеале надо всю навигацию переосмыслить, на что намекает vt (т.к. не умеет выразить свой замысел более внятно). Если будет серьёзная основа под дизайном (что-то лучше чем "я решил, значит в 7 кликов привыкнут"), то претензий быть не должно. Я же пока только постарался привести то что есть в более юзабельное состояние.
  • @max630, Popular — отображается вместо логотипа.
    В ландшафтной ориентации в верхней строке хватило места для логотипа и photos.
  • @killy, Справа. Я типа сено-солома путаю.
  • @lex2d, А почему дико?
  • @killy, Меню вроде нравится, разве что в нандшафтном режиме открытое меню занимает места несоразмерно контенту. Но вообще хорошо!
  • @killy, кстати, почему цвета в выпадающем меню отличаются от цветов слева? тот же вопрос про шапку
  • @lurker, В смысле?
    Выпадающее меню — часть шапки и имеет те же цвета, что и шапка.
    Или вопрос в том, почему фон шапки отличается от фона страницы?
  • @killy, текст. нафига в жуйке два разных синих текста?
  • @lurker, это скорее к виталию вопрос
  • @lurker, Один и тот же везде.
    За счёт разного фона, возможно, тебе кажется что разный.
  • @killy, проверил. да, цвет 069 везде. но мак мутит эту хуйню для lcd
  • @lurker, а в шапке не мутит. в чём разница?
  • @lurker, нашёл ) бокс-шадоу на хэдере отключает эту хуйню.
  • @lurker, можно на бади бокс-шадоу со всеми нулями повесить, наверное, и оно везде отключится... ща проверю
  • @lurker, не, нихуя. на бади не работает. а в каждом месте пихать заебёшься
  • @killy, Не скрывается адресная строка на мобиле
  • @oxpa, Адресная строка?
  • @killy, Чисто имхо, но оно смотрится очень инородное. На мабилах вроде ничего, а на большом экране глаз цепляется ибо в большинстве случаев меню справа.
  • @killy, Ну когда вверх вниз таскаешь
  • @oxpa, Я не понял, то ли ты шапку сайта назвал адресной строкой (коей она не является), то ли в твоём браузере поведение адресной строки как-то от сайта зависит...
  • @killy, Оно зависит от сайтов: если в них не листается "верхний" элемент, то адресная строка не убирается. Могу сделать видео,наверно
  • @oxpa, Во вторник даже демо сайт сделать,наверно
  • @oxpa, Хм... Тут не знаешь, что лучше: в одних браузерах так, а в других, если прятать шапку при прокрутке, то две по-разному ездящие панели будут плохо смотреться.

    Я бы посмотрел на обзор того, какой процент браузеров какие трюки вытворяет.
  • @killy, Нене, не шапка) ну если прокрутки на html нет, т он считает,что контент не крутится.
    Ну адресная строка в мобильных браузерах всегда уезжает...
  • @oxpa, Я немного неточен: в ленте — скрывается
  • @killy, Запустил то что нашёл в репе на бету, хз, как-то все не красиво
  • @killy, А чего новый пост ридонли?
  • @vt, Я подумал, что можно тут обсуждение продолжить. Хз как лучше.
  • @killy, В общем не знаю зачем две аватары и две стрелки и меню страшные
  • @vt, Как бы на мобилках есть стандартный порядок навигации, я бы ещё понял если бы это скажем было андроид навигацией, но это же просто невпопад
  • @killy, перебор имхо. второй юпик выглядит лишним, хотя и намекает, а если его убрать, то задолбаются искать меню
  • @vt, левую колонку отгрызает снизу.
    она странно, пикселей на 10, прокручивается при скроллинге.
  • @alex0b, Хмм... Большой шрифт при маленьком экране. Всё-таки у кого-то не влезло по высоте.
    Можно сделать, чтобы не отгрызало, но это надо повозиться с js.

    10 пикселей можно будет пофиксить.
  • @vt, Своя аватарка в левой колонке не нужна теперь, кроме случая когда в своём блоге находишься.
    Не стал теги туда возвращать — лучше подумать, что туда можно поставить более разумное.
  • @vt, Я тут подумал, что в мобильном виде надо всё-таки фон под #column добавить.
    Что ещё там страшного?
  • @vt, На мобильном очень удобно.
  • @jh, Фантастика просто, особенно то меню, в котором пункты меньше пальца в три раза
  • @killy, Отступы
  • @vt, Ты пальцем ноги что-ли нажимаешь? Аккуратнее, экран раздавишь.
  • @jh, Вот вообще — да: удобно и достаточно понятно.
  • @alex0b, это не то, ты в другое меню глянь
  • @vt, в какое другое? в меню профиля? приблизительно тож самое на глаз, а может и абсолютно тож самое. внизу страницы — аналогично.
  • @alex0b, Вот в это скопление пыли внизу
  • @vt, разве не такой же размер как до менюфикации?
  • @Renha, Нет, только теги такие же, а меню под ними другое
  • @vt, ну да, но не так критично. пункты не самые популярные, можно и потерпеть пока пофиксится. давай уже следующую стадию после "херак-херак"!
    (при всем уважении к труду @killy и @vt)
  • @alex0b, Вот мне этот херак-подход и не нравится
  • @vt, косоватый ролинг-релиз лучше чем видимая стагнация и великая цель, имхо
  • @vt, сейчас на продакшне такой же херак буз кнопки "популярное" на мобилках
  • @Renha, Сейчас только теги в пыль, а тут предлагается ещё скомкать кусок, и добавить два меню
  • @alex0b, Но я не хочу релизить два меню!
  • @vt, это другое. "не нравится как выглядит/работает" сильно отличается от "у вас тут криво картина висит".
    а то не понятно что тут это — не то, а это
  • @alex0b, В данном случае развешивание картин же обсуждаем
  • @vt, а как бы ты повесил?
  • @alex0b, С отступами, вестимо
  • @killy, Верните уже кликабельные тэги в форму поста. Пожаааалуйста.
  • @vt, Сейчас там только ссылки растянуты.
    Но ок, принято — сделаю более finger-friendly.

    Сейчас посмотрел на некликабельное Messages: 318 и подумал: можно сделать кликательным (хотя для comments не получится — есть планы на этот счёт?) и объединить с Recommendations и Photos выше.
    Разве что иконки для всего этого придумывать — та ещё задача... Ну или убрать оттуда иконки.
  • @killy, Ветка notifications, там запрос надо починить, он начинает тормозить если далеко идти
  • @trapdoor, В смысле на страницу /post?
    Сейчас есть в юзерскрипте.
  • @vt, Notifications — это же для себя (в шапку).
    А последние комменты любого юзера не посмотреть — в левой колонке останется некликабельный пункт.
  • @killy, В своём блоге надо попробовать заменять аватар и ник в ctitle на "Мой блог".
  • @killy, а у меня всё так же, когда залогиненным смотришь тред, не убирается address bar в хроме на мобилке. и что-то я не вижу почему
  • @oxpa, о! А если нажать "раскрыть все", то начинает работать.
  • @oxpa, если комментарии показаны нераскрытым деревом, то что-то ломается в прокрутке... И что-то я не понимаю, что именно.
  • @killy, Запрос в целом один и тот же и тормоза там же. Надо или реплаи индексировать, или еще что-то
  • @oxpa, Какие-то эвристики (aka магия) в отдельно взятом браузере.
    Вся разница на сайте — у некоторый элементов выставлен display: none.
  • @killy, этот отдельно взятый браузер — chrome =) никаких доп изобретений. Я удивлён, что оно у тебя не воспроизводится
  • @oxpa, У меня нет мобильного хрома.
  • @killy, Если тапнуть куда-нибудь и потом листать — скрывается. Может фокус куда-то нетуда "улетает"?
  • @oxpa, А. С фокусом у меня на десктопе проблема.
    Видимо, пока фокус на текстовом поле, если я прокрутил страницу и кликнул куда-то, то меня перебрасывает в начало станицы, где текстовое поле находится. Воспроизводится нерегулярно.
  • @killy, Пока не забыл: чёрному списку место в персональном меню, а не в левой колонке.
  • @killy, Юзерскрипта нет на мобиле. На десктопе хотя бы скопировать из старых можно...
  • @trapdoor, На мобильном Firefox, теоретически, должен работать.
    Но я понял. Надо будет скопипастить в жуйк.
  • @killy, wip
  • @killy, Лично мне не понятно горизонтальное выравнивание менюшки "Subs-Block-PM". Но и на мое мнение не стоит полагаться — я предпочитаю консольные приложения.
  • @vt, Ну и как же надо?
  • @alex0b, Надо много думать, пока нет времени
  • @vt, Вот и я за то, что хорошее лучше плохого. Тем более, что лучшего как бы и нет.