@bigplay/tree-view-core 0.3.1 → 0.4.0

package/styles.css

@@ -19,12 +19,13 @@
   width: 100%;
   height: 100%;
   overflow: hidden;
-  /* Без этого мобильный браузер сам скроллит страницу вместо перетаскивания. */
-  touch-action: none;
 }
 
 .tree-view--pannable {
   cursor: grab;
+  /* Без этого мобильный браузер сам скроллит страницу вместо перетаскивания.
+     Когда таскать нельзя — не мешаем: страницу и полосу раундов листают пальцем. */
+  touch-action: none;
 }
 
 /* size="content": размер задаётся инлайном, ничего не обрезаем. */
@@ -232,6 +233,11 @@
   --tv-rounds-color: #9ca3af;
   --tv-rounds-border: 2px solid #e5e7eb;
   --tv-rounds-gap: 20px;
+  --tv-rounds-fade: 220ms;
+  /* В свайпере линия — единственная подсказка, что матч идёт дальше,
+     поэтому она заметнее, чем на широком экране. */
+  --tv-rounds-link-color: #94a3b8;
+  --tv-rounds-link-width: 3px;
 
   display: flex;
   flex-direction: column;
@@ -264,3 +270,68 @@
   border: none;
   border-right: var(--tv-rounds-border);
 }
+
+/* ── Свайпер: узкий экран ───────────────────────────────────────
+ * Раунд занимает всю ширину блока, а сама полоса становится
+ * прокручиваемой: шапка и сетка едут вместе, листаются пальцем и
+ * прилипают к границе раунда. Сетка при этом одна — линии между
+ * матчами никуда не деваются.
+ */
+
+/* Линии в свайпере: единственное, что показывает, куда матч идёт дальше. */
+.tv-rounds--swipe .tree-view {
+  --tv-link-color: var(--tv-rounds-link-color);
+  --tv-link-width: var(--tv-rounds-link-width);
+}
+
+.tv-rounds--swipe {
+  width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+  /* Свайп внутри полосы не должен утягивать за собой страницу. */
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+}
+
+.tv-rounds--swipe::-webkit-scrollbar {
+  display: none;
+}
+
+.tv-rounds--swipe .tv-rounds__item {
+  scroll-snap-align: start;
+}
+
+/* Пройденный раунд: убран с глаз, но не из раскладки — иначе прокрутка
+   и точки прилипания поехали бы прямо под пальцем.
+
+   Уходит и возвращается плавно: при свайпе карточки соседнего раунда иначе
+   пропадают рывком прямо под пальцем. Видимость снимается только после того,
+   как карточка растворилась, — поэтому у неё отдельная задержка.
+
+   Селектор нарочно такой же длины, как у правила ниже: иначе переход
+   из него перебил бы этот и карточка исчезала бы мгновенно. */
+.tv-rounds--swipe [data-depth] {
+  transition: opacity var(--tv-rounds-fade, 220ms) ease;
+}
+
+.tv-rounds--swipe [data-depth].tv-hidden {
+  visibility: hidden;
+  opacity: 0;
+  transition:
+    opacity var(--tv-rounds-fade, 220ms) ease,
+    visibility 0s linear var(--tv-rounds-fade, 220ms);
+}
+
+/* Вне свайпера прятать нечего анимировать — убираем сразу. */
+.tv-hidden {
+  visibility: hidden;
+}
+
+/* Кому анимации мешают — тому сразу и без переходов. */
+@media (prefers-reduced-motion: reduce) {
+  .tv-rounds--swipe [data-depth],
+  .tv-rounds--swipe [data-depth].tv-hidden {
+    transition: none;
+  }
+}