вторник, 18 августа
-
-
marta 11:52
-
выкатила статику на bare.xmatic.team, кэш чистится сам
-
-
вес страницы — 14 кб. без шрифтов было бы 9, но mono того стоит
-
lev 11:58
-
смотрю network: один html, один css, ноль js до первого сообщения. красиво
-
kir 12:03
-
это и есть план. если фича требует бандлер — фича не нужна
-
-
доки пишу прямо в readme, отдельного сайта не будет
-
новые
-
marta 12:41
-
кто-то с hn спрашивает, где мобильное приложение
-
lev 12:42
-
ответил: браузер и есть приложение
-
+
marta 11:52
выкатила статику на bare.xmatic.team, кэш чистится сам
вес страницы — 14 кб. без шрифтов было бы 9, но mono того стоит
+
lev 11:58
смотрю network: один html, один css, ноль js до первого сообщения. красиво
+
kir 12:03
это и есть план. если фича требует бандлер — фича не нужна
доки пишу прямо в readme, отдельного сайта не будет
+
новые
+
marta 12:41
кто-то с hn спрашивает, где мобильное приложение
+
lev 12:42
ответил: браузер и есть приложение
>сообщение в #generalenter — отправить
@@ -125,7 +114,7 @@
18 авг
marta 11:52
выкатила статику на bare.xmatic.team, кэш чистится сам
вес страницы — 14 кб
lev 11:58
один html, один css, ноль js до первого сообщения. красиво
-
kir 12:03
это и есть план. если фича требует бандлер — фича не нужна
+
kir 12:03
это и есть план. если фича требует бандлер — фича не нужна
новые
marta 12:41
кто-то с hn спрашивает, где мобильное приложение
lev 12:42
ответил: браузер и есть приложение
diff --git a/docs/ui.md b/docs/ui.md
index e8f7e15..f0019d2 100644
--- a/docs/ui.md
+++ b/docs/ui.md
@@ -32,7 +32,7 @@
Шапка: имя (`#general` / `@marta`), по нажатию — участники или карточка контакта. Без темы и «N онлайн».
-Лента: десктоп — сетка «автор 132 px + текст», подряд идущие сообщения одного автора — без повтора автора; мобильный — автор над группой. Свой ник в колонке автора — цветом `mark`. Разделители дат — линия с датой; «новые» — линия цветом `mark` перед первым непрочитанным, исчезает при следующем открытии чата. Pending — текст цветом `stone`; failed — с пометкой «не отправлено · повторить». Нерасшифрованное — курсивом: «не удалось расшифровать: ключ изменился» / «…: нет ключа комнаты». Время — `ts` в локальной зоне, `ЧЧ:ММ`.
+Лента: поток блоков сверху вниз, одинаковый на десктопе и мобильном; подряд идущие сообщения одного автора — без повтора автора над группой. Свои сообщения выровнены по правому краю ленты, чужие — по левому (ADR-065); свой ник в колонке автора при этом остаётся цветом `mark`. Ширина блока сообщения ограничена — иначе выравнивать нечего, — текст внутри блока выровнен по левому краю независимо от стороны. Разделители дат и «новые» — во всю ширину ленты: линия с датой; «новые» — линия цветом `mark` перед первым непрочитанным, исчезает при следующем открытии чата. Pending — текст цветом `stone`; failed — с пометкой «не отправлено · повторить». Нерасшифрованное — курсивом: «не удалось расшифровать: ключ изменился» / «…: нет ключа комнаты». Время — `ts` в локальной зоне, `ЧЧ:ММ`.
Лента открывается последними 50 сообщениями и стоит в конце. Прокрутка к верхнему краю подгружает следующие 50; то, что человек читает, при этом не двигается. Загруженное остаётся в разметке целиком — виртуализации нет (ADR-053).
diff --git a/web/app.css b/web/app.css
index 48ca5d0..d37e0d9 100644
--- a/web/app.css
+++ b/web/app.css
@@ -650,19 +650,27 @@ input[type="password"] {
overflow-y: auto;
}
-.grid {
+.feed-list {
margin-top: auto;
display: flex;
flex-direction: column;
+ align-items: flex-start;
font-size: 14px;
- line-height: 1.5;
+ line-height: 1.55;
}
-/* мобильный: автор над группой сообщений */
+.feed-list > :first-child {
+ margin-top: 0;
+}
+
+/* строка сообщения: автор над текстом, блок целиком к своему краю —
+ свои вправо, чужие влево (ADR-065). Ширина блока ограничена, иначе
+ выравнивать нечего — текст в один абзац занял бы всю ленту. */
.line {
display: flex;
flex-direction: column;
+ max-width: min(640px, 85%);
gap: 4px;
margin-top: 4px;
}
@@ -671,8 +679,9 @@ input[type="password"] {
margin-top: 14px;
}
-.grid > :first-child {
- margin-top: 0;
+.line--me {
+ align-self: flex-end;
+ align-items: flex-end;
}
.author {
@@ -684,6 +693,10 @@ input[type="password"] {
overflow-wrap: anywhere;
}
+.author:empty {
+ display: none;
+}
+
.author--me {
color: var(--mark);
}
@@ -734,11 +747,14 @@ input[type="password"] {
cursor: pointer;
}
-/* разделители: дата — линией line, «новые» — линией mark */
+/* разделители: дата — линией line, «новые» — линией mark; во всю ширину
+ ленты, а не по ширине сообщения (feed-list выравнивает по краю только
+ .line, ADR-065) */
.divider {
display: flex;
align-items: center;
+ align-self: stretch;
gap: 14px;
margin: 14px 0;
color: var(--stone);
@@ -908,39 +924,10 @@ input[type="password"] {
display: none;
}
- /* сетка «автор 132 px + текст»: строка сообщения раскрывается
- в две ячейки сетки, поэтому display: contents */
-
.feed {
padding: 28px 32px;
}
- .grid {
- display: grid;
- grid-template-columns: 132px 1fr;
- column-gap: 20px;
- row-gap: 6px;
- line-height: 1.55;
- }
-
- .line,
- .line.is-head {
- display: contents;
- margin-top: 0;
- }
-
- .author {
- padding-top: 2px;
- font-size: 12px;
- }
-
- .divider {
- grid-column: 1 / -1;
- margin: 0;
- padding: 16px 0;
- font-size: 11px;
- }
-
.compose {
padding: 0 32px 28px;
}
@@ -992,11 +979,4 @@ input[type="password"] {
.enter {
display: none;
}
-
- /* автор стоит над группой, поэтому пустая ячейка автора не занимает
- места; на десктопе она держит колонку сетки и остаётся */
-
- .author:empty {
- display: none;
- }
}
diff --git a/web/js/ui/chat.js b/web/js/ui/chat.js
index 2a2ed56..25c96c1 100644
--- a/web/js/ui/chat.js
+++ b/web/js/ui/chat.js
@@ -79,7 +79,7 @@ export function renderChat(root, ctx, chatId) {
root.append(head(view));
view.feed = el("div", "feed");
- view.body = el("div", "grid");
+ view.body = el("div", "feed-list");
view.body.setAttribute("aria-live", "polite");
view.feed.append(view.body);
// Прокрутка к верхнему краю берёт следующую страницу (ADR-053).
@@ -524,12 +524,25 @@ function line(view, record, previous, parent = view.body) {
}
// Подряд идущие сообщения одного автора — без повтора автора.
const first = marks.length > 0 || !previous || previous.from !== record.from;
- const node = el("div", first ? "line is-head" : "line");
+ const node = el("div", lineClass(record, view.me, first));
node.append(author(view, record, first), text(view, record));
parent.append(...marks, node);
view.nodes.set(record.id, { node, marks });
}
+// lineClass — своя сторона ленты: свои сообщения вправо, чужие влево
+// (ADR-065), классом на самой строке — выравнивает feed-list.
+function lineClass(record, me, first) {
+ const classes = ["line"];
+ if (record.from === me) {
+ classes.push("line--me");
+ }
+ if (first) {
+ classes.push("is-head");
+ }
+ return classes.join(" ");
+}
+
// redraw обновляет одну строку на месте: автор и группировка от состояния
// сообщения не зависят.
function redraw(view, record) {
diff --git a/web/sw.js b/web/sw.js
index 6b98fa8..1f8f0c0 100644
--- a/web/sw.js
+++ b/web/sw.js
@@ -7,7 +7,7 @@
// Имя кэша содержит версию; версия — константа, она меняется при релизе,
// и старые кэши уходят в activate.
-const VERSION = "v4";
+const VERSION = "v5";
const CACHE = `bare-${VERSION}`;
// Оболочка — всё, из чего клиент поднимается без сети. Список явный: