# Временная шкала перекрывает «Рекомендуемые темы»

**URL:** https://meta.discourse.org/t/timeline-overlapping-suggested-topics/146855
**Category:** UX
**Tags:** suggested-topics
**Created:** [04.Апрель.2020 23:52:42 UTC](https://meta.discourse.org/t/timeline-overlapping-suggested-topics/146855 "2020-04-04T23:52:42Z")
**Posts on this page:** 19
**Page:** 1

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [04.Апрель.2020 23:52:42 UTC](https://meta.discourse.org/t/timeline-overlapping-suggested-topics/146855/1 "2020-04-04T23:52:42Z")

</div>

Привет.  
На коротких темах временная шкала накладывается на раздел «Предлагаемые темы»:

 ![image](https://global.discourse-cdn.com/meta/original/3X/a/6/a6cc04337a6e4d18eddc62061f65143359a0e569.png)  
 ![image](https://global.discourse-cdn.com/meta/original/3X/a/2/a21050466053de274d100137d2aacfc17759c3de.png)

Думаю, временную шкалу можно скрыть для тем без ответов, либо минимальная высота контейнера сообщений должна быть примерно такой же, как у временной шкалы?

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [05.Апрель.2020 01:43:17 UTC](https://meta.discourse.org/t/timeline-overlapping-suggested-topics/146855/2 "2020-04-05T01:43:17Z")

</div>

Если я не ошибаюсь, это проблема, которая существует уже давно и характерна для коротких экранов и тем в одну строку, но, возможно, мы регрессировали? 🤔

---

<div class="post-metadata">

### Author: ![hawm](https://avatars.discourse-cdn.com/v4/letter/h/f07891/32.png) [@hawm](https://meta.discourse.org/u/hawm)
#### Post date: [06.Апрель.2020 19:51:43 UTC](https://meta.discourse.org/t/timeline-overlapping-suggested-topics/146855/3 "2020-04-06T19:51:43Z")

</div>

Это также происходит, когда контент достаточно длинный и над сообщением есть какой-то контент

 ![image](https://global.discourse-cdn.com/meta/original/3X/5/b/5be28d66f5fa13e1a2eaebaf3c5507fcdb581b06.png)

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [11.Апрель.2020 00:02:24 UTC](https://meta.discourse.org/t/timeline-overlapping-suggested-topics/146855/4 "2020-04-11T00:02:24Z")

</div>

Однозначно наблюдаю это.

 ![image](https://global.discourse-cdn.com/meta/original/3X/1/f/1f02340857a331875c2ce5a533c1f2d45ea6d776.jpeg)

@awesomerobot напомнил, что мы, кажется, раньше скрывали временную шкалу для тем с одним постом. Возможно, поэтому мы видим это чаще, или это действительно регрессия? В любом случае, в данном случае все элементы временной шкалы дублируются в элементах управления в нижней части первого (и единственного) поста…

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [29.Апрель.2020 02:44:14 UTC](https://meta.discourse.org/t/timeline-overlapping-suggested-topics/146855/5 "2020-04-29T02:44:14Z")

</div>

Да, я думаю, что мы скрывали это с 2016 года: [UX: Hide all timeline controls when fewer than 3 posts · discourse/discourse@b9f8264 · GitHub](https://github.com/discourse/discourse/commit/b9f82641b04fd1b879075feaa80931f830b063c2)

До недавнего времени таймлайн скрывал

 ![Screen Shot 2020-04-28 at 10.43.31 PM](https://global.discourse-cdn.com/meta/original/3X/b/4/b4998e89ee88b57a6a3aef39e4c45a57f73ef3ee.png)

@j.jaffeux, не могло ли ваше недавнее изменение вызвать регресс?

> <https://github.com/discourse/discourse/commit/a947b7b839cfdd7436d533752d4df3eee1ce8bec>
>
> A large topic page will always have the bottom tracking button, and will also ha…ve the timeline, meaning we already had 2 tracking events.
> 
> But it gets even worse when you know that the timeline button is a component connector which will trigger \`didInsertElement\` very frequently, meaning we were constantly adding more and more appEvents handlers.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [29.Апрель.2020 02:55:50 UTC](https://meta.discourse.org/t/timeline-overlapping-suggested-topics/146855/6 "2020-04-29T02:55:50Z")

</div>

Определённо стоит скрывать ленту, если есть только ОДИН пост. Три — это уже слишком. А один…

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [29.Апрель.2020 03:04:33 UTC](https://meta.discourse.org/t/timeline-overlapping-suggested-topics/146855/7 "2020-04-29T03:04:33Z")

</div>

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

> [@Developing Discourse Themes & Theme Components](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648):
>
> Discourse Themes and Theme Components can be used to customize the look, feel and functionality of Discourse’s frontend. This section of the developer guides aims to provide all the reference materials you need to develop simple themes for a single site, right up to complex open-source theme components. This introduction aims to provide a map of all the tools and APIs for theme development. If you prefer a step-by-step tutorial for theme development, jump straight to: Themes vs. Theme Compon…

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [29.Апрель.2020 03:05:12 UTC](https://meta.discourse.org/t/timeline-overlapping-suggested-topics/146855/8 "2020-04-29T03:05:12Z")

</div>

Делайте это на основе длины поста плюс отдельный пост… Нам ведь не нужна вертикальная временная шкала для однострочного поста в одной теме, верно?

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [29.Апрель.2020 03:07:58 UTC](https://meta.discourse.org/t/timeline-overlapping-suggested-topics/146855/9 "2020-04-29T03:07:58Z")

</div>

Абсолютно нет, но нам нужно исправить реализацию, я думаю, в этом и суть.

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

Однако, если мы исправим базовую реализацию, я полностью поддержу сохранение этого для потрясающего руководства @Johani — это было бы очень полезно.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [29.Апрель.2020 03:14:47 UTC](https://meta.discourse.org/t/timeline-overlapping-suggested-topics/146855/10 "2020-04-29T03:14:47Z")

</div>

Логика должна быть такой:

> если в теме одна запись И если эта запись содержит менее .. 1000\* символов .. полностью скрывать ленту времени

Даже две записи по одному предложению, вероятно, безопасны, верно?

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

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [29.Апрель.2020 03:17:57 UTC](https://meta.discourse.org/t/timeline-overlapping-suggested-topics/146855/11 "2020-04-29T03:17:57Z")

</div>

Конечно, мы можем что-то сделать здесь, даже используя только CSS. Но в этом случае нам нужно исправить полосу прокрутки.

Иначе, возможно, стоит просто изменить логику на `если 1 пост, то скрыть ленту`, что ещё проще.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [29.Апрель.2020 03:18:45 UTC](https://meta.discourse.org/t/timeline-overlapping-suggested-topics/146855/12 "2020-04-29T03:18:45Z")

</div>

Если только этот единственный пост не является чудовищным текстом из 30 000 символов — мы не хотим, чтобы он был скрыт, так что.. нет.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [29.Апрель.2020 03:22:21 UTC](https://meta.discourse.org/t/timeline-overlapping-suggested-topics/146855/13 "2020-04-29T03:22:21Z")

</div>

Мы действительно хотим, чтобы это было скрыто… извините… в этом и суть. Если мы не исправим эту проблему:

 ![image](https://global.discourse-cdn.com/meta/original/3X/0/2/0274046b78b04088034a135759441773f69eb07a.png)

Я перетаскиваю таймлайн вниз:

 ![image](https://global.discourse-cdn.com/meta/original/3X/9/8/98c3b2fc3d15b9561f8121a2094d0ff79031fd64.png)

Он всё ещё находится вверху. 😿

Однако эта полоса прокрутки работает как ожидалось, если использовать нативную полосу прокрутки браузера:

 ![image](https://global.discourse-cdn.com/meta/original/3X/2/e/2e98937d5fcaa726647fd0ffd141e8979d5b004b.png)

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

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [29.Апрель.2020 03:55:43 UTC](https://meta.discourse.org/t/timeline-overlapping-suggested-topics/146855/14 "2020-04-29T03:55:43Z")

</div>

Понятно, нам нужны хорошие неформальные тестовые сценарии, чтобы убедиться, что мы охватили те, которые нам важны.

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [29.Апрель.2020 06:13:51 UTC](https://meta.discourse.org/t/timeline-overlapping-suggested-topics/146855/15 "2020-04-29T06:13:51Z")

</div>

Нет, это не тот коммит.

Скорее всего, соответствующий коммит — это:

> <https://github.com/discourse/discourse/commit/a3345057f2a14b25cf8f436e248d17e78502a8ce>
>
> The streamlength/height code when true would return just after we had inserted t…he timeline-controls, resulting, on topic-progress event to display an empty timeline-controls when clicked.
> 
> I think this code in unecessary and we should only rely on the code in \`hideProgress\` which will currenly hide the progress is the stream has only one post displayed on desktop (always shown on mobile).

Так что до этого коммита логика была несколько дублирована и отличалась, а также вызывала появление пустого (но видимого) виджета timeline-controls.

Разберусь с этим сегодня.

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [29.Апрель.2020 09:36:16 UTC](https://meta.discourse.org/t/timeline-overlapping-suggested-topics/146855/16 "2020-04-29T09:36:16Z")

</div>

Моя попытка исправить наложение временной шкалы находится здесь:

> <https://github.com/discourse/discourse/pull/9581>

Это не исправляет то, что вы описали: при клике или перетаскивании на временной шкале не меняется позиция прокрутки окна. Я быстро посмотрел, как это сделать, и считаю, что это должна быть отдельная задача. Так было всегда, и изменение этого поведения имеет множество последствий.

Если у нас есть только один пост, я теперь буду проверять его высоту и скрывать скроллер, если она меньше 1000 пикселей.

Это соответствует посту примерно такой длины:

 ![Screenshot 2020-04-29 at 11.21.42](https://global.discourse-cdn.com/meta/original/3X/0/e/0e11a152f5fe73cced311bcbfb317404788da390.png)

Пример с коротким постом:

 ![Screenshot 2020-04-29 at 11.35.42](https://global.discourse-cdn.com/meta/original/3X/3/c/3c1ffe319c8a0c028ad2985a7bcf7a7b2f712803.png)

Этот коммит также исправляет другую ошибку, из-за которой кнопка администратора темы отображалась в неправильном положении при полной перезагрузке страницы:

Так:

 ![Screenshot 2020-04-29 at 11.27.24](https://global.discourse-cdn.com/meta/original/3X/f/3/f36c014a6d33ef0d5cc02da8ccba28833b3dca73.png)

Вместо этого положения после исправления:

 ![Screenshot 2020-04-29 at 11.28.13](https://global.discourse-cdn.com/meta/original/3X/9/0/908ac26c9968f33cfdf26913f00f0250a7ab7edb.png)

Я также проверил, что два поста с минимальным количеством контента не накладываются друг на друга:

 ![Screenshot 2020-04-29 at 11.21.15](https://global.discourse-cdn.com/meta/original/3X/b/d/bd3b871a86bce14d13b087f28ab07522c784f878.png)

На мобильных устройствах ничего меняться не должно.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [29.Апрель.2020 14:37:45 UTC](https://meta.discourse.org/t/timeline-overlapping-suggested-topics/146855/17 "2020-04-29T14:37:45Z")

</div>

Отлично, спасибо, Жоффрей 😻

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [29.Апрель.2020 15:07:04 UTC](https://meta.discourse.org/t/timeline-overlapping-suggested-topics/146855/18 "2020-04-29T15:07:04Z")

</div>

Это уже слито, пример можно увидеть в действии в этой теме (по крайней мере, пока там только один пост):

> [@\[PAID\] Add some functions to voice recorder](https://meta.discourse.org/t/paid-add-some-functions-to-voice-recorder/149753):
>
> Copy of plugin: [https://github.com/d654525/voice-record-fontStyles](https://github.com/d654525/voice-record-fontStyles) Core functions work correctly. I need to add some extra features. limit the length of recording to 3 minutes, after it reaches the limit stop the recording and start saving show a progress indicator during saving process show icons that are not visible now but are in the code: [Screenshot by Lightshot](https://prnt.sc/s5p68i) Time - 1 week. Price - discussable. Please, write me PM.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [05.Май.2020 01:00:12 UTC](https://meta.discourse.org/t/timeline-overlapping-suggested-topics/146855/19 "2020-05-05T01:00:12Z")

</div>

Эта тема была автоматически закрыта через 5 дней. Новые ответы больше не принимаются.
