Архивация списков (#9)

Co-authored-by: gorbenko.pavel <gorbenko.pavel@tansu.kz>
Reviewed-on: http://git.tnsu.kz/timur.gorodetskiy/request-portal/pulls/9

src/webparts/requestPortal/components/RequestPortal.module.scss

@@ -55,21 +55,44 @@
   min-height: 78vh; // «присутствие» рейла даже когда контента мало
 }
 
-// Рейл-колонка: раньше тянулась по высоте .main (align-items: stretch), из-за
-// чего высота рейла плавала вместе с содержимым соседней колонки — например, у
-// вкладки «Инициированные мной» появляется доп. фильтр по статусу, .main
-// становится чуть выше, и градиентный фон Sidebar (посчитанный от своей же
-// высоты) заметно менял оттенок. Прибиваем рейл к высоте окна (sticky + 100vh):
-// теперь он не зависит от того, что показано рядом. На мобильном брейкпоинте
-// сам Sidebar уходит в position:fixed (см. @tnsu/ui-kit) — там эти правила уже
-// не действуют.
+// Рейл-колонка.
+//
+// Здесь сходятся два требования, которые по отдельности решаются по-разному:
+//
+// 1. Градиент рейла не должен менять оттенок от высоты соседней колонки. Раньше
+//    колонка тянулась по .main (align-items: stretch), и, например, доп. фильтр
+//    по статусу на вкладке «Инициированные мной» делал .main чуть выше — фон
+//    Sidebar (градиент от своей же высоты, см. $grad-header в @tnsu/ui-kit)
+//    заметно менял тон. Поэтому САМ РЕЙЛ прибит к высоте окна (100vh) и от
+//    содержимого рядом больше не зависит.
+// 2. Под рейлом не должно быть белого провала на длинных таблицах. Прежняя
+//    версия задавала height:100vh самой КОЛОНКЕ — и всё, что ниже первого
+//    экрана, оставалось непрокрашенным: на длинном списке заявок рейл выглядел
+//    обрезанным. Ставку на sticky тут держать нельзя: в SharePoint прокручивается
+//    не окно, а внутренний контейнер страницы, и sticky там нередко не
+//    включается вовсе — тогда рейл просто уезжает вверх вместе с контентом.
+//
+// Отсюда разделение: КОЛОНКА тянется во всю высоту раскладки и закрашена
+// $navy-800 — это цвет, которым градиент рейла заканчивается (на 85% и до
+// конца), поэтому стык с липкой частью не виден. РЕЙЛ внутри — sticky на 100vh
+// поверх этой заливки. Не включился sticky — под рейлом всё равно та же
+// заливка, а не белизна.
+//
+// На мобильном брейкпоинте сам Sidebar уходит в position:fixed (см.
+// @tnsu/ui-kit) — там эти правила уже не действуют, см. @media ниже.
 .side {
   flex: 0 0 auto;
   display: flex;
-  position: sticky;
-  top: 0;
-  align-self: flex-start;
-  height: 100vh;
+  align-self: stretch;
+  background: $navy-800;
+
+  // Прямой потомок — корень Sidebar из @tnsu/ui-kit (своего класса снаружи не
+  // видно, поэтому селектор по структуре, а не по имени).
+  > * {
+    position: sticky;
+    top: 0;
+    height: 100vh;
+  }
 }
 
 .main {
@@ -109,6 +132,20 @@
   .mobileNav {
     display: block;
   }
+
+  // Снимаем десктопные правила рейла явно. Здесь ui-kit сам делает Sidebar
+  // position:fixed (top/bottom/left), и наш sticky+100vh спорил бы с ним при
+  // равной специфичности — исход решался бы порядком подключения стилей.
+  // Заливка колонки тоже не нужна: колонка схлопнута, drawer красит себя сам.
+  .side {
+    align-self: flex-start;
+    background: none;
+
+    > * {
+      position: static;
+      height: auto;
+    }
+  }
 }
 
 // Полоса отладочной подмены личности (см. shared/impersonation.ts). Красная и