Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ченджлог на главной: первое приближение #1286

Open
wants to merge 9 commits into
base: main
Choose a base branch
from

Conversation

solarrust
Copy link
Member

@solarrust solarrust commented Aug 7, 2024

Первый подход к вёрстке блока с ченджлогом на главной

Десктоп
CleanShot 2024-08-08 at 10 40 47@2x

Планшет
CleanShot 2024-08-08 at 10 43 15@2x

Мобилка
CleanShot 2024-08-08 at 10 43 35@2x

На мобилке пока расположила всё в столбик. Если у @igsekor получится отображать месяц не словом, а цифрой, то переверстаю.

@skorobaeus нужен твой глаз-алмаз.

@igsekor нужно прикрутить логику, чтобы инфа подтягивалась из ченджлога.

@solarrust solarrust added the вёрстка Задачи по вёрстке label Aug 7, 2024
@solarrust solarrust marked this pull request as ready for review August 8, 2024 09:42
@TatianaFokina
Copy link
Member

TatianaFokina commented Aug 8, 2024

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

Ещё может быть есть смысл слегка увеличить нижний паддинг у даты на мобилках?

src/includes/blocks/changelog.njk Outdated Show resolved Hide resolved
src/includes/blocks/changelog.njk Outdated Show resolved Hide resolved
src/includes/blocks/changelog.njk Outdated Show resolved Hide resolved
@solarrust
Copy link
Member Author

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

Ещё может быть есть смысл слегка увеличить нижний паддинг у даты на мобилках?

В макете ссылочки тоже стоят друг над другом https://share.cleanshot.com/PvrPmrz7
Нужен совет @skorobaeus

@TatianaFokina
Copy link
Member

В макете ссылочки тоже стоят друг над другом https://share.cleanshot.com/PvrPmrz7 Нужен совет @skorobaeus

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

Copy link
Member

@igsekor igsekor left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Наверное, ещё надо удалить ссылку в баннере выше про бэклог?

@TatianaFokina
Copy link
Member

TatianaFokina commented Aug 23, 2024

Блин, как круто получилось. Нашла только пару мееееелких штук, которые не супер важные, и, если есть время, можно поправить в этом пиаре. Если что, могу донести потом отдельным.

@skorobaeus, продолжаю душнить про слегка увеличенный отступ между ссылкой на материал и страницу автора на мобилках. Реально сложно прицелиться куда надо. Как-то так это может быть:

image

Шрифт у строчек с кодом сейчас дефолтный, надо будет накинуть на <code> классы font-theme font-theme--code. Можно попробовать так это сделать:

{% set codeInTitle = item.title | replace('<code>', '<code class=font-theme font-theme--code">') %}
<a href="{{ item.url }}" class="changelog-item__title link">{{ codeInTitle | safe }}</a>

Возможно, точечки уменьшать можно чуть пораньше, чтобы автор не уезжал под них. Дело в длине названия материала, так что не уверена, как лучше поступить, @skorobaeus . Пример:

image

Может заменим внутри li дива на спаны, всё же? 🥺 Могу я, так как именно мне они не дают покоя.

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

@TatianaFokina TatianaFokina self-requested a review August 23, 2024 11:00
@Inventoris
Copy link
Member

Всем привет! Невероятно крутая фича, давно её ждал 🤩

Не могу пройти мимо и предлагаю несколько улучшений, как сторонний наблюдатель.

Наверное, ещё надо удалить ссылку в баннере выше про бэклог?

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

Дубль

@@ -0,0 +1,23 @@
<div class="changelog">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<div class="changelog">
<section class="changelog">

У нас есть заголовок, и эта часть выглядит, как отдельная смысловая. Может выделим её в section?

@@ -0,0 +1,23 @@
<div class="changelog">
<h2 class="visually-hidden">Новые статьи</h2>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Вроде того:

image

{% endfor %}
</ul>
<div class="changelog-footer">
<p class="changelog-footer__item">Новые материалы в <a href="https://github.com/doka-guide/content/blob/main/CHANGELOG.md" class="link changelog-footer__link">ченджлоге</a></p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Что если здесь сократить строку до ссылки «Посмотреть все», а её переместить под видимый заголовок в начале секции?

Вроде:

<h2>Новые статьи</h2>
<a>Посмотреть все</a>

image

Как будто так секция воспринимается понятнее?

Copy link
Member

@Inventoris Inventoris Aug 26, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Либо поставить её снизу справа вместо дублирующейся ссылки? Так даже удобнее :)

image

Comment on lines +10 to +14
<div class="changelog-item__author">
{% for author in item.authors %}
{% if loop.index0 !== 0 %}, {% endif %}<a href="{{ author.url }}" class="changelog-item__author-link font-theme--code link">{{ author.name }}</a>
{% endfor %}
</div>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Возможно, добавим условие, что если авторов несколько, то помещаем их в список ul?

@skorobaeus
Copy link
Member

skorobaeus commented Aug 26, 2024

@Inventoris, спасибо за фидбек! Я тоже думала над заголовком для секции ченджлога, но он пока не прижился в макете, потому что на главной вовсе нет заголовков в привычном понимании слова. Но подумаю ещё :) Если не трудно, скажи, пожалуйста, есть ли такой же эффект, что не сразу понятно, что происходит, когда скроллишь через фичеринг (большие цветные блоки) и рубрикатор (пять колонок с разделами)?

Ссылка на горящий бэклог действительно должна быть одна, и я переместила её на новое место намеренно, потому что метрика показывает, что на ссылки в блоке "Друг для друга" вообще никто не кликает 😅 Хотим проверить гипотезу, будет ли эта ссылка работать лучше, завёрнутая в осмысленный призыв словами.

