, включая .record-row и его же .record-comment-row, которые
должны остаться визуально одной записью без зазора между ними). */
.record-spacer > td { height: 10px; padding: 0; border: none; background: transparent; }
/* Правки, п.9 — активные записи (Obzor) просторнее, архив остаётся компактным
(базовое правило = текущий/архивный отступ, :not(.record-row-archived) даёт прибавку).
Граница-разделитель перенесена на .record-comment-row (сессия 2026-09-12, п.4) —
.record-row и следующий за ним .record-comment-row визуально одна "запись". */
.record-row > td {
padding: 8px 10px;
vertical-align: middle;
font-size: 14px;
color: var(--text-primary);
/* Глобальное td{border-bottom:1px solid var(--border)} (index.html, общий стиль
для всех таблиц включая admin) иначе рисует лишнюю линию МЕЖДУ этой строкой
и её же .record-comment-row — они должны читаться одной записью, не двумя. */
border-bottom: none;
/* Верх записи закрывается ЕЁ СОБСТВЕННОЙ границей (раньше — общей с предыдущей
строкой при border-collapse, до .record-spacer это работало; после — рамки
соседних записей больше не соприкасаются). */
border-top: 3px solid var(--record-border-strong);
}
.record-row:not(.record-row-archived) > td { padding: 12px 10px 4px; }
/* Исправление бага — border-left/right должны стоять ТОЛЬКО на крайних
ячейках строки (левый/правый край записи), а не на td вообще: раньше
правило било по ВСЕМ 8 колонкам разом и рисовало лишние вертикальные линии
МЕЖДУ каждой парой столбцов вместо рамки по краям (отзыв Igor: "внутри
списка появились линии, а по левому/правому краю границы не видно"). */
.record-row > td:first-child { border-left: 3px solid var(--record-border-strong); }
.record-row > td:last-child { border-right: 3px solid var(--record-border-strong); }
/* Внутренние разделители КОЛОНОК (тонкие, --card-border) — отдельно от жирной
рамки самой записи выше. :not(:last-child) — чтобы не задвоить с жирным
border-right последней колонки. */
.record-row > td:not(:last-child) { border-right: 1px solid var(--card-border); }
.record-row:hover > td, .record-row:hover + .record-comment-row > td { background: var(--list-bg); }
/* Правки, п.7 — вся строка кликабельна (открывает detail-модалку, read-only). */
.record-row { cursor: pointer; }
/* Сессия 2026-09-12, п.1 (усилено по фидбэку — было недостаточно заметно) — номер
брака вторичен, когда есть серийник (идентификация уже по названию+серийнику,
PRODUCTION_WORKFLOW.md §2). Поле остаётся видимым и рабочим (не disabled), но
выглядит так же "неактивно", как [readonly]-поля в форме (--bg-elevated/--text-dim,
см. .form-row input[readonly] в index.html) — клик/фокус возвращает обычный вид. */
.record-order-muted { color: var(--text-hint); font-weight: 400; }
input.record-order-muted {
background: var(--bg-elevated);
color: var(--text-dim);
border-color: var(--border);
}
input.record-order-muted:hover { border-color: var(--border-light); }
/* Сессия 2026-09-12, п.4 — превью последнего комментария всегда видно под записью,
клик по нему (не по остальной строке) разворачивает полную историю чата — тот же
card-chat-block/toggleCardChat, что у исполнителя. Компактно: минимальный отступ,
курсив+кавычки визуально отличают "живой" текст комментария от заголовка/значений. */
.record-comment-row > td {
padding: 0 12px 8px;
/* Отзыв Igor — записи сливались, граница между ними сделана заметнее (толще +
темнее, см. --record-border-strong в tokens.css). Низ/лево/право рамки
записи — verх даёт .record-row (border-top, своя, не общая с соседом —
см. .record-spacer). Тут ОДНА ячейка на всю строку (colspan), поэтому
она же и есть :last-child. Сессия 2026-09-13 — раньше был отдельный
:last-child-of-tbody исключением (низ = внешняя рамка таблицы для
последней записи), теперь его нет: таблица больше не рисует общую рамку,
каждая запись, включая последнюю, замыкает свою границу сама. */
border-bottom: 3px solid var(--record-border-strong);
border-left: 3px solid var(--record-border-strong);
cursor: default;
}
.record-comment-row > td:last-child { border-right: 3px solid var(--record-border-strong); }
.record-comment-row .card-chat-preview { font-style: italic; }
.record-comment-row .card-chat-preview:not(:empty)::before { content: '“'; }
.record-comment-row .card-chat-preview:not(:empty)::after { content: '”'; }
.record-comment-row .card-chat-preview:empty {
display: block;
font-style: normal;
}
.record-comment-row .card-chat-preview:empty::before { content: attr(data-empty-label); color: var(--text-hint); }
/* Статус — цветной бейдж (фон = display_color, текст белый). Повторный брак
в итоге получил СВОЙ отдельный бейдж (.record-repeat-badge ниже) вместо
перекраски текста этого — решение Igor, см. session-report.md часть 3. */
.status-pill {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
color: #fff;
white-space: nowrap;
}
.status-pill-red { background: var(--status-red); }
.status-pill-green { background: var(--status-green); }
.status-pill-yellow { background: var(--status-yellow); }
.status-pill-gray { background: var(--status-gray); }
/* Отзыв Igor (сессия 2026-09-13) — "чтобы все записи вмещались в экран без
прокрутки": самый длинный статус-текст ("Nurašyti rekomenduojama") при
nowrap растягивал ПЕРВУЮ колонку таблицы почти до 225px (самая широкая
колонка вообще) — таблица только из-за него не влезала в доступную ширину.
Перенос в 2 строки + фиксированная ширина колонки, тот же приём, что уже
сделан для карточки исполнителя (cards.css .exec-cell-status .status-pill). */
/* max-width СТРОГО на самой пилюле (не на td — table-layout:auto всё равно
выдал бы ей больше места, раз где-то есть излишек, см. session-report) —
заставляет реально переноситься на 2 строки вместо однострочного разъезда. */
.records-table .status-pill { display: block; max-width: 88px; white-space: normal; text-align: center; font-size: 10.5px; line-height: 1.2; padding: 3px 6px; word-break: break-word; }
.records-table td:first-child, .records-table th:first-child { width: 100px; max-width: 100px; }
/* Длинные значения не растягивают колонку — обрезаются с "…", полный текст
доступен через title (тот же паттерн, что exec-cell-component-name). */
.record-name-cell { min-width: 120px; max-width: 160px; }
/* text-overflow:ellipsis не работает надёжно на flex-контейнере с НЕСКОЛЬКИМИ
детьми (иконка/бейдж + текст) — обрезается голым текстом без "…", иногда
вместе с бейджем. Усекается только сам текст (record-name-text), бейдж/
иконка остаются целиком видны рядом (min-width:0 разрешает span сжаться
меньше своего content-width — без этого flex-item ellipsis тоже не сработает). */
.record-name-main { display: flex; align-items: center; gap: 5px; font-weight: 600; min-width: 0; }
.record-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.record-name-serial { font-size: 12px; color: var(--text-secondary); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-order-cell { max-width: 135px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Излишек ширины (surplus) от table-layout:auto иначе достаётся первым же
колонкам без max-width — Įrenginys/Kiekis/👁 у него не было, отсюда 80-90px
на 5-7 символов. Заголовки коротких колонок тоже разрешаем переносить
(было nowrap у ВСЕХ th, см. ниже) — так узкая колонка не тянет за собой
ширину из-за собственного заголовка. */
.records-table td:nth-child(2), .records-table th:nth-child(2) { max-width: 62px; }
.record-date-cell { max-width: 112px; }
/* «Повторный брак» (сессия 2026-09-12, часть 3) — было BL-066 (комментарий выше),
реализовано здесь. Бейдж вместо треугольника-иконки старой карточной вёрстки. */
.record-repeat-badge {
display: inline-block; background: var(--repeat-badge-bg); color: #fff;
font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
white-space: nowrap; cursor: pointer;
}
.record-row.record-row-repeat > td { background: var(--repeat-row-bg); }
.record-row.record-row-repeat:hover > td { background: var(--repeat-row-bg); filter: brightness(0.97); }
.record-qty-cell { white-space: nowrap; }
.record-qty-unit { color: var(--text-secondary); font-size: 12px; }
.record-date-cell { white-space: nowrap; font-family: var(--mono); font-size: 12px; }
.record-date-cell .record-date-time { color: var(--text-secondary); margin-left: 4px; }
.record-actions-cell { white-space: nowrap; text-align: right; max-width: 100px; }
.record-actions-cell .icon-btn { margin-left: 3px; }
/* Правки, п.6 — крупнее иконка "просмотрено" (была 13px из общего .rec-viewed-icon,
cards.css) — только в таблице, executor-карточку не трогаем. */
.records-table .rec-viewed-icon { font-size: 19px; }
@media (max-width: 900px) {
.records-table thead { display: none; }
.records-table, .records-table tbody,
.record-row, .record-row > td,
.record-comment-row, .record-comment-row > td { display: block; width: 100%; }
.record-comment-row { border-bottom: 1px solid var(--card-border); padding: 0 0 8px; }
.record-row > td, .record-comment-row > td { border-bottom: none; padding: 4px 12px; }
/* Каждый | в мобильной раскладке — свой блок (см. display:block выше) —
border-top на .record-row > td (table-view.css, десктопная рамка записи)
иначе рисует линию НАД КАЖДЫМ полем, а не одну над записью целиком. */
.record-row > td { border-top: none; }
.record-row > td:first-child { border-top: 3px solid var(--record-border-strong); }
.record-spacer { display: block; }
.record-spacer > td { display: block; }
/* Отзыв Igor (сессия 2026-09-13) — max-width/width на колонках нужны ТОЛЬКО
чтобы уместить таблицу в ряд на десктопе (см. правки выше, "чтобы все
записи вмещались в экран"); в мобильной раскладке колонки уже стоят
каждая на всю ширину экрана в столбик — те же ограничения там только
обрезают текст без всякой пользы (лишняя "…" там, где реально есть место). */
.records-table td:first-child, .records-table td:nth-child(2),
.record-name-cell, .record-order-cell, .record-actions-cell, .record-date-cell {
width: auto; max-width: none;
}
.records-table .status-pill { display: inline-block; max-width: none; font-size: 12px; }
.record-name-text, .record-name-serial, .record-order-cell { overflow: visible; text-overflow: clip; white-space: normal; }
}
/* ==========================================================================
Правки, п.8 — независимая прокрутка: форма слева и шапка списка (табы Obzor/
Arhiv + toolbar + фильтры) остаются на месте, скроллится только сама таблица.
top:72px у .form-panel уже учитывал высоту сайтового хедера (52px + 16px
отступ рамки, см. .header{top:16px} в layout.css) — сохраняем то же значение,
не 0, иначе форма при скролле уезжала бы ПОД хедер вместо стыковки под ним.
Отзыв Igor (сессия 2026-09-13) — фиксированный calc(100vh - 88px) не
учитывал реальную высоту всего, что стоит НАД .op-grid (title-tag/h1 —
и banner мастер-пароля, когда он показан): .list-col/.form-panel считали
себя выше, чем реально остававшееся место, из-за этого содержимое
вылезало за пределы экрана, и скроллиться начинала уже ВСЯ страница
(а не только список) — заголовок таблицы/шапка сайта при этом уезжали.
--records-avail-height считается в JS (syncLayoutHeights, index.html)
от РЕАЛЬНОЙ позиции .op-grid на экране — calc(100vh-88px) остаётся только
как запасное значение до первого JS-пересчёта.
Отзыв Igor (сессия 2026-09-13, следующий раунд) — то же самое нужно ВСЕМ
вкладкам (NUSTATYMAI/ADMIN), не только Записям: раньше у них не было
своего скролла вообще, длинная таблица просто прокручивала body целиком
(и вместе с ним — сайтовый хедер/логотип). .main теперь ЕДИНЫЙ реальный
скролл-контейнер для содержимого активной вкладки — body никогда не
скроллится сам ни при каких условиях. */
.main {
height: var(--main-avail-height, calc(100vh - 88px));
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
}
/* .op-grid (index.html) сам по себе, без явной высоты, иногда занимал на
несколько px больше, чем высота его детей (form-panel/list-col) — grid
auto-sizing строки не всегда точно совпадает с их var(--records-avail-
height), давая тот же лишний хвост, что и раньше. Явная высота убирает
расхождение. */
.op-grid { height: var(--records-avail-height, calc(100vh - 88px)); }
.form-panel {
top: 72px;
height: var(--records-avail-height, calc(100vh - 88px));
overflow-y: auto;
/* Отзыв Igor — докрутив список формы/записей до конца, дальнейшая прокрутка
колёсиком не должна "пробивать" наверх до body (scroll chaining) — с
верной высотой (--records-avail-height) сама надобность в этом почти не
возникает, но contain — правильная страховка на границе. */
overscroll-behavior: contain;
}
.list-col {
display: flex;
flex-direction: column;
height: var(--records-avail-height, calc(100vh - 88px));
}
#records-list {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
overscroll-behavior: contain;
}
#records-pagination { flex: 0 0 auto; }
@media (max-width: 900px) {
/* Мобильный layout — обычная страница целиком, без независимых
скролл-областей (там и так всё в один столбец, разбивать нечего). */
.main { height: auto; overflow-y: visible; }
.op-grid { height: auto; }
.form-panel { height: auto; overflow-y: visible; }
.list-col { height: auto; }
#records-list { overflow-y: visible; }
}
|