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.

Sign up for GitHub

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

Jump to bottom

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

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

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

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a7e05d8
Ченджлог на главной: первое приближение
solarrust Aug 7, 2024
9b5b11e
Стили для мобильных
solarrust Aug 8, 2024
7a866c8
Обновляет разметку
solarrust Aug 9, 2024
2d1b25a
Больше одного автора: меняет разметку и стили
solarrust Aug 9, 2024
14aee60
Добавляет необходимые поля в коллекцию
igsekor Aug 9, 2024
999bf0b
Добавляет объект для работы с ченджлогом
igsekor Aug 9, 2024
46f5551
Меняет вёрстку на цикл
igsekor Aug 9, 2024
d8483dc
Делает короткую дату на мобильном реальностью
igsekor Aug 9, 2024
c49ea7e
Тюнит размеры
skorobaeus Aug 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 45 additions & 0 deletions src/includes/blocks/changelog.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<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?

<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


<ul class="changelog-list">
<li class="changelog-list__item">
<div class="changelog-list__link changelog-item">
TatianaFokina marked this conversation as resolved.
Show resolved Hide resolved
<time datetime="0000000" class="changelog-item__time font-theme--code">22 апреля</time>
<a href="#" class="changelog-item__title link">Распознавание речи</a>
<a href="#" class="changelog-item__author font-theme--code link">Татьяна Фокина</a>
</div>
</li>
<li class="changelog-list__item">
<div class="changelog-list__link changelog-item">
<time datetime="0000000" class="changelog-item__time font-theme--code">10 апреля</time>
<a href="#" class="changelog-item__title link"><code>sv, lv, dv</code></a>
<a href="#" class="changelog-item__author font-theme--code link">Александр Мосякин</a>
</div>
</li>
<li class="changelog-list__item">
<div class="changelog-list__link changelog-item">
<time datetime="0000000" class="changelog-item__time font-theme--code">04 апреля</time>
<a href="#" class="changelog-item__title link">Доступное имя и описание</a>
<a href="#" class="changelog-item__author font-theme--code link">Марианна Минич</a>
</div>
</li>
<li class="changelog-list__item">
<div class="changelog-list__link changelog-item">
<time datetime="0000000" class="changelog-item__time font-theme--code">01 апреля</time>
<a href="#" class="changelog-item__title link">Очень выразительный React: самые простые компоненты</a>
<a href="#" class="changelog-item__author font-theme--code link">Полина Гуртовая</a>
</div>
</li>
<li class="changelog-list__item">
<div class="changelog-list__link changelog-item">
<time datetime="0000000" class="changelog-item__time font-theme--code">30 марта</time>
<a href="#" class="changelog-item__title link"><code>.closest()</code></a>
<a href="#" class="changelog-item__author font-theme--code link">Viktar Nezhbart</a>
</div>
</li>
</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 •
edited
Loading

Choose a reason for hiding this comment

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

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

image

<p class="changelog-footer__item">Станьте автором! Выберите тему в 🔥 <a href="https://github.com/doka-guide/content/milestone/22" class="link changelog-footer__link">Бэклоге</a></p>
</div>
</div>
156 changes: 156 additions & 0 deletions src/styles/blocks/changelog.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
.changelog {
padding-block-end: clamp(40px, 4.8%, 80px);
}

.changelog-list {
margin: 0;
padding: 0;
list-style: none;
line-height: 1.3;
}

.changelog-list__item:not(:last-child) {
margin-block-end: 20px;
}

.changelog-item {
display: flex;
justify-content: space-between;
align-items: baseline;
column-gap: 18px;
}

.changelog-item__time,
.changelog-item__author {
display: flex;
align-items: baseline;
gap: 18px;
font-size: 28px;
}

.changelog-item__time::after,
.changelog-item__author::before {
content: '';
flex: 1 1 auto;
border-block-end: 5px dotted var(--color-text);
opacity: 0.3;
}

.changelog-item__time {
flex-shrink: 0;
inline-size: 30%;
font-family: var(--font-family);
}

.changelog-item__title {
margin: 0;
font-weight: normal;
font-size: 24px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.changelog-item__author {
flex: 1 0 25%;
justify-content: end;
font-family: var(--font-family)
}

.changelog-footer {
display: flex;
justify-content: space-between;
gap: 18px;
margin-block-start: 45px;
}

.changelog-footer::before {
content: "";
flex-basis: 30%;
}

.changelog-footer__item {
margin: 0;
}

.changelog-footer__item:last-child {
flex-grow: 1;
text-align: end;
}

@media (width <= 1024px) {
.changelog-item {
flex-wrap: wrap;
}

.changelog-item__time {
inline-size: 100%;
justify-content: end;
}

.changelog-item__time::after {
display: none;
}

.changelog-item__title {
max-inline-size: 55%;
font-size: 18px;
}

.changelog-item__author::before {
border-block-end-width: 3px;
}

.changelog-item__time,
.changelog-item__author {
font-size: 22px;
}

.changelog-footer {
flex-direction: column;
font-size: 18px;
}

.changelog-footer::before {
display: none;
}

.changelog-footer__item:last-child {
text-align: start;
}
}

@media (width <= 768px) {
.changelog-item {
flex-direction: column;
justify-content: start;
}

.changelog-item__time {
inline-size: fit-content;
justify-content: start;
}

.changelog-item__title {
max-inline-size: 90dvw;
font-size: 20px;
}

.changelog-item__author {
flex: 0 0 auto;
}

.changelog-item__author::before {
display: none;
}

.changelog-item__time,
.changelog-item__author {
font-size: 20px;
}

.changelog-footer {
margin-block-start: 30px;
font-size: 17px;
}
}
1 change: 1 addition & 0 deletions src/styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,3 +88,4 @@
@import url("blocks/subscribe-popup.css");
@import url("blocks/subscribe-page.css");
@import url("blocks/baseline.css");
@import url("blocks/changelog.css");
2 changes: 2 additions & 0 deletions src/views/index.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@
</div>
</div>

{% include "blocks/changelog.njk" %}

{% include "articles-gallery.njk" %}

<section class="materials-collection">
Expand Down
Loading