@Inventoris
Copy link
Member

Inventoris commented Aug 26, 2024

Если не трудно, скажи, пожалуйста, есть ли такой же эффект, что не сразу понятно, что происходит, когда скроллишь через фичеринг (большие цветные блоки) и рубрикатор (пять колонок с разделами)?

@skorobaeus, у меня было ощущение перегруза, когда первый раз увидел секцию ченджлога. Масса точечек, даты итд. Это не плохо, она прекрасная, просто я сразу начал искать заголовок для понимания что это, где границы этой части, как её понять. Поэтому как будто хочется добавить заг, чтобы пользователь смог сразу понять, что его ждёт ниже.

Фичеринг. Понятно не сразу, но не критично. Тем более у карточек есть описания, из которых сразу понимаешь, что это именно карточки статей.

image

Рубрикатор. Эффекта, что я описал выше, точно нет. Всё сразу понятно, там также есть видимые заголовки h3, которые отлично группируют секцию по спискам.

image

Copy link

Превью контента из c49ea7e опубликовано.

@vitya-ne
Copy link
Contributor

vitya-ne commented Sep 7, 2024

Привет, спасибо за новую фичу!
Можно добавить своё впечатление (на правах одного из упоминаемых на скриншотах 😃 )?

  1. Немножко смущают даты (особенно на большом экране).
    Возможно заголовок (как предлагает @Inventoris) помог бы понять их необходиомость.
    Но так ли важно читателю (авторы не в счёт) знать дату публикации ?
    Мне кажется важнее подсветить новые материалы.
    Я бы предложил поставить первой колонкой название статьи.

  2. Как насчёт добавить принадлежность статьи к разделу ?
    Например в виде вертикальной полоски с цветом раздела:
    изображение

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

  4. Блок с ченджлогом, по-моему, немного теряется на фоне блоков "Друг для друга" и избранных статей, потому что не имеет бэкграунда:
    изображение
    Ещё немного смущает что текст в ченджлоге группируется в три колонки, так же как и избранные статьи. При беглом взгляде кажется что эти колонки как-то связаны.

  5. Ченджлог рядом с бэклогом смотрится "бедным родственником": у бэклога и иконка есть и сам он важный, с большой буквы начинается :)

@skorobaeus
Copy link
Member

Привет, спасибо за новую фичу! Можно добавить своё впечатление (на правах одного из упоминаемых на скриншотах 😃 )?

Нужно! Спасибо, что нашёл время пофидбечить!

  1. Немножко смущают даты (особенно на большом экране).
    Но так ли важно читателю (авторы не в счёт) знать дату публикации ?
    Мне кажется важнее подсветить новые материалы.
    Я бы предложил поставить первой колонкой название статьи.

Чтобы ответить на любой вопрос, нужно отталкиваться от того, какую задачу мы решаем :) Задача ченджлога в целом — показывать, что проект активен и обновляется, а в частности — показывать, что именно в нём нового. Поэтому даты играют достаточно заметную роль.

Дальше, например, идёт блок фичеринга, единственная задача которого — выдавать максимум спотлайта статьям и иллюстрациям. Если мы будем подсвечивать статьи и там, и там, становится непонятно, зачем тогда нужны два блока?

Может быть — МОЖЕТ БЫТЬ — и правда нужно объединить сущности и сделать один блок, который будет и фичерингом, и ченджлогом одновременно? 🤔 Тем более что @solarrust не единожды предлагала фичеринг вообще убрать.

Возможно заголовок (как предлагает @Inventoris) помог бы понять их необходиомость.

На заголовок есть запрос, зафиксировала ✍

  1. Как насчёт добавить принадлежность статьи к разделу ?

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

Немного "кухни" :)

image

image

  1. Если заговок длинный, мы увидим "точки элипсис" переходящий в другие точки

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

  1. Блок с ченджлогом, по-моему, немного теряется на фоне блоков "Друг для друга" и избранных статей, потому что не имеет бэкграунда

image

Добро пожаловать в дизайнерскую ловушку! Если выделить всё, ничто не будет выделенным ☝

Приоритет на главной у философии проекта и фичеринга, не предполагается, что ченджлог изменит это.

Ещё немного смущает что текст в ченджлоге группируется в три колонки, так же как и избранные статьи. При беглом взгляде кажется что эти колонки как-то связаны.

Интересная мысль. И звучит как +1 к идее объединить блоки.

  1. Ченджлог рядом с бэклогом смотрится "бедным родственником": у бэклога и иконка есть и сам он важный, с большой буквы начинается :)

Мой косяк 😄

@vitya-ne
Copy link
Contributor

Поэтому даты играют достаточно заметную роль.

Всё таки добавлю сомнений в идею показывать даты первой колонкой: что будет если несколько материалов будет смержено в один день (ну да, звучит неправдоподобно учитывая текущие темпы :(, но всё же ) ?

@skorobaeus
Copy link
Member

Поэтому даты играют достаточно заметную роль.

Всё таки добавлю сомнений в идею показывать даты первой колонкой: что будет если несколько материалов будет смержено в один день (ну да, звучит неправдоподобно учитывая текущие темпы :(, но всё же ) ?

Выведется одна и та же дата, а что в этом такого? И как порядок колонок влияет на это?

В любом случае, это не та битва, где нужно биться насмерть, не нужно выискивать всё новые аргументы, чтобы меня убедить :) Достаточно уже того, что даты смущают, значит, я буду думать :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
вёрстка Задачи по вёрстке
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants